/* ============================================================
   sang-pages.css — sub-page styles
   Trang: /dang-ky-dung-thu (trial-register.blade.php)
   Dùng design token định nghĩa trong sang.css (--flame, --navy, --r-xl, ...).
   Các class dùng chung (.wrap .btn .eyebrow .gt .head .h2 .mq .faq .qa)
   đã có trong sang.css — KHÔNG định nghĩa lại ở đây.
   ============================================================ */

.sg {
    overflow-x: clip;
}

/* ==================== HERO + FORM ==================== */
.rhero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(36px, 6vw, 84px);
    background:
        radial-gradient(120% 120% at 88% -10%, var(--flame-tint) 0%, transparent 46%),
        var(--bg);
}
.rhero__mesh {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}
.rhero__mesh.m1 {
    width: 420px; height: 420px;
    top: -120px; right: -80px;
    background: radial-gradient(circle, var(--flame2), transparent 68%);
}
.rhero__mesh.m2 {
    width: 360px; height: 360px;
    bottom: -140px; left: -100px;
    background: radial-gradient(circle, var(--gold-soft), transparent 70%);
    opacity: .7;
}
.rhero__in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}
.rhero__in > div:first-child { min-width: 0; }
.rhero h1 {
    margin: 14px 0 0;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 900;
    color: var(--ink);
}
.rhero .sub {
    margin: 18px 0 0;
    max-width: 46ch;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.6;
    color: var(--slate);
}

/* checklist */
.getlist {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.getlist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--slate);
}
.getlist b { color: var(--ink); font-weight: 700; }
.getlist .ck {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    margin-top: 1px;
    border-radius: var(--pill);
    background: var(--flame-soft);
    color: var(--flame-700);
}
.getlist .ck svg { width: 15px; height: 15px; }

/* trust row */
.rtrust {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}
.rtrust .av { display: flex; }
.rtrust .av span {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin-left: -10px;
    border-radius: var(--pill);
    border: 2px solid #fff;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    box-shadow: var(--sh-s);
}
.rtrust .av span:first-child { margin-left: 0; }
.rtrust .a1 { background: var(--flame); }
.rtrust .a2 { background: var(--navy); }
.rtrust .a3 { background: var(--coral); }
.rtrust .a4 { background: var(--gold); }
.rtrust .tx { font-size: 14px; color: var(--slate); }
.rtrust .tx b { color: var(--ink); }
.rtrust .star { color: var(--gold); letter-spacing: 1px; }

/* ==================== FORM CARD ==================== */
.formcard {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh);
    padding: clamp(22px, 2.6vw, 36px);
}
.formcard__ribbon {
    position: absolute;
    top: 18px; right: -6px;
    padding: 7px 16px;
    border-radius: var(--pill) 0 0 var(--pill);
    background: var(--grad-flame);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: var(--sh-s);
}
.formcard h2 {
    margin: 0;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 800;
    color: var(--ink);
}
.formcard .fsub {
    margin: 8px 0 22px;
    font-size: 14.5px;
    color: var(--slate);
}

/* fields */
.form .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.field { margin-bottom: 16px; }
.field > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.field .req { color: #E32700; }   /* --coral (#FF5D3B) chỉ đạt 3.05 trên nền trắng; dấu bắt buộc phải đọc rõ */
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line2);
    border-radius: var(--r-md);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; }
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6784' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--slate2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--flame);
    box-shadow: 0 0 0 3px var(--flame-soft);
}
/* error state */
.field .ferr {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--coral);
}
.field.bad input,
.field.bad select,
.field.bad textarea { border-color: var(--coral); }
.field.bad .ferr { display: block; }

/* radio chips */
.chips-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-radio {
    position: relative;
    cursor: pointer;
}
.chip-radio input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}
.chip-radio span {
    display: block;
    padding: 10px 18px;
    border: 1.5px solid var(--line2);
    border-radius: var(--pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--slate);
    background: #fff;
    transition: all .18s;
}
.chip-radio input:checked + span {
    border-color: var(--flame);
    background: var(--flame-tint);
    color: var(--flame-700);
}
.chip-radio input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--flame-soft);
}

/* consent */
.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--slate);
    cursor: pointer;
}
.consent input {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 1px;
    accent-color: var(--flame);
}
.consent a { color: var(--flame-700); font-weight: 600; text-decoration: underline; }
.consent .req { color: #E32700; }
.consent.bad span { color: var(--coral); }

/* submit + note */
.form .btn { width: 100%; justify-content: center; }
.formnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--slate);
}
.formnote svg { width: 16px; height: 16px; color: var(--flame-700); flex: 0 0 auto; }

/* success state — hidden by default, shown via inline style after POST */
.success { display: none; text-align: center; padding: 8px 4px; }
.success .ic {
    display: grid;
    place-items: center;
    width: 66px; height: 66px;
    margin: 6px auto 18px;
    border-radius: var(--pill);
    background: var(--flame-soft);
    color: var(--flame-700);
}
.success .ic svg { width: 34px; height: 34px; }
.success h2 { margin: 0; font-size: 23px; font-weight: 800; color: var(--ink); }
.success p { margin: 10px auto 22px; max-width: 40ch; color: var(--slate); }
.success .sbtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.success .again {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate);
    text-decoration: underline;
}

/* ==================== STEPS ==================== */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin-top: 40px;
}
.step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-s);
    padding: 28px 22px;
}
.step .num {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-bottom: 16px;
    border-radius: var(--pill);
    background: var(--grad-flame);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    box-shadow: var(--sh-s);
}
.step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--slate); }

/* ==================== SUPPORT ==================== */
.support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(28px, 3.4vw, 48px);
    border-radius: var(--r-2xl);
    background: var(--grad-navy);
    color: #fff;
    box-shadow: var(--sh);
}
.support__l { min-width: 0; }
.support__l h2 { margin: 0; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; color: #fff; }
.support__l p { margin: 10px 0 0; max-width: 52ch; color: rgba(255, 255, 255, .8); }
.support__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .rhero__in { grid-template-columns: 1fr; }
    .formcard { order: -1; }
    .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .form .row2 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .support { flex-direction: column; align-items: flex-start; }
    .formcard__ribbon { top: 12px; }
}


/* ============================================================
   .prose — typography wrapper cho nội dung rich-text nhập từ admin
   (trang /price/* và các trang con hiển thị HTML tự do: bảng giá,
   danh sách, đoạn văn, ảnh). .wide = mở rộng hết chiều ngang wrap.
   ============================================================ */
.prose {
    max-width: 820px;
    margin-inline: auto;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.7;
}
.prose.wide { max-width: none; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p { margin: 0 0 16px; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose a { color: var(--flame-700); font-weight: 600; text-decoration: underline; }
.prose a:hover { color: var(--flame); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose i { color: inherit; }

.prose h1, .prose h2, .prose h3, .prose h4 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.25;
    margin: 32px 0 12px;
}
.prose h1 { font-size: clamp(24px, 3vw, 32px); }
.prose h2 { font-size: clamp(21px, 2.4vw, 27px); }
.prose h3 { font-size: clamp(18px, 2vw, 22px); }
.prose h4 { font-size: 17px; }

.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose ul li::marker { color: var(--flame); }

/* --- bảng thường trong nội dung rich-text (CKEditor) ---
   CHỈ áp cho <table> KHÔNG có class. Các bảng/thẻ có class riêng
   (vd .price_list, .pack_basic_pos... trên trang giá) đã được
   style.css cũ lo — không đụng vào để tránh ghi đè. */
.prose table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 24px;
    font-size: 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-s);
}
/* Dòng tiêu đề bảng.
   Trước 13/08/2026 luật cuối là `tr:first-child td` — ý định là tô đậm dòng đầu cho
   bảng viết tay KHÔNG có <thead>. Nhưng nó bắt luôn dòng đầu bên trong <tbody> của
   bảng CÓ <thead>, nên dòng dữ liệu đầu tiên bị nền navy. Cộng thêm quy tắc
   `.prose b { color: var(--ink) }` ghi đè lên `color:#fff` của ô, chữ in đậm trong
   dòng đó thành xanh đậm trên nền xanh đậm — không đọc được.
   Sửa: dùng :not(:has(thead)) để chỉ áp dụng cho bảng thật sự không có <thead>, và cho
   chữ in đậm trong ô tiêu đề kế thừa màu của ô.
   Không dùng `tbody:first-child` được: trình soạn thảo hay chèn <colgroup> trước
   <tbody> nên tbody không còn là con đầu tiên.
   Trình duyệt quá cũ không hiểu :has() thì bỏ qua luật này — dòng đầu hiện như dòng
   thường, vẫn đọc được, chứ không rơi vào cảnh chữ đậm trên nền đậm như trước. */
.prose table:not([class]) thead td,
.prose table:not([class]) thead th,
.prose table:not([class]):not(:has(thead)) > tbody > tr:first-child td {
    background: var(--navy);
    color: #fff;
    font-weight: 700;
}
.prose table:not([class]) thead td b,
.prose table:not([class]) thead td strong,
.prose table:not([class]) thead th b,
.prose table:not([class]) thead th strong,
.prose table:not([class]):not(:has(thead)) > tbody > tr:first-child td b,
.prose table:not([class]):not(:has(thead)) > tbody > tr:first-child td strong {
    color: inherit;
}
.prose table:not([class]) th,
.prose table:not([class]) td {
    padding: 12px 16px;
    border: 1px solid var(--line2);
    text-align: left;
    vertical-align: middle;
    color: var(--ink);
}
.prose table:not([class]) tbody tr:nth-child(even) td { background: var(--flame-tint); }
.prose table:not([class]) tbody tr:hover td { background: var(--flame-soft); }
.prose table:not([class]) td strong { color: var(--flame-700); }

/* bảng cuộn ngang trên màn nhỏ thay vì tràn trang */
@media (max-width: 640px) {
    .prose table:not([class]) { display: block; overflow-x: auto; white-space: nowrap; }
}


/* ============================================================
   .layout-2col — bố cục nội dung + sidebar (dùng ở guide, news,
   news-detail). Mặc định: nội dung trái, sidebar phải.
   .left = sidebar trái, nội dung phải (trang guide).
   .side-card — thẻ sidebar trắng (guide, news, news-detail, contact).
   ============================================================ */
.layout-2col {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
.layout-2col.left {
    grid-template-columns: 300px 1fr;
}

.side-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-s);
    padding: 20px;
}

@media (max-width: 900px) {
    .layout-2col,
    .layout-2col.left {
        grid-template-columns: 1fr;
    }
}

/* About page — .ab-* components */

/* ==================== BREADCRUMB ==================== */
.crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 22px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--slate);
}
.crumb a { color: var(--slate); transition: color .15s; }
.crumb a:hover { color: var(--flame-700); }
.crumb .sep { color: var(--slate2); }
.crumb b { color: var(--ink); font-weight: 700; }

/* ==================== HERO ==================== */
.ab-chero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(48px, 7vw, 104px);
    background:
        radial-gradient(90% 130% at 100% -10%, var(--flame-tint) 0%, transparent 48%),
        radial-gradient(80% 110% at 0% 20%, #EAF0FF 0%, transparent 46%),
        var(--bg);
}
.ab-chero__mesh {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.ab-chero__mesh.m1 {
    width: 460px; height: 460px;
    top: -140px; right: -90px;
    background: radial-gradient(circle, rgba(243, 112, 6, .22), transparent 66%);
}
.ab-chero__mesh.m2 {
    width: 400px; height: 400px;
    bottom: -160px; left: -110px;
    background: radial-gradient(circle, rgba(19, 46, 120, .16), transparent 66%);
}
.ab-chero__in {
    position: relative;
    z-index: 1;
    width: min(100% - 44px, 820px);
    margin-inline: auto;
    text-align: center;
}
.ab-chero__in .eyebrow { margin-bottom: 22px; }
.ab-chero__in h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--navy);
}
.ab-chero__in p {
    margin: 22px auto 0;
    max-width: 60ch;
    font-size: clamp(1.06rem, 1.5vw, 1.28rem);
    line-height: 1.6;
    color: var(--slate);
}
.ab-chero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

/* ==================== STORY ==================== */
.ab-story {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 4vw, 60px);
    align-items: center;
}
.ab-story p {
    margin-top: 16px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--slate);
}
.ab-story p strong,
.ab-story p b { color: var(--ink); font-weight: 700; }

/* stat card */
.ab-statcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh);
    padding: clamp(22px, 2.6vw, 36px);
}
.ab-statcard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.6vw, 32px);
}
.ab-statcard__grid > div { position: relative; }
.ab-statcard__grid b {
    display: flex;
    align-items: baseline;
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--navy);
}
.ab-statcard__grid b i { color: var(--flame); font-style: normal; }
.ab-statcard__grid > div > span {
    display: block;
    margin-top: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--slate);
}

/* ==================== MISSION / VISION ==================== */
.ab-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.4vw, 26px);
    margin-top: 52px;
}
.ab-mvcard {
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh);
    padding: clamp(28px, 3vw, 42px);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ab-mvcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lift);
    border-color: transparent;
}
.ab-mvcard .mi {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: var(--flame-soft);
}
.ab-mvcard .mi svg { width: 32px; height: 32px; color: var(--flame); }
.ab-mvcard:nth-child(2) .mi { background: #E7EEFA; }
.ab-mvcard:nth-child(2) .mi svg { color: var(--navy); }
.ab-mvcard h3 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 900;
    color: var(--navy);
    margin-bottom: 12px;
}
.ab-mvcard p { font-size: 1rem; line-height: 1.65; color: var(--slate); }

/* ==================== PILLARS (on navy) ==================== */
.ab-pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 52px;
}
.ab-pcard {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    padding: 28px 24px;
    transition: transform .2s, background .2s, border-color .2s;
}
.ab-pcard:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
}
.ab-pcard .pi {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--grad-flame);
    box-shadow: 0 12px 24px -12px rgba(243, 112, 6, .8);
}
.ab-pcard .pi svg { width: 26px; height: 26px; color: #fff; }
.ab-pcard .pk {
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}
.ab-pcard h3 { font-size: 1.08rem; font-weight: 800; color: #fff; margin: 6px 0 8px; }
.ab-pcard p { font-size: .9rem; line-height: 1.55; color: #AFC0E2; }

/* ==================== CORE VALUES ==================== */
.ab-vals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 52px;
}
.ab-vcard {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh);
    padding: 34px 30px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ab-vcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lift);
    border-color: transparent;
}
.ab-vcard .vi {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--flame-tint);
}
.ab-vcard .vi svg { width: 28px; height: 28px; color: var(--flame); }
.ab-vcard:nth-child(2) .vi { background: #E6F6EE; }
.ab-vcard:nth-child(2) .vi svg { color: #1E9E63; }
.ab-vcard:nth-child(3) .vi { background: var(--gold-soft); }
.ab-vcard:nth-child(3) .vi svg { color: #B8860B; }
.ab-vcard h3 { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.ab-vcard p { font-size: .95rem; line-height: 1.6; color: var(--slate); }

/* value badge strip */
.ab-bstrip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.ab-bchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--pill);
    font-size: .88rem;
    font-weight: 600;
    color: #3B466A;
    background: var(--surface);
    border: 1px solid var(--line2);
    box-shadow: var(--sh-s);
}
.ab-bchip svg { flex: 0 0 auto; width: 16px; height: 16px; color: #1E9E63; }

/* ==================== PRODUCTS (mini cards) ==================== */
.ab-pmini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 52px;
}
.ab-pmcard {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-s);
    padding: 24px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ab-pmcard:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh);
    border-color: var(--flame);
}
.ab-pmcard .pmi {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--flame-soft);
}
.ab-pmcard .pmi svg { width: 26px; height: 26px; color: var(--flame); }
.ab-pmcard:nth-child(6n+2) .pmi { background: #E7EEFA; }
.ab-pmcard:nth-child(6n+2) .pmi svg { color: var(--navy); }
.ab-pmcard:nth-child(6n+3) .pmi { background: var(--gold-soft); }
.ab-pmcard:nth-child(6n+3) .pmi svg { color: #B8860B; }
.ab-pmcard:nth-child(6n+4) .pmi { background: #E6F6EE; }
.ab-pmcard:nth-child(6n+4) .pmi svg { color: #1E9E63; }
.ab-pmcard:nth-child(6n+5) .pmi { background: #F1E9FB; }
.ab-pmcard:nth-child(6n+5) .pmi svg { color: #7E4FD0; }
.ab-pmcard:nth-child(6n) .pmi { background: #FFE7E2; }
.ab-pmcard:nth-child(6n) .pmi svg { color: #D9503B; }
.ab-pmcard b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--navy); }
.ab-pmcard p { margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--slate); }

/* ==================== CLIENT LOGOS ==================== */
.ab-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 50px;
}
.ab-logo-card {
    display: grid;
    place-items: center;
    height: 96px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-s);
    transition: transform .2s, box-shadow .2s;
}
.ab-logo-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.ab-logo-card img {
    max-height: 48px;
    max-width: 86%;
    width: auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
}
.ab-logo-card--fill { overflow: hidden; }
.ab-logo-card--fill img { max-height: 52px; max-width: 72%; height: auto; width: auto; object-fit: contain; }
.ab-logo-card .fallback {
    font-weight: 800;
    font-size: .82rem;
    line-height: 1.25;
    color: var(--navy);
    text-align: center;
}
.ab-clients-note {
    margin-top: 26px;
    text-align: center;
    font-size: .95rem;
    color: var(--slate);
}
.ab-clients-note b,
.ab-clients-note strong { color: var(--flame-700); font-weight: 700; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .ab-story { grid-template-columns: 1fr; gap: 36px; }
    .ab-mv { grid-template-columns: 1fr; }
    .ab-pillars { grid-template-columns: repeat(3, 1fr); }
    .ab-vals { grid-template-columns: 1fr; }
    .ab-pmini { grid-template-columns: 1fr 1fr; }
    .ab-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .ab-statcard__grid { grid-template-columns: 1fr; }
    .ab-pillars { grid-template-columns: 1fr 1fr; }
    .ab-pmini { grid-template-columns: 1fr; }
    .ab-logos { grid-template-columns: 1fr 1fr; }
    .ab-chero__cta .btn { flex: 1 1 auto; }
}


/* ============================================================
   .plist / .pcard — lưới thẻ bài viết tin tức (dùng ở news,
   news-detail, device). .empty-note — trạng thái rỗng.
   ============================================================ */
.plist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.4vw, 26px);
}
.pcard {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-s);
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.pcard__thumb {
    aspect-ratio: 16 / 10;
    background: var(--line2);
    overflow: hidden;
}
.pcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.pcard:hover .pcard__thumb img { transform: scale(1.04); }
.pcard__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
}
.pcard__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--slate2);
}
.pcard__date svg { width: 15px; height: 15px; }
.pcard__body h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pcard__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--slate);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pcard .rd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--flame-700);
}
.pcard .rd svg { width: 16px; height: 16px; transition: transform .2s; }
.pcard:hover .rd svg { transform: translateX(3px); }

.empty-note {
    text-align: center;
    color: var(--slate);
    font-size: 15px;
    padding: 40px 0;
}

@media (max-width: 900px) { .plist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plist { grid-template-columns: 1fr; } }
/* Đại lý / Agency page */

/* ==================== HERO layout ==================== */
.hero__copy { min-width: 0; }
.hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 22px 10px 30px;
}

/* ==================== EARNINGS WIDGET ==================== */
.earn {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-lift);
    padding: clamp(20px, 2.4vw, 28px);
}
.earn__hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}
.earn__hd .t {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
}
.earn__hd b {
    display: block;
    margin-top: 4px;
    font-size: 1.34rem;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--navy);
    line-height: 1.15;
}
.earn__hd b i { color: var(--flame); font-style: normal; }
.earn__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--pill);
    background: #E6F6EE;
    color: #1E9E63;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}
.earn__badge svg { width: 14px; height: 14px; }

/* bar chart */
.earn__chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 2vw, 18px);
    height: 168px;
    padding: 0 4px 4px;
    border-bottom: 1.5px solid var(--line);
}
.earn__chart .ebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 9px;
}
.earn__chart .bar {
    width: 100%;
    max-width: 46px;
    border-radius: 9px 9px 4px 4px;
    box-shadow: 0 8px 16px -10px rgba(243, 112, 6, .55);
}
.earn__chart .ebar:nth-child(1) .bar { height: 40%; background: var(--flame-soft); }
.earn__chart .ebar:nth-child(2) .bar { height: 58%; background: var(--peach); }
.earn__chart .ebar:nth-child(3) .bar { height: 76%; background: var(--flame2); }
.earn__chart .ebar:nth-child(4) .bar { height: 100%; background: var(--grad-flame); }
.earn__chart .lb {
    font-size: .72rem;
    font-weight: 700;
    color: var(--slate);
}
.earn__chart .ebar:nth-child(4) .lb { color: var(--flame-700); }

.earn__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--slate);
}
.earn__foot .g {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1E9E63;
    font-weight: 800;
}
.earn__foot .g svg { width: 15px; height: 15px; }
.earn__note {
    margin-top: 10px;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--slate2);
}

/* floating stat card on the widget */
.earn__float {
    position: absolute;
    left: -18px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--sh-lift);
}
.earn__float .ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--flame-soft);
    color: var(--flame);
}
.earn__float .ic svg { width: 21px; height: 21px; }
.earn__float .lbl { font-size: .68rem; font-weight: 600; color: var(--slate); }
.earn__float .val {
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--navy);
}

/* ==================== AUDIENCE ==================== */
.aud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 22px);
    margin-top: 50px;
}
.acard {
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh);
    padding: 30px 26px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.acard:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lift);
    border-color: transparent;
}
.acard .ai {
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--flame-tint);
}
.acard .ai svg { width: 28px; height: 28px; color: var(--flame); }
.acard:nth-child(2) .ai { background: #E7EEFA; }
.acard:nth-child(2) .ai svg { color: var(--navy); }
.acard:nth-child(3) .ai { background: var(--gold-soft); }
.acard:nth-child(3) .ai svg { color: #B8860B; }
.acard:nth-child(4) .ai { background: #E6F6EE; }
.acard:nth-child(4) .ai svg { color: #1E9E63; }
.acard b { display: block; font-size: 1.08rem; font-weight: 800; color: var(--navy); }
.acard p { margin-top: 8px; font-size: .9rem; line-height: 1.55; color: var(--slate); }

/* ==================== COMMISSION TIERS ==================== */
.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.4vw, 26px);
    margin-top: 52px;
    align-items: start;
}
.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh);
    padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tier:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lift);
}
.tier--b {
    border: 2px solid var(--flame);
    box-shadow: var(--sh-lift);
}
.tier--b:hover { transform: translateY(-9px); }
.tier__tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: var(--pill);
    background: var(--grad-flame);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 0 12px 24px -12px rgba(243, 112, 6, .8);
}
.tier .lvl {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--flame-700);
}
.tier--b .lvl { color: var(--flame); }
.tier h3 {
    margin: 6px 0 10px;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -.02em;
}
.tier .d {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--slate);
    min-height: 44px;
}
.tier ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 26px;
    flex: 1;
}
.tier li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .92rem;
    line-height: 1.45;
    color: #2B3350;
}
.tier li svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--flame); }
.tier .btn { width: 100%; }

/* ==================== REGISTRATION ==================== */
.reg {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
}
.reg__l { min-width: 0; }
.reg__l .lead { color: #AFC0E2; }
.reg__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 30px 0 0;
}
.reg__list li { display: flex; align-items: flex-start; gap: 14px; }
.reg__list .c {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: var(--grad-flame);
    color: #fff;
    box-shadow: 0 10px 20px -12px rgba(243, 112, 6, .8);
}
.reg__list .c svg { width: 18px; height: 18px; }
.reg__list b { display: block; font-size: 1rem; font-weight: 800; color: #fff; }
.reg__list span { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.5; color: #AFC0E2; }
.reg__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.reg__contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    transition: background .18s, border-color .18s;
}
.reg__contact a:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.reg__contact a svg { width: 18px; height: 18px; color: var(--gold); }

/* form card internals (formcard/.field/.consent/.success are in sang-pages.css) */
.formcard h3 {
    margin: 0;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 800;
    color: var(--ink);
}
.fgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.fgrid .field.full { grid-column: 1 / -1; }
.formcard .btn { width: 100%; justify-content: center; }
.fnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .78rem;
    color: var(--slate);
    text-align: center;
}

/* success panel (reveal on POST) */
.success.show { display: block; }
.success .ok {
    display: grid;
    place-items: center;
    width: 66px; height: 66px;
    margin: 6px auto 18px;
    border-radius: var(--pill);
    background: var(--flame-soft);
    color: var(--flame-700);
}
.success .ok svg { width: 34px; height: 34px; }
.success h3 { margin: 0; font-size: 23px; font-weight: 800; color: var(--ink); }
.success .hot {
    margin-top: 12px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--flame-700);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .aud { grid-template-columns: repeat(2, 1fr); }
    .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .tier--b { order: -1; }
    .reg { grid-template-columns: 1fr; }
    .reg__l { order: -1; }
    .earn__float { left: 0; }
}
@media (max-width: 560px) {
    .aud { grid-template-columns: 1fr; }
    .fgrid { grid-template-columns: 1fr; }
    .earn__chart { height: 140px; }
    .earn__float { position: static; margin-top: 18px; }
    .reg__contact a { flex: 1 1 auto; justify-content: center; }
}


/* ============================================================
   .page-hero — hero + breadcrumb dùng chung (partial
   site.layouts.page-hero): price, guide, news, contact, device,
   product, solution, page, download-app...
   QUAN TRỌNG: .ph-icon svg phải bị giới hạn kích thước, nếu không
   icon SVG sẽ phình full màn hình.
   ============================================================ */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 7vw, 92px) 0 clamp(30px, 4vw, 52px);
    text-align: center;
    background:
        radial-gradient(120% 130% at 50% -20%, var(--flame-tint) 0%, transparent 55%),
        var(--bg);
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .07;
    z-index: 0;
    pointer-events: none;
}
.page-hero__in {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* icon badge — kích thước cố định, chống SVG tràn màn hình */
.ph-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--flame-soft);
    color: var(--flame-700);
    box-shadow: var(--sh-s);
}
.ph-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}
.ph-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.page-hero h1 {
    margin: 0;
    font-size: clamp(27px, 4vw, 44px);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--ink);
}
.ph-sub {
    margin: 16px auto 0;
    max-width: 62ch;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--slate);
}

/* breadcrumb */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
}
.crumbs a { color: var(--slate); text-decoration: none; transition: color .15s; }
.crumbs a:hover { color: var(--flame-700); }
.crumbs .sep { color: var(--slate2); }
.crumbs .cur { color: var(--flame-700); font-weight: 600; }

/* Lưới bài viết (.plist) có thể rất cao khi nhiều bài → IntersectionObserver
   threshold 0.14 trong sang.js không bao giờ đạt, .reveal không được kích hoạt
   nên cả lưới ẩn (opacity:0). Buộc hiện luôn — animation cho lưới lớn vô nghĩa. */
.plist.reveal { opacity: 1; transform: none; }

/* Nội dung rich-text (.prose) cũng có thể rất cao (bảng giá, hướng dẫn dài)
   → cùng vấn đề reveal như .plist. Hiện luôn. */
.prose.reveal { opacity: 1; transform: none; }

/* ============================================================
   .pager — phân trang (trang tin tức).
   ============================================================ */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(28px, 4vw, 44px);
}
.pager__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pill);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-s);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: all .15s;
}
.pager__btn:hover {
    border-color: var(--flame);
    color: var(--flame-700);
    transform: translateY(-2px);
}
.pager__btn.is-disabled {
    opacity: .4;
    pointer-events: none;
    box-shadow: none;
}
.pager__info {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    min-width: 64px;
    text-align: center;
}


/* ===== ordersysvn-only: agency proposal downloads (dai-ly) — preserved ===== */
/* ---------- agency proposal downloads (dai-ly) ---------- */
.sg .dl-props{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.sg .dl-prop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);padding:28px 22px;
  box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s}
.sg .dl-prop:hover{transform:translateY(-6px);box-shadow:var(--sh-lift);border-color:transparent}
.sg .dl-prop__ic{width:58px;height:58px;border-radius:16px;background:var(--flame-soft);display:grid;place-items:center}
.sg .dl-prop__ic svg{width:28px;height:28px;color:var(--flame)}
.sg .dl-prop:nth-child(4n+2) .dl-prop__ic{background:#E7EEFA}.sg .dl-prop:nth-child(4n+2) .dl-prop__ic svg{color:var(--navy)}
.sg .dl-prop:nth-child(4n+3) .dl-prop__ic{background:var(--gold-soft)}.sg .dl-prop:nth-child(4n+3) .dl-prop__ic svg{color:#B8860B}
.sg .dl-prop:nth-child(4n) .dl-prop__ic{background:#E6F6EE}.sg .dl-prop:nth-child(4n) .dl-prop__ic svg{color:#1E9E63}
.sg .dl-prop__name{font-weight:800;color:var(--navy);font-size:1.02rem;line-height:1.3;margin-top:auto}
.sg .dl-prop__btn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.86rem;
  color:var(--flame-700);background:var(--flame-tint);padding:8px 16px;border-radius:var(--pill);transition:background .15s}
.sg .dl-prop:hover .dl-prop__btn{background:var(--grad-flame);color:#fff}
.sg .dl-prop__btn svg{width:16px;height:16px}
@media(max-width:900px){.sg .dl-props{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sg .dl-props{grid-template-columns:1fr}}

/* ---------- top-bar language switcher (flag dropdown) — restored after reorg ---------- */
.sg .langflag{position:relative;display:inline-flex;align-items:center}
.sg .langflag__cur{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:2px;line-height:0}
.sg .langflag__cur img{width:26px;height:18px;min-width:26px;max-width:none;object-fit:cover;border-radius:3px;border:1px solid rgba(255,255,255,.35);display:block}
.sg .lf-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #C7D4EC;transition:transform .18s}
.sg .langflag.open .lf-caret{transform:rotate(180deg)}
.sg .langflag__menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -18px rgba(20,30,50,.45),0 6px 16px -10px rgba(20,30,50,.3);padding:5px;z-index:80;display:flex;flex-direction:row;gap:4px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.sg .langflag:hover .langflag__menu,.sg .langflag:focus-within .langflag__menu,.sg .langflag.open .langflag__menu{opacity:1;visibility:visible;transform:translateY(0)}
.sg .langflag__menu a{flex:0 0 auto;display:block;padding:4px;border-radius:6px;line-height:0;transition:background .14s}
.sg .langflag__menu a:hover{background:var(--flame-tint)}
.sg .langflag__menu a.on{outline:2px solid var(--flame);outline-offset:-1px}
.sg .langflag__menu a img{width:26px;height:18px;min-width:26px;max-width:none;object-fit:cover;border-radius:2px;border:1px solid var(--line);display:block}
/* ============ Footer: light redesign (design/about.html) + new PNG logo ============ */
.sg .logo-img{height:64px;width:auto;display:block}
.sg .ft .logo-img{height:44px}
.sg .ft{background:#EFE6D5;color:#5A6784;padding-block:36px 20px;border-top:1px solid #E1D5C1}
.sg .ft__top{gap:26px;padding-bottom:24px;border-bottom:1px solid #E1D5C1}
.sg .ft__brand .flogo{color:#01205E;margin-bottom:8px}
.sg .ft__brand .co{color:#01205E}
.sg .ft__brand p{color:#5A6784}
.sg .ft__brand p svg{color:var(--flame)}
.sg .ft h4{color:#01205E}
.sg .ft ul a{color:#5A6784}
.sg .ft ul a:hover{color:#B34D00}
.sg .ft__bottom{padding-top:16px;color:#5A6886}
.sg .ft__soc a{background:#F8F1E4}
.sg .ft__soc svg{color:#fff}
/* real brand colours */
.sg .ft__soc a.ft-soc--facebook,.sg .ft__soc a.ft-soc--facebook:hover{background:#1877F2}
.sg .ft__soc a.ft-soc--youtube,.sg .ft__soc a.ft-soc--youtube:hover{background:#FF0000}
.sg .ft__soc a.ft-soc--zalo,.sg .ft__soc a.ft-soc--zalo:hover{background:#0068FF}
.sg .ft__soc a.ft-soc--tiktok,.sg .ft__soc a.ft-soc--tiktok:hover{background:#111}
.sg .ft__soc a:hover{transform:translateY(-2px);box-shadow:0 7px 16px -6px rgba(80,50,15,.4)}
/* footer columns: align links flush-left with their h4 header (reset Bootstrap ul indent) */
.sg .ft ul{padding:0;margin:0}
.sg .ft ul li{list-style:none}

/* About product mini-cards: 3D image icons (match homepage industry tiles). */
.sg .ab-pmcard .pmi--img{overflow:hidden;padding:0}
.sg .ab-pmcard:nth-child(6n+1) .pmi--img,
.sg .ab-pmcard:nth-child(6n+2) .pmi--img,
.sg .ab-pmcard:nth-child(6n+3) .pmi--img,
.sg .ab-pmcard:nth-child(6n+4) .pmi--img,
.sg .ab-pmcard:nth-child(6n+5) .pmi--img,
.sg .ab-pmcard:nth-child(6n) .pmi--img{background:none}
.sg .ab-pmcard .pmi--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ── Cột phải trang bài viết ──────────────────────────────────────────────
   Thay khung Facebook Page cũ (hiện ô trắng rỗng 300x66 trên mọi bài). */
.side-cta__h { display:block; font-size:1rem; font-weight:800; color:var(--ink); margin-bottom:8px; }
.side-cta__p { font-size:.86rem; color:var(--slate); line-height:1.55; margin:0 0 14px; }
.side-cta__tel { display:block; text-align:center; margin-top:10px; font-size:.85rem;
    color:var(--slate); text-decoration:none; }
.side-cta__tel:hover { color:var(--flame-700); text-decoration:underline; }
.side-nav { margin-top:16px; }
.side-nav__ul { list-style:none; margin:0 0 12px; padding:0; }
.side-nav__ul li + li { border-top:1px solid var(--line2); }
.side-nav__ul a { display:block; padding:9px 2px; font-size:.9rem; color:var(--ink);
    text-decoration:none; }
.side-nav__ul a:hover { color:var(--flame-700); }
.side-nav__more { display:inline-block; font-size:.86rem; font-weight:700;
    color:var(--flame-700); text-decoration:none; }
.side-nav__more:hover { text-decoration:underline; }

/* --- máy tính vốn quán bida: gợi ý khi lỗ ---------------------------------
   Quán ít bàn mà tiền thuê + lương giữ nguyên thì ra số âm. Đó là kết quả
   ĐÚNG, nhưng người dùng dễ tưởng công cụ hỏng, nên nói rõ vì sao. */
.mtv-goiy {
    margin-top: 12px;
    padding: 12px 15px;
    border-radius: 11px;
    background: #FDECEA;
    border: 1px solid #F3B4AC;
    color: #8A2A1C;
    font-size: .88rem;
    line-height: 1.55;
}

/* --- phân trang trang tin -------------------------------------------------
   Trước đây khối này dùng nguyên kiểu mặc định của Bootstrap: nút xanh #0d6efd
   và DÁN SÁT MÉP TRÁI trong khi thẻ tin căn giữa — người đọc nhìn giữa trang
   nên tưởng không có phân trang, tức 19 trang tin còn lại coi như không với tới
   được. Căn giữa lại và đưa về bộ màu của site.

   Nút đang chọn dùng nền NAVY chứ không nền cam: chữ trắng trên cam #F37006 chỉ
   đạt 2,94:1, dưới chuẩn; trên navy đạt 15,33:1. */
.news-more {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}
.news-more .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.news-more .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--line2);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: none;
    transition: border-color .15s, color .15s, background .15s;
}
.news-more .page-item .page-link:hover {
    border-color: var(--flame);
    color: var(--flame-700);
    background: var(--flame-tint);
}
.news-more .page-item.active .page-link {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.news-more .page-item.disabled .page-link {
    background: #F7F8FB;
    border-color: var(--line2);
    color: #98A2B3;
    pointer-events: none;
}
@media (max-width: 560px) {
    .news-more .page-item .page-link { min-width: 38px; height: 38px; padding: 0 9px; font-size: .88rem; }
}

/* --- trang gom công cụ (/cong-cu) ----------------------------------------- */
.cc-nhom { margin-top: 52px; }
.cc-nhom .h2 { margin: 0; }
.cc-nhom .lead { margin: 10px 0 0; color: var(--slate); }
.cc-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 22px;
}
.cc-the {
    display: block;
    padding: 22px 24px 20px;
    border: 1px solid var(--line2);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(16, 32, 64, .05);
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.cc-the:hover {
    border-color: var(--flame);
    box-shadow: 0 10px 28px rgba(243, 112, 6, .14);
    transform: translateY(-2px);
}
.cc-the h3 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
}
.cc-the p {
    margin: 9px 0 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--slate);
}
.cc-mo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    font-weight: 700;
    font-size: .92rem;
    color: var(--flame-700);
}
.cc-mo svg { width: 17px; height: 17px; }
.cc-the:hover .cc-mo svg { transform: translateX(3px); transition: transform .16s; }

.cc-cuoi {
    margin-top: 60px;
    padding: 30px 32px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--flame-tint);
}
.cc-cuoi p { color: var(--slate); line-height: 1.7; margin: 12px 0 0; }
@media (max-width: 560px) {
    .cc-the { padding: 18px 18px 16px; }
    .cc-cuoi { padding: 22px 20px; }
}

/* --- menu chính: thu gọn để đủ chỗ cho mục thứ 9 -------------------------
   Menu có 8 mục, đo thực tế còn trống 182px ở 1280px nhưng chỉ 43px ở 1024–1100px.
   Chèn thử mục thứ 9 thì menu tụt xuống hai hàng (cao 42px -> 85px) ở mọi độ
   rộng từ 1180px trở xuống — laptop 13–14 inch nằm đúng khoảng đó.

   Giảm phần đệm ngang và cỡ chữ một bậc, chỉ áp dưới 1280px để màn hình rộng
   vẫn thoáng như cũ. Tiết kiệm khoảng 9px mỗi mục, 9 mục là hơn 80px — đủ. */
@media (max-width: 1279px) {
    .nav > a,
    .nav > .has-drop > button {
        padding-inline: .58em;
        font-size: .92rem;
    }
}
/* Đo được: 9 mục vừa tới 1120px, vỡ hàng ở 1100px. Site chỉ chuyển sang nút
   hamburger ở 920px, nên khoảng 921–1110px phải siết mạnh hơn nữa. Ở dải này
   cũng bỏ khoảng cách giữa các mục cho gọn. */
@media (max-width: 1119px) {
    .nav { gap: 0; }
    .nav > a,
    .nav > .has-drop > button {
        padding-inline: .34em;
        font-size: .855rem;
    }
}

/* Nâng ngưỡng hamburger từ 920px lên 1000px.
   Đo được: menu 9 mục vừa tới 1024px sau khi siết, nhưng vỡ hàng ở 980px. Dải
   921–1000px là chỗ không cách nào nhét vừa mà vẫn đọc được — siết thêm nữa thì
   chữ bé tới mức khó bấm. Ở độ rộng đó hiện nút hamburger là chuyện bình thường,
   và menu điện thoại đã có đủ mục kể cả Công cụ miễn phí. */
@media (max-width: 1000px) {
    .nav { display: none; }
    .burger { display: flex; }
}