/* ============================================================================
   trang.css — giao diện KHU CÔNG KHAI của donloc.vn
   ----------------------------------------------------------------------------
   Tự viết từ đầu, CỐ Ý không chép site.css của phần mềm bán hàng sang. Hai nơi
   phục vụ hai người khác nhau: phần mềm là công cụ làm việc cả ngày (dày đặc,
   nhiều bảng, chữ nhỏ), trang giới thiệu là nơi người lạ ghé vào 40 giây (thoáng,
   chữ to, ít thứ trên màn hình). Dùng chung một tệp là hai bên kéo nhau đi sai
   hướng, và mỗi lần sửa phần mềm lại phải nhớ xem có làm vỡ trang giới thiệu không.

   Tên lớp đặt bằng tiếng Việt không dấu theo lối khối__phần--kiểu.
   ========================================================================== */

/* ---------- 1. Biến chung ---------- */
:root {
    --xanh: #16a34a;            /* xanh lá DonLoc — nút chính, nhấn mạnh */
    --xanh-dam: #15803d;
    --xanh-nhat: #f0fdf4;
    --ngoc: #0d9488;            /* xanh ngọc — màu phụ, dùng cho chuyển sắc */
    --ngoc-dam: #0f766e;

    --muc: #0f172a;             /* chữ tiêu đề */
    --chu: #334155;             /* chữ nội dung */
    --chu-nhat: #64748b;        /* chữ phụ, chú thích */
    --vien: #e2e8f0;
    --vien-dam: #cbd5e1;

    --nen: #ffffff;
    --nen-nhat: #f8fafc;

    --goc: 14px;
    --goc-nho: 9px;
    --bong: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .06);
    --bong-cao: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 45px rgba(15, 23, 42, .12);

    --rong: 1180px;
    --cao-dau: 68px;            /* chiều cao thanh điều hướng, dùng lại ở nhiều chỗ */
}

/* ---------- 2. Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--nen);
    color: var(--chu);
    font-family: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--muc);
    line-height: 1.25;
    margin: 0 0 .6em;
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--xanh-dam); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Viền tiêu điểm dùng chung — người dùng bàn phím phải luôn nhìn thấy mình đang ở đâu. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

.khung {
    width: 100%;
    max-width: var(--rong);
    margin: 0 auto;
    padding: 0 20px;
}

/* Liên kết "bỏ qua tới nội dung": chỉ hiện khi người dùng bấm Tab lần đầu. */
.bo-qua {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--xanh);
    color: #fff;
    padding: 10px 18px;
    z-index: 100;
}
.bo-qua:focus { left: 8px; top: 8px; }

/* ---------- 3. Nút ---------- */
.nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
    text-decoration: none;
}
.nut:hover { text-decoration: none; transform: translateY(-1px); }

.nut--dac {
    background: linear-gradient(135deg, var(--xanh), var(--ngoc));
    color: #fff;
    box-shadow: 0 6px 18px rgba(13, 148, 136, .28);
}
.nut--dac:hover { box-shadow: 0 10px 26px rgba(13, 148, 136, .36); }

.nut--vien {
    background: #fff;
    color: var(--xanh-dam);
    border-color: var(--vien-dam);
}
.nut--vien:hover { border-color: var(--xanh); background: var(--xanh-nhat); }

.nut--trang {
    background: #fff;
    color: var(--xanh-dam);
}

.nut--to { padding: 15px 30px; font-size: 1.05rem; }

/* ---------- 4. Thanh điều hướng ---------- */
.dau-trang {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--vien);
    transition: box-shadow .2s ease;
}
/* Lớp này do trang.js gắn khi người đọc cuộn xuống — thanh menu tách khỏi nội dung bằng bóng đổ. */
.dau-trang.da-cuon { box-shadow: 0 2px 16px rgba(15, 23, 42, .08); }

.dau-trang__trong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--cao-dau);
}

.hieu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muc);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
}
.hieu:hover { text-decoration: none; }
.hieu__dau { display: inline-flex; }
.hieu--chan .hieu__chu { color: #fff; font-size: 1.25rem; }

.dieu-huong {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dieu-huong > a {
    padding: 9px 13px;
    border-radius: var(--goc-nho);
    color: var(--chu);
    font-weight: 600;
    font-size: .95rem;
}
.dieu-huong > a:hover { background: var(--nen-nhat); color: var(--muc); text-decoration: none; }
.dieu-huong > a.dang-xem { color: var(--xanh-dam); background: var(--xanh-nhat); }

.dieu-huong__nut { display: flex; align-items: center; gap: 10px; margin-left: 12px; }

.nut-ba-gach {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 40px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--vien);
    border-radius: var(--goc-nho);
    cursor: pointer;
}
.nut-ba-gach span {
    display: block;
    height: 2px;
    background: var(--muc);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
/* Ba gạch biến thành dấu X khi menu mở — người dùng thấy ngay nút này giờ để đóng lại. */
.nut-ba-gach.dang-mo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nut-ba-gach.dang-mo span:nth-child(2) { opacity: 0; }
.nut-ba-gach.dang-mo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Khối chung ---------- */
.khoi { padding: 76px 0; }
.khoi--nhat { background: var(--nen-nhat); }
.khoi--xanh { background: var(--xanh-nhat); }

.khoi__dau { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.khoi__dau p { color: var(--chu-nhat); font-size: 1.08rem; margin: 0; }
/* Cùng canh giữa như đầu khối, nhưng đặt ở CUỐI khối (nút "Xem tất cả…"). */
.khoi__dau--duoi { margin: 40px auto 0; }

.nhan {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--xanh-nhat);
    color: var(--xanh-dam);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- 6. Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1000px 460px at 12% -10%, rgba(22, 163, 74, .12), transparent 60%),
        radial-gradient(760px 420px at 92% 0%, rgba(13, 148, 136, .12), transparent 62%),
        var(--nen);
    padding: 74px 0 84px;
}

.hero__luoi {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: center;
}

.hero h1 { margin-bottom: .35em; }
.hero__mo-ta { font-size: 1.2rem; color: var(--chu); margin-bottom: .5em; }
.hero__mo-ta-phu { font-size: 1.02rem; color: var(--chu-nhat); }

.hero__nut { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__yen-tam {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
    padding: 0;
    list-style: none;
    color: var(--chu-nhat);
    font-size: .94rem;
}
.hero__yen-tam li { display: flex; align-items: center; gap: 7px; }

.hero__hinh { display: flex; justify-content: center; }
.hero__hinh svg { width: 100%; max-width: 520px; height: auto; }

/* ---------- 7. Thẻ tính năng ---------- */
.luoi-the {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 22px;
}

.the {
    background: var(--nen);
    border: 1px solid var(--vien);
    border-radius: var(--goc);
    padding: 26px 24px;
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.the:hover {
    transform: translateY(-3px);
    box-shadow: var(--bong);
    border-color: #bbf7d0;
}
.the h3 { margin-bottom: .35em; }
.the p { color: var(--chu-nhat); font-size: .96rem; margin: 0; }

.the__dau {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--xanh-nhat);
    color: var(--xanh-dam);
}
.the__dau svg { width: 24px; height: 24px; }

/* ---------- 8. Ngành hàng ---------- */
.nganh-hang {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
.nganh-hang li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    background: var(--nen);
    border: 1px solid var(--vien);
    border-radius: 999px;
    font-weight: 600;
    color: var(--chu);
    font-size: .96rem;
}
.nganh-hang li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--xanh), var(--ngoc));
}

/* ---------- 9. Bảng giá ---------- */
.luoi-goi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 24px;
    align-items: start;
}

.goi {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--nen);
    border: 1px solid var(--vien);
    border-radius: 18px;
    padding: 30px 26px;
    height: 100%;
}
/* Gói nổi bật: nhô cao hơn một chút và có viền màu. Chỉ dùng cho ĐÚNG một gói —
   ba gói cùng "nổi bật" thì không gói nào nổi bật cả. */
.goi--noi-bat {
    border: 2px solid var(--xanh);
    box-shadow: var(--bong-cao);
    transform: translateY(-8px);
}
.goi__co {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--xanh), var(--ngoc));
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.goi__ten { font-size: 1.35rem; margin-bottom: .2em; }
.goi__cau { color: var(--chu-nhat); font-size: .94rem; min-height: 2.6em; margin-bottom: 14px; }

.goi__gia { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.goi__so { font-size: 2.1rem; font-weight: 800; color: var(--muc); letter-spacing: -.02em; }
.goi__don-vi { color: var(--chu-nhat); font-size: .95rem; }
.goi__gia-goc {
    color: var(--chu-nhat);
    text-decoration: line-through;
    font-size: .95rem;
}
.goi__ghi-chu {
    margin: 6px 0 20px;
    color: var(--chu-nhat);
    font-size: .86rem;
}

.goi__nhom { margin-top: 18px; }
.goi__nhom h4 {
    margin: 0 0 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--chu-nhat);
}
.goi__muc { list-style: none; margin: 0; padding: 0; }
.goi__muc li {
    position: relative;
    padding: 4px 0 4px 26px;
    font-size: .95rem;
}
/* Dấu tích vẽ bằng CSS — không cần tải thêm tệp ảnh hay bộ biểu tượng nào. */
.goi__muc li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 5px;
    height: 10px;
    border: solid var(--xanh);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.goi__day { margin-top: auto; padding-top: 24px; }
.goi__day .nut { width: 100%; }

.bang-gia__that-tha {
    margin-top: 26px;
    text-align: center;
    color: var(--chu-nhat);
    font-size: .92rem;
}

/* ---------- 10. Tin tức ---------- */
.luoi-bai {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.bai {
    display: flex;
    flex-direction: column;
    background: var(--nen);
    border: 1px solid var(--vien);
    border-radius: var(--goc);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .2s ease;
}
.bai:hover { transform: translateY(-3px); box-shadow: var(--bong); }

.bai__anh {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--nen-nhat);
    overflow: hidden;
}
.bai__anh img { width: 100%; height: 100%; object-fit: cover; }

/* Bài chưa có ảnh bìa: một khối màu nhạt có chữ cái đầu của tiêu đề. Đỡ hơn hẳn việc để trống —
   lưới thẻ không bị thủng lỗ, và mỗi bài vẫn có một hình riêng để mắt bám vào. */
.bai__chu-cai {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    color: var(--xanh);
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
}

.bai__than { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.bai__danh-muc {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--xanh-nhat);
    color: var(--xanh-dam);
    font-size: .78rem;
    font-weight: 700;
}
.bai__danh-muc:hover { text-decoration: none; background: #dcfce7; }

.bai__ten { font-size: 1.08rem; margin-bottom: .4em; }
.bai__ten a { color: var(--muc); }
.bai__ten a:hover { color: var(--xanh-dam); text-decoration: none; }

.bai__tom-tat { color: var(--chu-nhat); font-size: .94rem; margin: 0 0 14px; }
.bai__chan { margin-top: auto; color: var(--chu-nhat); font-size: .86rem; }

.loc-danh-muc {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 34px;
    justify-content: center;
}
.loc-danh-muc a {
    padding: 8px 17px;
    border: 1px solid var(--vien);
    border-radius: 999px;
    background: var(--nen);
    color: var(--chu);
    font-weight: 600;
    font-size: .92rem;
}
.loc-danh-muc a:hover { border-color: var(--xanh); text-decoration: none; }
.loc-danh-muc a.dang-xem {
    background: var(--xanh);
    border-color: var(--xanh);
    color: #fff;
}

.phan-trang {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 44px;
}
.phan-trang a, .phan-trang span {
    min-width: 42px;
    padding: 9px 13px;
    border: 1px solid var(--vien);
    border-radius: var(--goc-nho);
    text-align: center;
    color: var(--chu);
    font-weight: 600;
    font-size: .93rem;
}
.phan-trang a:hover { border-color: var(--xanh); text-decoration: none; }
.phan-trang .dang-xem {
    background: var(--xanh);
    border-color: var(--xanh);
    color: #fff;
}
.phan-trang .cach { border-color: transparent; color: var(--chu-nhat); }

/* ---------- 11. Bài viết & trang tĩnh ---------- */
.bai-doc { padding: 46px 0 76px; }
.bai-doc__khung { max-width: 800px; margin: 0 auto; padding: 0 20px; }

.duong-dan {
    margin-bottom: 18px;
    color: var(--chu-nhat);
    font-size: .9rem;
}
.duong-dan a { color: var(--chu-nhat); }

.bai-doc h1 { margin-bottom: .3em; }
.bai-doc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 28px;
    color: var(--chu-nhat);
    font-size: .92rem;
}
.bai-doc__bia { margin-bottom: 30px; border-radius: var(--goc); overflow: hidden; }

/* Nội dung do biên tập viên soạn: chuỗi này ĐÃ đi qua SoanThao.Dung nên thẻ trong đây là thẻ do
   máy chủ dựng, không phải thứ người soạn gõ vào. Danh sách kiểu dáng dưới đây vì vậy chỉ cần lo
   đúng những thẻ mà bộ dựng ấy sinh ra. */
.noi-dung { font-size: 1.06rem; color: var(--chu); }
.noi-dung h2 { margin-top: 1.7em; font-size: 1.6rem; }
.noi-dung h3 { margin-top: 1.5em; font-size: 1.25rem; }
.noi-dung h4 { margin-top: 1.4em; font-size: 1.08rem; }
.noi-dung ul, .noi-dung ol { padding-left: 24px; margin: 0 0 1.1em; }
.noi-dung li { margin-bottom: .4em; }
.noi-dung img { border-radius: var(--goc-nho); margin: 1.4em 0; }
.noi-dung blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--xanh);
    color: var(--chu-nhat);
    font-style: italic;
}
.noi-dung pre {
    background: var(--nen-nhat);
    border: 1px solid var(--vien);
    border-radius: var(--goc-nho);
    padding: 16px 18px;
    overflow-x: auto;   /* khối mã dài tự cuộn ngang, KHÔNG kéo giãn cả trang */
    font-size: .92rem;
}
.noi-dung code {
    background: var(--nen-nhat);
    border: 1px solid var(--vien);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .92em;
}
.noi-dung pre code { background: none; border: 0; padding: 0; }
.noi-dung hr { border: 0; border-top: 1px solid var(--vien); margin: 2.2em 0; }
.noi-dung table { width: 100%; border-collapse: collapse; }

.lien-quan { margin-top: 58px; padding-top: 34px; border-top: 1px solid var(--vien); }

/* ---------- 12. Liên hệ ---------- */
.lien-he__luoi {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: start;
}

.thong-tin-lh { list-style: none; margin: 0; padding: 0; }
.thong-tin-lh li {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--vien);
}
.thong-tin-lh li:last-child { border-bottom: 0; }
.thong-tin-lh strong { display: block; color: var(--muc); }
.thong-tin-lh span { color: var(--chu-nhat); font-size: .9rem; }
.thong-tin-lh__dau {
    flex: 0 0 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--xanh-nhat);
    color: var(--xanh-dam);
}
.thong-tin-lh__dau svg { width: 21px; height: 21px; }

.bieu-mau {
    background: var(--nen);
    border: 1px solid var(--vien);
    border-radius: 18px;
    padding: 30px 28px;
    box-shadow: var(--bong);
}
.o { margin-bottom: 18px; }
.o label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--muc); font-size: .94rem; }
.o input, .o textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--vien-dam);
    border-radius: var(--goc-nho);
    font: inherit;
    color: var(--chu);
    background: var(--nen);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.o input:focus, .o textarea:focus {
    outline: none;
    border-color: var(--xanh);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
}
.o textarea { min-height: 128px; resize: vertical; }
.o__loi { display: block; margin-top: 5px; color: #dc2626; font-size: .88rem; }
.o__dem { display: block; margin-top: 5px; color: var(--chu-nhat); font-size: .85rem; }
.o__bat-buoc { color: #dc2626; }

/* BẪY ONG. Ô này phải KHUẤT MẮT NGƯỜI nhưng vẫn TỒN TẠI với trình duyệt tự động.
   Cố ý KHÔNG dùng display:none hay type="hidden": bot đời mới bỏ qua đúng hai thứ đó vì biết
   chúng là bẫy. Đẩy ra ngoài màn hình thì bot thấy một ô text bình thường và điền vào.
   aria-hidden + tabindex=-1 để trình đọc màn hình và phím Tab không bao giờ chạm tới. */
.bay-ong {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.loi-chung {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: var(--goc-nho);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: .94rem;
}
.bao-thanh-cong {
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: var(--goc-nho);
    background: var(--xanh-nhat);
    border: 1px solid #bbf7d0;
    color: var(--xanh-dam);
    font-weight: 600;
}

/* ---------- 13. Khối kêu gọi cuối trang ---------- */
.keu-goi {
    background: linear-gradient(135deg, var(--xanh), var(--ngoc-dam));
    color: #fff;
    padding: 66px 0;
    text-align: center;
}
.keu-goi h2 { color: #fff; }
.keu-goi p { color: rgba(255, 255, 255, .9); font-size: 1.08rem; max-width: 640px; margin: 0 auto 28px; }
.keu-goi__nut { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.keu-goi .nut--vien { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.keu-goi .nut--vien:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ---------- 14. Chân trang ---------- */
.chan-trang { background: #0b1220; color: #cbd5e1; margin-top: 0; }
.chan-trang__luoi {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 36px;
    padding-top: 56px;
    padding-bottom: 44px;
}
/* min-width:0 — mặc định ô lưới không co nhỏ hơn nội dung dài nhất bên trong (một địa chỉ email
   không có dấu cách chẳng hạn), nên thiếu dòng này là một cột dài làm lệch cả bốn cột. */
.chan-trang__cot { min-width: 0; }
/* Đoạn giới thiệu ở cột rộng: giới hạn độ dài dòng cho dễ đọc, đừng kéo hết chiều ngang. */
.chan-trang__cot--rong p { max-width: 44ch; }
.chan-trang h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.chan-trang p { color: #94a3b8; font-size: .94rem; }
.chan-trang ul { list-style: none; margin: 0; padding: 0; }
.chan-trang li { margin-bottom: 9px; font-size: .94rem; }
.chan-trang a { color: #cbd5e1; }
.chan-trang a:hover { color: #fff; }
.chan-trang__lienhe li { display: flex; flex-direction: column; margin-bottom: 14px; }
.chan-trang__lienhe span { color: #64748b; font-size: .82rem; }
.mang-xa-hoi { display: flex; gap: 16px; margin-top: 14px; font-size: .94rem; }
.chan-trang__day {
    border-top: 1px solid #1e293b;
    padding: 18px 0;
    color: #64748b;
    font-size: .88rem;
}

/* ---------- 15. Trang trống / trang lỗi ---------- */
.trong {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--vien-dam);
    border-radius: var(--goc);
    background: var(--nen-nhat);
    color: var(--chu-nhat);
}
.trong strong { display: block; color: var(--muc); margin-bottom: 4px; }

.trang-bao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 58vh;
    padding: 60px 20px;
}
.trang-bao__ma {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--xanh), var(--ngoc));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trang-bao p { color: var(--chu-nhat); max-width: 480px; }
.trang-bao__nut { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* ---------- 16. Màn hình nhỏ ---------- */
@media (max-width: 980px) {
    .hero__luoi { grid-template-columns: 1fr; gap: 38px; }
    .hero__hinh { order: -1; }
    .lien-he__luoi { grid-template-columns: 1fr; }
    .chan-trang__luoi { grid-template-columns: 1fr 1fr; gap: 30px; }
    .goi--noi-bat { transform: none; }
}

@media (max-width: 860px) {
    .nut-ba-gach { display: flex; }

    /* Menu điện thoại: tấm phủ trượt xuống dưới thanh điều hướng.
       Mặc định ẩn bằng display:none để phím Tab không lọt vào các liên kết đang khuất. */
    .dieu-huong {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px 20px 20px;
        background: #fff;
        border-bottom: 1px solid var(--vien);
        box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
        max-height: calc(100vh - var(--cao-dau));
        overflow-y: auto;
    }
    .dieu-huong.dang-mo { display: flex; }
    .dieu-huong > a { padding: 12px 14px; font-size: 1rem; }
    .dieu-huong__nut {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 12px 0 0;
        padding-top: 14px;
        border-top: 1px solid var(--vien);
    }
    .dieu-huong__nut .nut { width: 100%; }

    .dau-trang__trong { position: relative; }
}

@media (max-width: 640px) {
    .khoi { padding: 52px 0; }
    .hero { padding: 48px 0 56px; }
    .khoi__dau { margin-bottom: 32px; }
    .the { padding: 22px 20px; }
    .bieu-mau { padding: 22px 18px; }
    .chan-trang__luoi { grid-template-columns: 1fr; }
    .hero__nut .nut, .keu-goi__nut .nut { width: 100%; }
}

/* Người dùng đã bật "giảm chuyển động" trong hệ điều hành thì tắt hết hiệu ứng. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}