/* =====================================================================
   Trung Tam Nuoc BRVT - main.css
   Custom WordPress theme styles (no page builder, no framework)
   ===================================================================== */

:root {
    --color-primary: #0a66c2;
    --color-primary-dark: #074a8e;
    --color-primary-light: #e8f1fb;
    --color-accent: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;
    --color-info: #0ea5e9;
    --color-text: #1f2937;
    --color-muted: #5b6573;
    --color-border: #e2e8f0;
    --color-bg: #ffffff;
    --color-bg-alt: #f5f8fc;
    --color-bg-dark: #082548;

    --radius: 12px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.06);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08);
    --shadow-lg: 0 20px 40px rgba(15,23,42,.12);

    --font-base: "Be Vietnam Pro", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Lora", "Be Vietnam Pro", Georgia, serif;
    --container: 1100px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    margin: 0 0 .5em;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.hero__title, .section-head__title, .page-hero__title, .cta-band__title {
    font-family: var(--font-heading);
}

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

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px; left: 0;
    background: #000; color: #fff;
    padding: 10px 14px; z-index: 1000;
}
.skip-link:focus { top: 0; }

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .1s, background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.btn--white { background: #fff; color: var(--color-primary-dark); }
.btn--white:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.btn--outline-white { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--color-primary-dark); }
.btn--gold {
    background: #33FF66;
    color: #0a3d1a;
    border-color: #33FF66;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(51,255,102,.4);
}
.btn--gold:hover {
    background: #00CC44;
    color: #052b10;
    border-color: #00CC44;
    box-shadow: 0 6px 20px rgba(51,255,102,.55);
}
.btn--small { padding: 8px 14px; font-size: .9rem; }

/* ========== Header layout 2 hàng (logo bar + menu) ========== */

/* Hàng 1: logo bar - nền màu, logo trong suốt nằm chồng lên như background */
.site-logo-bar {
    background:
        linear-gradient(180deg, var(--color-primary-light) 0%, #ffffff 70%);
    border-top: 4px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 0 -1px 0 rgba(10,102,194,.06), 0 1px 0 rgba(15,23,42,.04);
    position: relative;
}
.site-logo-bar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-info) 50%, var(--color-primary) 100%);
    opacity: .9;
}
.site-logo-bar__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
}
.site-branding {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.site-branding__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--color-primary-dark);
    letter-spacing: -.01em;
    text-decoration: none;
    border-left: 3px solid var(--color-primary);
    padding-left: 12px;
    white-space: nowrap;
}
.site-branding__name:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.site-branding__link,
.site-branding .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.site-branding__logo,
.site-branding .custom-logo {
    height: 112px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
    display: block;
    margin: -4px 0;
}

/* 3 khối thông tin Mail / Hotline / Địa chỉ */
.info-blocks {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}
.info-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.info-block__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
}
.info-block__icon::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: var(--color-primary);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.info-block__icon--mail::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>");
}
.info-block__icon--phone::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1A17 17 0 0 1 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1A17 17 0 0 1 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
}
.info-block__icon--pin::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}
.info-block__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    max-width: 260px;
}
.info-block__label {
    font-size: .72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.info-block__text a,
.info-block__text > span:not(.info-block__label) {
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: .88rem;
    overflow-wrap: anywhere;
}
.info-block__addr {
    font-weight: 500 !important;
    font-size: .78rem !important;
    color: var(--color-text) !important;
    line-height: 1.3;
    display: block;
}
.info-block__addr strong {
    color: var(--color-primary-dark);
    font-weight: 700;
    margin-right: 3px;
}

/* Hàng 2: menu chính (nền xanh đậm), menu canh phải + ô tìm kiếm */
.site-header {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__inner {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 20px;
    gap: 0;
}
.site-branding__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text);
}
.site-branding__link:hover { text-decoration: none; }
.site-branding__mark {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 1.25rem;
}
.site-branding__text strong {
    display: block;
    font-size: 1.05rem;
    color: var(--color-primary-dark);
}
.site-branding__text em {
    display: block;
    font-style: normal;
    font-size: .82rem;
    color: var(--color-muted);
}

.primary-nav { display: flex; align-items: stretch; }
.primary-nav__list {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0; padding: 0;
    align-items: stretch;
}
.primary-nav__list li a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: #fff;
    letter-spacing: .01em;
    font-size: .95rem;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,.08);
    transition: background .15s, color .15s;
}
.primary-nav__list > li:first-child > a { border-left: 1px solid rgba(255,255,255,.08); }
.primary-nav__list li.current-menu-item > a {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}
@media (hover: hover) {
    .primary-nav__list li a:hover {
        background: var(--color-primary);
        color: #fff;
        text-decoration: none;
    }
}
/* Menu cha TOP-LEVEL khi đang ở trang con - reset về item thường (chỉ top-level, không áp sub-menu) */
.primary-nav__list > li.current-menu-parent > a,
.primary-nav__list > li.current-menu-ancestor > a {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.primary-nav__list > li.current-menu-parent > a:hover,
.primary-nav__list > li.current-menu-ancestor > a:hover {
    background: var(--color-primary) !important;
}
/* Bỏ outline focus cho link href="#" sau khi click (gây cảm giác "đang hover") */
.primary-nav__list a:focus { outline: none; }
.primary-nav__list a:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -3px; }

/* Top-level menu items có link # (custom parent) - LUÔN không highlight trừ khi hover thật */
.primary-nav__list > .menu-item-type-custom > a[href="#"] {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
@media (hover: hover) {
    .primary-nav__list > .menu-item-type-custom > a[href="#"]:hover {
        background: var(--color-primary) !important;
    }
}
/* Sub-menu items có link # - cũng không highlight (chỉ là wrapper dropdown) */
.primary-nav__list .sub-menu .menu-item-type-custom > a[href="#"] {
    background: transparent !important;
    color: var(--color-text) !important;
}
.primary-nav__list .sub-menu .menu-item-type-custom > a[href="#"]:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

/* ---------- Dropdown sub-menu ---------- */
.primary-nav__list li {
    position: relative;
}
.primary-nav__list .menu-item-has-children > a::after {
    content: "▾";
    display: inline-block;
    margin-left: 6px;
    font-size: .75em;
    color: rgba(255,255,255,.7);
    transition: transform .15s;
}
.primary-nav__list .menu-item-has-children:hover > a::after {
    transform: rotate(-180deg);
    color: #fff;
}
.primary-nav__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 60;
}
.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.primary-nav__list .sub-menu li { width: 100%; }
.primary-nav__list .sub-menu li a {
    padding: 9px 12px;
    font-size: .92rem;
    font-weight: 500;
    white-space: normal;
    color: var(--color-text);
}
.primary-nav__list .sub-menu li a:hover,
.primary-nav__list .sub-menu li.current-menu-item > a {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}
/* Sub-menu items có class current-menu-parent / ancestor (vì có sub-sub-menu) -
   KHÔNG highlight, hiển thị bình thường */
.primary-nav__list .sub-menu li.current-menu-parent > a,
.primary-nav__list .sub-menu li.current-menu-ancestor > a {
    background: transparent !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
}
.primary-nav__list .sub-menu li.current-menu-parent > a:hover,
.primary-nav__list .sub-menu li.current-menu-ancestor > a:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

/* Sub-sub-menu (depth 3) - mở sang bên phải */
.primary-nav__list .sub-menu .menu-item-has-children > a::after {
    content: "›";
    margin-left: auto;
    color: var(--color-muted);
    transition: color .15s;
    font-size: 1rem;
}
.primary-nav__list .sub-menu .menu-item-has-children:hover > a::after { color: var(--color-primary); }
.primary-nav__list .sub-menu li { position: relative; }
.primary-nav__list .sub-menu .sub-menu {
    top: -8px;
    left: 100%;
    margin-left: 4px;
}

/* FAQ accordion */
.faq-page { padding: 40px 20px 56px; max-width: 880px; margin: 0 auto; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.faq-item.is-open { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.faq-item__q {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    font: inherit;
}
.faq-item__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: .92rem;
    flex-shrink: 0;
}
.faq-item.is-open .faq-item__num { background: var(--color-primary); color: #fff; }
.faq-item__q-text {
    flex: 1;
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-weight: 600;
    line-height: 1.45;
}
.faq-item__icon {
    width: 22px; height: 22px;
    position: relative;
    flex-shrink: 0;
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    background: var(--color-primary);
    transition: transform .2s;
    border-radius: 2px;
}
.faq-item__icon::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.faq-item__icon::after { left: 10px; top: 3px; bottom: 3px; width: 2px; }
.faq-item.is-open .faq-item__icon::after { transform: scaleY(0); }
.faq-item__a {
    padding: 0 20px 18px 70px;
    color: var(--color-text);
    line-height: 1.7;
    animation: faq-slide .2s ease;
}
.faq-item__a p { margin: 0; }
@keyframes faq-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.faq-cta {
    margin-top: 36px;
    padding: 28px 24px;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
}
.faq-cta p {
    margin: 0 0 14px;
    color: var(--color-primary-dark);
    font-weight: 600;
    font-family: var(--font-heading);
}

@media (max-width: 720px) {
    .faq-page { padding: 28px 16px 36px; }
    .faq-item__q { padding: 14px 14px; gap: 10px; }
    .faq-item__num { width: 30px; height: 30px; font-size: .82rem; }
    .faq-item__q-text { font-size: .95rem; }
    .faq-item__a { padding: 0 14px 14px 54px; font-size: .92rem; }

    /* Sub-sub-menu mobile: tuôn theo dọc trong panel */
    .primary-nav__list .sub-menu .sub-menu {
        position: static;
        margin: 0 0 0 12px;
        border-left: 2px solid var(--color-border);
        padding-left: 8px;
    }
}

/* ---------- Search button + dropdown panel ---------- */
.header-search {
    position: relative;
    display: flex;
    align-items: stretch;
}
.header-search__toggle {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,.08);
    color: #fff;
    width: 52px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s;
}
.header-search__toggle:hover,
.header-search__toggle[aria-expanded="true"] {
    background: var(--color-primary);
}
.header-search__icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>") center / contain no-repeat;
}
.header-search__form {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 360px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
    z-index: 60;
}
.header-search.is-open .header-search__form {
    opacity: 1;
    visibility: visible;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility 0s;
}
.header-search__input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font: inherit;
    color: var(--color-text);
    background: #fff;
    min-width: 0;
}
.header-search__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    border-color: var(--color-primary);
}
.header-search__submit {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    width: 42px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.header-search__submit:hover { background: var(--color-primary-dark); }
.header-search__submit .header-search__icon { color: #fff; }

.nav-toggle {
    display: none;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    width: 44px; height: 44px;
    padding: 10px;
    margin-left: auto;
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    width: 100%; height: 2px;
    background: #fff;
    margin: 4px 0;
    transition: transform .2s, opacity .2s;
}

/* ========== Hero ========== */
.hero {
    position: relative;
    color: #fff;
    background-color: #074a8e;
    overflow: hidden;
}
.hero__slides {
    position: absolute; inset: 0;
    z-index: 0;
}
.hero__slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(7,37,72,.65) 0%, rgba(10,73,142,.45) 50%, rgba(12,48,97,.45) 100%);
    pointer-events: none;
}

/* Dots indicator */
.hero__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.hero__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.2);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s, border-color .2s;
}
.hero__dot:hover {
    background: rgba(255,255,255,.55);
    border-color: #fff;
    transform: scale(1.1);
}
.hero__dot.is-active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.35);
    box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

/* Mobile tweaks cho phần hero mới */
@media (max-width: 720px) {
    .hero__dots {
        bottom: 12px;
        padding: 6px 10px;
        gap: 8px;
    }
    .hero__dot { width: 10px; height: 10px; border-width: 1.5px; }
    .hero__dot.is-active { transform: scale(1.25); }

    /* Button gold/green to hơn dễ tap */
    .hero__actions .btn { padding: 10px 18px; min-height: 44px; }

    /* Text shadow nhẹ bớt 1 chút trên mobile để đỡ blur */
    .hero__title { text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.95); }
    .hero__lead { text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); }
}
.hero__bg {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(14,165,233,.25) 0, transparent 45%);
    pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 32px;
    padding: 72px 20px 80px;
    align-items: center;
}
/* Toàn bộ chữ trong hero container in đậm */
.hero__content,
.hero__content p,
.hero__content span,
.hero__content li,
.hero__card,
.hero__card p,
.hero__card-foot,
.hero__card-foot a,
.hero__highlights span,
.hero__eyebrow {
    font-weight: 700;
}
.hero__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hero__title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin: 12px 0 8px;
    font-weight: 800;
    text-shadow: 0 3px 24px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,1), 0 1px 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,.85);
}
.hero__lead {
    font-size: .94rem;
    opacity: 1;
    max-width: 56ch;
    text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.95), 0 1px 1px rgba(0,0,0,1);
}
.hero__eyebrow {
    text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
}
.hero__highlights strong { text-shadow: 0 3px 14px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,1), 0 0 1px rgba(0,0,0,.95); }
.hero__highlights span { text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); }
.hero__card-title,
.hero__card p,
.hero__phone,
.hero__card-foot { text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.85); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.hero__highlights {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.hero__highlights li { display: flex; flex-direction: column; }
.hero__highlights strong { font-size: 1.25rem; }
.hero__highlights span { font-size: .78rem; opacity: .85; }

.hero__card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
    padding: 18px;
}
.hero__card-title { font-size: 1rem; margin-bottom: 6px; color: #fff; }
.hero__phone {
    display: flex; align-items: center; gap: 8px;
    color: #fff;
    font-size: 1.15rem; font-weight: 700;
    margin-top: 8px;
}
.hero__phone--alt { font-size: 1rem; opacity: .9; }
.hero__phone:hover { color: #fff; text-decoration: underline; }
.hero__card-foot { margin-top: 12px; font-size: .82rem; opacity: .9; }
.hero__card-foot a { color: #00FFFF; text-decoration: underline; }

/* ========== Section heads ========== */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.section-head__eyebrow {
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
}
.section-head__title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 8px 0 12px; color: var(--color-primary-dark); }
.section-head__lead { color: var(--color-muted); }
.section-head--row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    gap: 20px;
    max-width: none;
}

/* ========== Services ========== */
.services { padding: 64px 0; background: var(--color-bg-alt); }
.services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.service-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}
.service-card__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: 14px;
    position: relative;
}
.service-card__icon::before {
    content: "";
    position: absolute;
    inset: 14px;
    background: var(--color-primary);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.service-card__icon[data-icon="receipt"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 2h12v20l-3-2-3 2-3-2-3 2zm3 5h6v2H9zm0 4h6v2H9z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 2h12v20l-3-2-3 2-3-2-3 2zm3 5h6v2H9zm0 4h6v2H9z'/></svg>"); }
.service-card__icon[data-icon="wallet"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M21 7H5a2 2 0 1 1 0-4h13v2H5v-.001L21 5v2zm-3 4h3v6h-3a3 3 0 1 1 0-6zm-15-2v12h18v-3h-3a5 5 0 0 1 0-10h3V9z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M21 7H5a2 2 0 1 1 0-4h13v2H5v-.001L21 5v2zm-3 4h3v6h-3a3 3 0 1 1 0-6zm-15-2v12h18v-3h-3a5 5 0 0 1 0-10h3V9z'/></svg>"); }
.service-card__icon[data-icon="meter"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm1-13h-2v6l5 3 1-1.7-4-2.4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm1-13h-2v6l5 3 1-1.7-4-2.4z'/></svg>"); }
.service-card__icon[data-icon="help"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 17h-2v-2h2zm2.07-7.75-.9.92A3.51 3.51 0 0 0 13 14h-2v-.5a4.41 4.41 0 0 1 1.17-2.83l1.24-1.26a2 2 0 1 0-3.41-1.41h-2a4 4 0 1 1 7 2.75z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 17h-2v-2h2zm2.07-7.75-.9.92A3.51 3.51 0 0 0 13 14h-2v-.5a4.41 4.41 0 0 1 1.17-2.83l1.24-1.26a2 2 0 1 0-3.41-1.41h-2a4 4 0 1 1 7 2.75z'/></svg>"); }
.service-card__title { color: var(--color-primary-dark); font-size: 1.05rem; }
.service-card__desc { color: var(--color-muted); font-size: .92rem; min-height: 60px; }
.service-card__cta {
    display: inline-block; font-weight: 600; margin-top: 6px;
}

/* ========== Alerts ========== */
.alerts { padding: 64px 0; }
.alert {
    border-radius: var(--radius);
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.alert--danger {
    display: flex; gap: 20px; align-items: flex-start;
    border: 1px solid #fecaca;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}
.alert--danger .alert__icon {
    width: 48px; height: 48px;
    background: var(--color-danger);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.alert__title { color: var(--color-primary-dark); margin-bottom: 6px; }
.alert__cta { text-align: center; margin-top: 16px; }
.alerts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.alert--info { border-color: #bae6fd; background: #f0f9ff; }
.alert--success { border-color: #bbf7d0; background: #f0fdf4; }
.alert--warning { border-color: #fde68a; background: #fffbeb; }
.alert__link { font-weight: 600; }

/* ========== Stats ========== */
.stats {
    background: var(--color-primary-dark);
    color: #fff;
    padding: 36px 0;
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.stats__value { display: block; font-size: 2rem; font-weight: 800; }
.stats__label { font-size: .9rem; opacity: .85; }

/* ========== News ========== */
.news { padding: 64px 0; background: var(--color-bg-alt); }
.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.news-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-card__media {
    display: block; aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-primary-light), #fff);
    position: relative; overflow: hidden;
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 3rem; font-weight: 800;
    color: var(--color-primary);
}
.news-card__body { padding: 18px 20px 22px; }
.news-card__meta { color: var(--color-muted); font-size: .82rem; margin: 0 0 6px; }
.news-card__title { font-size: 1.05rem; margin-bottom: 8px; }
.news-card__title a { color: var(--color-primary-dark); }
.news-card__title a:hover { color: var(--color-primary); }
.news-card__excerpt { color: var(--color-muted); font-size: .92rem; margin: 0; }

/* ========== CTA Band ========== */
.cta-band {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    color: #fff;
    padding: 48px 0;
}
.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
}
.cta-band__title { color: #fff; font-size: 1.5rem; margin: 0 0 4px; }
.cta-band__lead { margin: 0; opacity: .92; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ========== Page hero (inner pages) ========== */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #ffffff 100%);
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}
.page-hero--center { text-align: center; }
.page-hero__title { color: var(--color-primary-dark); font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.page-hero__lead { color: var(--color-muted); margin: 8px 0 0; }

/* ========== Content grid ========== */
.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    padding: 48px 20px;
}
.content-grid__main { min-width: 0; }
.content-grid__sidebar .widget {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
}
.widget__title { color: var(--color-primary-dark); font-size: 1rem; margin-top: 0; }

/* ========== Post list ========== */
.post-list { display: grid; gap: 22px; }
.post-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px 1fr;
    box-shadow: var(--shadow-sm);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 20px 22px; }
.post-card__title { color: var(--color-primary-dark); font-size: 1.15rem; }
.post-card__title a { color: inherit; }
.post-card__meta { color: var(--color-muted); font-size: .85rem; margin: 0 0 8px; }
.post-card__excerpt { color: var(--color-text); margin-bottom: 10px; }

.page-content { background: #fff; }
.page-content h2, .page-content h3 { color: var(--color-primary-dark); margin-top: 1.4em; }
.page-content p, .page-content li { line-height: 1.7; }
.page-content ul, .page-content ol { padding-left: 1.4em; }
.page-content .cols-2,
.page-content .cols-3,
.page-content .cols-4 {
    display: grid;
    gap: 20px;
    margin: 18px 0;
}
.page-content .cols-2 { grid-template-columns: repeat(2, 1fr); }
.page-content .cols-3 { grid-template-columns: repeat(3, 1fr); }
.page-content .cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .page-content .cols-2,
    .page-content .cols-3,
    .page-content .cols-4 { grid-template-columns: 1fr; }
}
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.page-content table th,
.page-content table td {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    text-align: left;
}
.page-content table th {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}
.page-content table tr:nth-child(even) td { background: #fafcff; }
.page-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    padding: 14px 18px;
    margin: 18px 0;
    border-radius: var(--radius-sm);
}
.page-content__featured { margin: 0 0 24px; }
.page-content__back { margin-top: 32px; }

/* ========== Pagination ========== */
.pagination { margin-top: 24px; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination .current {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background: #fff;
}
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ========== Footer ========== */
.site-footer { background: var(--color-bg-dark); color: #cad7ea; margin-top: 0; }
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1fr 0.8fr;
    gap: 32px;
    padding: 56px 20px 32px;
}
.footer__col--badge {
    display: flex;
    flex-direction: column;
}
.footer__trust {
    display: inline-block;
    background: #fff;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    align-self: flex-start;
    transition: transform .15s;
}
.footer__trust:hover { transform: translateY(-2px); }
.footer__trust img {
    display: block;
    width: 150px;
    height: auto;
    max-width: 100%;
}
.footer__col p, .footer__col li { font-size: .92rem; }
.footer__title {
    color: #fff;
    font-size: 1.02rem;
    margin: 0 0 14px;
    position: relative;
    padding-bottom: 8px;
}
.footer__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 2px;
    background: var(--color-info);
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__list a { color: #cad7ea; }
.footer__list a:hover { color: #fff; }
.footer__address { font-style: normal; margin: 0 0 12px; line-height: 1.6; }
.footer__address a { color: #fff; }
.footer__badge { color: #9ee7c8; font-weight: 600; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__bottom-inner {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between;
    padding: 16px 20px;
}
.site-footer__bottom small { color: #91a3bf; }
.footer-nav__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 16px;
}
.footer-nav__list a { color: #cad7ea; font-size: .9rem; }
.footer-nav__list a:hover { color: #fff; }

/* ========== Archive (category) page ========== */
.archive-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 70%, #0c3061 100%);
    color: #fff;
    padding: 56px 0 64px;
}
.archive-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,.10) 0, transparent 38%),
        radial-gradient(circle at 85% 75%, rgba(14,165,233,.30) 0, transparent 42%);
    pointer-events: none;
}
.archive-hero__inner { position: relative; z-index: 1; }
.archive-hero__crumbs {
    font-size: .85rem;
    opacity: .88;
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.archive-hero__crumbs a { color: #fff; opacity: .9; }
.archive-hero__crumbs a:hover { opacity: 1; color: #fff; }
.archive-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 8px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.archive-hero__lead {
    max-width: 70ch;
    opacity: .94;
    font-size: 1rem;
    margin: 0 0 14px;
}
.archive-hero__meta { margin: 0; }
.archive-hero__badge {
    display: inline-block;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.archive-page {
    padding: 40px 20px 56px;
    max-width: 880px;
    margin: 0 auto;
}

/* Danh sách bài dạng row dọc - gọn, không avatar */
.post-rows {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.post-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--color-border);
    transition: background .15s;
}
.post-row:hover { background: var(--color-bg-alt); }
.post-row__date {
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    line-height: 1.1;
    border: 1px solid #cfe1f5;
}
.post-row__day {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}
.post-row__month {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-top: 2px;
}
.post-row__body { flex: 1; min-width: 0; }
.post-row__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 6px;
}
.post-row__title a {
    color: var(--color-primary-dark);
    text-decoration: none;
}
.post-row__title a:hover { color: var(--color-primary); text-decoration: underline; }
.post-row__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: .88rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-empty {
    text-align: center;
    color: var(--color-muted);
    padding: 60px 20px;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
}

/* ========== Trang Điểm thu hộ ========== */
.thu-ho-page { padding: 40px 20px 56px; max-width: 1100px; margin: 0 auto; }

/* Search box */
.thu-ho-search {
    margin-bottom: 20px;
}
.thu-ho-search__label {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.thu-ho-search__label:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10,102,194,.18);
}
.thu-ho-search__icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    background: var(--color-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>") center / contain no-repeat;
}
.thu-ho-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 12px;
    font: inherit;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.thu-ho-search__clear {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    color: var(--color-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}
.thu-ho-search__clear:hover { background: var(--color-bg-alt); color: var(--color-danger); }
.thu-ho-search__status {
    margin: 8px 4px 0;
    color: var(--color-muted);
    font-size: .88rem;
}
.thu-ho-search__status #thu-ho-count { font-weight: 700; color: var(--color-primary-dark); }
.thu-ho-search--no-result .thu-ho-search__status #thu-ho-count { color: var(--color-danger); }
.thu-ho-table tr[hidden] { display: none; }
.thu-ho-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.thu-ho-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.thu-ho-table th,
.thu-ho-table td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
    vertical-align: top;
    line-height: 1.5;
}
.thu-ho-table th {
    background: var(--color-primary-dark);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .04em;
    position: sticky; top: 0;
    z-index: 1;
}
.thu-ho-table tbody tr:last-child td { border-bottom: 0; }
.thu-ho-table tbody tr:nth-child(odd):not(.thu-ho-row-group) { background: #fafcff; }
.thu-ho-table tbody tr:hover:not(.thu-ho-row-group) td { background: var(--color-primary-light); }
.thu-ho-table .col-stt { width: 60px; text-align: center; font-weight: 600; color: var(--color-primary-dark); }
.thu-ho-row-group td {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .95rem;
    padding: 12px 16px;
}
.thu-ho-row-group td:first-child { text-align: center; font-weight: 700; }

.thu-ho-note {
    margin-top: 20px;
    padding: 16px 20px;
    background: #fffaf0;
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    line-height: 1.6;
    font-size: .92rem;
}

@media (max-width: 720px) {
    .thu-ho-page { padding: 28px 16px 36px; }
    .thu-ho-table th, .thu-ho-table td { padding: 10px 12px; font-size: .85rem; }
    .thu-ho-row-group td { font-size: .85rem; padding: 10px 12px; }
}

/* ========== Hub Thanh toán trực tuyến ========== */
.payment-hub { padding: 40px 20px 56px; max-width: 1100px; margin: 0 auto; }
.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.payment-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 26px 24px 24px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    box-shadow: var(--shadow-sm);
}
.payment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
    text-decoration: none;
}
.payment-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    position: relative;
    background: var(--color-primary-light);
}
.payment-card__icon::before {
    content: "";
    position: absolute;
    inset: 14px;
    background: var(--color-primary);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.payment-card__icon[data-icon="location"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}
.payment-card__icon[data-icon="payoo"]::before,
.payment-card__icon[data-icon="momo"]::before,
.payment-card__icon[data-icon="vnpt"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 12H3v-6h18v6zm0-8H3V7h18v2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 12H3v-6h18v6zm0-8H3V7h18v2z'/></svg>");
}
.payment-card__icon[data-icon="bank"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 10h3v7H4zm6.5 0h3v7h-3zM2 19h20v3H2zM17 10h3v7h-3zM12 1 2 6v2h20V6z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 10h3v7H4zm6.5 0h3v7h-3zM2 19h20v3H2zM17 10h3v7h-3zM12 1 2 6v2h20V6z'/></svg>");
}
.payment-card--payoo .payment-card__icon { background: #fff3e0; }
.payment-card--payoo .payment-card__icon::before { background: #ff6f00; }
.payment-card--momo .payment-card__icon { background: #fce4ec; }
.payment-card--momo .payment-card__icon::before { background: #a50064; }
.payment-card--vnpt .payment-card__icon { background: #e3f2fd; }
.payment-card--vnpt .payment-card__icon::before { background: #1565c0; }
.payment-card--bank .payment-card__icon { background: #e8f5e9; }
.payment-card--bank .payment-card__icon::before { background: #2e7d32; }
.payment-card__title {
    color: var(--color-primary-dark);
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0 0 10px;
    font-family: var(--font-heading);
}
.payment-card__desc {
    color: var(--color-muted);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 14px;
    flex: 1;
}
.payment-card__cta {
    color: var(--color-primary);
    font-weight: 600;
    font-size: .92rem;
    align-self: flex-start;
    transition: gap .15s;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.payment-card:hover .payment-card__cta { color: var(--color-primary-dark); gap: 8px; }
.payment-hub__extra { margin-top: 40px; }

@media (max-width: 1024px) {
    .payment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .payment-hub { padding: 28px 16px 36px; }
    .payment-grid { grid-template-columns: 1fr; gap: 14px; }
    .payment-card { padding: 22px 20px 20px; }
    .payment-card__icon { width: 54px; height: 54px; }
}

/* ========== Giá nước ========== */
.gia-nuoc-page { padding: 40px 20px 56px; max-width: 880px; margin: 0 auto; }
.gia-nuoc__heading {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-size: 1.2rem;
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary-light);
}
.gia-nuoc__heading:first-child { margin-top: 0; }
.gia-nuoc__table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
.gia-nuoc__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.gia-nuoc__table th,
.gia-nuoc__table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: .94rem;
}
.gia-nuoc__table th {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
    font-family: var(--font-heading);
}
.gia-nuoc__table tr:last-child td { border-bottom: 0; }
.gia-nuoc__table tr:hover td { background: var(--color-bg-alt); }
.gia-nuoc__table .num { text-align: right; font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; }
.gia-nuoc__table .col-stt { width: 60px; text-align: center; }
.gia-nuoc__row-group td { background: var(--color-primary-light); }
.gia-nuoc__row-sub td:first-child { background: var(--color-bg-alt); }
.gia-nuoc__row-sub td { font-size: .92rem; }
.gia-nuoc__note {
    margin-top: 24px;
    padding: 18px 22px;
    background: #fffaf0;
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-sm);
}
.gia-nuoc__note p { margin: 0 0 12px; color: var(--color-text); line-height: 1.6; }
.gia-nuoc__note p:last-child { margin-bottom: 0; }
.gia-nuoc__note-cta { margin-top: 14px; }
.gia-nuoc__extra { margin-top: 32px; }
@media (max-width: 720px) {
    .gia-nuoc-page { padding: 28px 16px 36px; }
    .gia-nuoc__heading { font-size: 1.05rem; }
    .gia-nuoc__table th, .gia-nuoc__table td { padding: 10px 12px; font-size: .85rem; }
}

/* ========== Trang Liên hệ ========== */
.lien-he-page { padding: 40px 20px 56px; max-width: 1000px; margin: 0 auto; }
.lien-he-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.lien-he-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.lien-he-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lien-he-card__head { margin-bottom: 14px; }
.lien-he-card__badge {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.lien-he-card__badge--accent { background: var(--color-primary); color: #fff; }
.lien-he-card__title {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-size: 1.05rem;
    margin: 0;
}
.lien-he-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lien-he-card__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .92rem;
    line-height: 1.5;
}
.lien-he-card__icon {
    color: var(--color-primary);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    width: 20px;
}
.lien-he-card__list a { color: var(--color-primary-dark); font-weight: 600; }
.lien-he-card__list a:hover { color: var(--color-primary); }

/* Form */
.lien-he-form-section {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 28px 30px;
    box-shadow: var(--shadow-sm);
}
.lien-he-form__title {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    margin: 0 0 6px;
    font-size: 1.3rem;
}
.lien-he-form__lead { color: var(--color-muted); margin: 0 0 22px; }
.lien-he-form__success {
    padding: 14px 18px;
    background: #e7f8ee;
    border: 1px solid #b8e6c8;
    color: #166534;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}
.lien-he-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.lien-he-form__field { display: flex; flex-direction: column; margin-bottom: 14px; }
.lien-he-form__field label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-text);
    margin-bottom: 6px;
}
.lien-he-form__field .req { color: var(--color-danger); }
.lien-he-form__field input,
.lien-he-form__field select,
.lien-he-form__field textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    transition: border-color .15s, box-shadow .15s;
}
.lien-he-form__field input:focus,
.lien-he-form__field select:focus,
.lien-he-form__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10,102,194,.15);
}
.lien-he-form__field textarea { resize: vertical; min-height: 110px; }
.lien-he-form__hp { position: absolute; left: -9999px; opacity: 0; }
.lien-he-form__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* Bản đồ trụ sở */
.lien-he-maps { margin-top: 12px; }
.lien-he-maps__title {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-size: 1.2rem;
    margin: 0 0 16px;
}
.lien-he-maps__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.lien-he-map {
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.lien-he-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}
.lien-he-map figcaption {
    padding: 14px 18px;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    font-size: .92rem;
    line-height: 1.5;
}
.lien-he-map figcaption strong { color: var(--color-primary-dark); }
.lien-he-map__open {
    display: block;
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
}
.lien-he-map__open:hover { color: var(--color-primary-dark); }

@media (max-width: 720px) {
    .lien-he-page { padding: 28px 16px 36px; }
    .lien-he-grid { grid-template-columns: 1fr; gap: 14px; }
    .lien-he-form-section { padding: 22px 18px 24px; }
    .lien-he-form__row { grid-template-columns: 1fr; gap: 0; }
    .lien-he-maps__grid { grid-template-columns: 1fr; }
    .lien-he-map iframe { height: 280px; }
}

/* ========== Popup cảnh báo trang chủ ========== */
.popup-alert {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}
.popup-alert[hidden] { display: none; }
.popup-alert__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 41, .72);
    backdrop-filter: blur(2px);
    animation: ttn-fade-in .2s ease;
}
.popup-alert__panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border-top: 6px solid var(--color-danger);
    max-width: 520px;
    width: 100%;
    padding: 32px 28px 28px;
    text-align: center;
    animation: ttn-pop-in .25s cubic-bezier(.2,.9,.3,1.2);
}
.popup-alert__close {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: 0;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}
.popup-alert__close:hover { background: var(--color-bg-alt); color: var(--color-text); }
.popup-alert__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 auto 16px;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .35);
}
.popup-alert__title {
    color: var(--color-danger);
    font-size: 1.35rem;
    margin: 0 0 12px;
    font-family: var(--font-heading);
}
.popup-alert__body {
    color: var(--color-text);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 10px;
}
.popup-alert__body--hotline { font-size: 1rem; }
.popup-alert__body--hotline a { color: var(--color-danger); }
.popup-alert__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}
.popup-alert__actions .btn {
    min-width: 140px;
    justify-content: center;
}
.popup-alert__actions a.btn {
    text-decoration: none;
    color: #fff;
}
.popup-alert__actions a.btn--primary:hover {
    color: #fff;
    background: var(--color-primary-dark);
    text-decoration: none;
}
@keyframes ttn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ttn-pop-in {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 720px) {
    .popup-alert__panel { padding: 28px 18px 22px; }
    .popup-alert__title { font-size: 1.15rem; }
    .popup-alert__icon { width: 54px; height: 54px; font-size: 1.6rem; }
    .popup-alert__actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .popup-alert__backdrop, .popup-alert__panel { animation: none; }
}

/* ========== Back to top ========== */
.back-to-top {
    position: fixed;
    right: 20px; bottom: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.2rem; font-weight: 700;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s;
    z-index: 60;
}
.back-to-top.is-visible {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.back-to-top:hover { background: var(--color-primary-dark); color: #fff; }

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .alerts__grid { grid-template-columns: repeat(2, 1fr); }
    .news__grid { grid-template-columns: repeat(2, 1fr); }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .hero__inner { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .footer__col--badge { grid-column: span 2; }
    .content-grid { grid-template-columns: 1fr; }
    .post-card { grid-template-columns: 1fr; }
    .info-blocks { gap: 12px; }
    .info-block__icon { width: 32px; height: 32px; }
    .info-block__icon::before { inset: 8px; }
    .info-block__text { max-width: 200px; }
    .info-block__text a, .info-block__text > span:not(.info-block__label) { font-size: .82rem; }
    .info-block__addr { font-size: .72rem !important; }
    .primary-nav__list li a { padding: 11px 12px; font-size: .88rem; }
    .site-branding__name { font-size: .9rem; padding-left: 10px; }
}

@media (max-width: 720px) {
    .nav-toggle { display: inline-block; }
    .header-search__form {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        min-width: 0;
        margin-top: 0;
    }
    .site-logo-bar__inner { padding: 0 20px; gap: 12px; flex-wrap: wrap; }
    .site-branding__logo, .site-branding .custom-logo { height: 72px; max-width: 220px; margin: 0; }
    .site-branding__name { display: none; }
    .info-blocks {
        order: 3;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        width: 100%;
        margin: 8px 0 0;
        padding-top: 8px;
        border-top: 1px solid var(--color-border);
    }
    .info-block__icon { width: 36px; height: 36px; }
    .info-block__icon::before { inset: 8px; }
    .nav-toggle { order: 2; }

    /* Menu thu gọn vào panel mobile, không sticky cứng */
    .site-header { position: static; padding: 0; }
    .site-header__inner { padding: 0; }
    .primary-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        background: var(--color-primary-dark);
    }
    .primary-nav.is-open { max-height: 80vh; overflow-y: auto; }
    .primary-nav__list {
        flex-direction: column;
        padding: 8px 0 12px;
        gap: 0;
    }
    .primary-nav__list li a {
        padding: 12px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
        font-size: .9rem;
    }
    .primary-nav__list > li:first-child > a { border-left: none; }

    /* Sub-menu mobile: ACCORDION - default ẩn, mở khi parent có .is-open */
    .primary-nav__list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid rgba(255,255,255,.15);
        border-radius: 0;
        margin: 0 0 0 16px;
        padding: 0;
        background: rgba(0,0,0,.15);
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }
    .primary-nav__list .menu-item-has-children.is-open > .sub-menu {
        max-height: 2000px;
    }
    .primary-nav__list .sub-menu li a {
        padding: 11px 16px;
        font-size: .9rem;
        text-transform: none;
        font-weight: 500;
        color: rgba(255,255,255,.9);
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
        white-space: normal;
    }
    /* Sub-sub-menu */
    .primary-nav__list .sub-menu .sub-menu {
        border: none !important;
        border-left: 2px solid rgba(255,255,255,.12) !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,.18) !important;
        box-shadow: none !important;
        margin: 0 0 0 16px !important;
        padding: 0 !important;
    }
    .primary-nav__list .sub-menu .sub-menu li a {
        color: rgba(255,255,255,.8) !important;
        background: transparent !important;
        font-size: .85rem !important;
    }

    /* Hiển thị mũi tên trên mobile cho parent */
    .primary-nav__list .menu-item-has-children > a {
        position: relative;
        padding-right: 44px;
    }
    .primary-nav__list .menu-item-has-children > a::after {
        content: "▾";
        display: block !important;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        color: rgba(255,255,255,.7);
        transition: transform .2s;
        margin: 0;
    }
    .primary-nav__list .menu-item-has-children.is-open > a::after {
        transform: translateY(-50%) rotate(180deg);
        color: #fff;
    }

    /* Search button trên mobile: ẩn cho gọn (icon nổi trôi đè menu) */
    .header-search { display: none; }

    .services__grid { grid-template-columns: 1fr; }
    .alerts__grid { grid-template-columns: 1fr; }
    .news__grid { grid-template-columns: 1fr; }
    .section-head--row { flex-direction: column; align-items: flex-start; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .footer__col--badge { grid-column: span 1; }
    .hero__inner { padding: 52px 20px 56px; }
    .archive-hero { padding: 40px 0 44px; }
    .archive-page { padding: 28px 16px 36px; }
    .post-row { gap: 14px; padding: 14px 2px; }
    .post-row__date { flex-basis: 56px; padding: 8px 4px; }
    .post-row__day { font-size: 1.2rem; }
    .post-row__title { font-size: .98rem; }
    .post-row__excerpt { font-size: .82rem; -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}