.zalo-icon {
    width: 24px;
    height: 24px;
}

.dark .zalo-icon {
    content: url('/assets/img/zalo-icon-circle-visible-removebg-preview.png');
    background: transparent;
}

.product-popup {
    position: fixed;
    bottom: 257px;
    right: 13px;
    z-index: 1000;
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    display: none;
}

    .product-popup.hidden {
        display: none;
    }

    .product-popup.visible {
        display: block;
    }

    .product-popup .container {
        padding: 0;
        margin: 0;
    }

    .product-popup .box {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        overflow: hidden;
    }

    .product-popup img {
        max-width: 100%;
        border-radius: 0 0 10px 10px;
    }

.btn-dangky {
    text-align: center;
    margin-top: 10px;
}

.buy-button {
    display: none;
    position: fixed;
    bottom: 180px;
    right: 20px;
    z-index: 1001;
}

    .buy-button button {
        background-color: #fee86d;
        color: #000000;
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

@media (max-width: 768px) {
    .product-popup .container {
        display: none;
    }

    .buy-button {
        display: block;
    }
}

.price-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.price-option {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    word-wrap: break-word;
    text-align: center;
}

    .price-option:hover, .price-option.selected {
        border-color: #ffcc00;
        background-color: #fff9e6;
    }

.price-label, .price-value {
    display: block;
    white-space: normal;
}

.default-price {
    font-size: 18px;
    font-weight: bold;
}

.dark .price-option {
    padding: 10px 15px;
    border: 2px solid #555;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    word-wrap: break-word;
    text-align: center;
    background-color: #2c2c2c;
    color: #f5f5f5;
}

    .dark .price-option:hover, .dark .price-option.selected {
        border-color: #ffcc00;
        background-color: #444;
    }

.dark .default-price {
    font-size: 18px;
    font-weight: bold;
    color: #f5f5f5;
}

/* Cầu nối thương hiệu Hà Bích Thủy -> Hành trình 40 ngày */
.navbar .nav-item .nav-link.nav-link-journey {
    color: #2f7f72;
    font-weight: 800;
}

.navbar .nav-item .nav-link.nav-link-journey:hover {
    color: #245f57;
}

.brand-bridge {
    padding: 42px 0 58px;
}

.brand-bridge-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 42px;
    padding: 42px 46px;
    border: 1px solid #d7ebe6;
    border-radius: 22px;
    background: linear-gradient(135deg, #f3faf8 0%, #ffffff 56%, #eef6f8 100%);
    box-shadow: 0 18px 50px rgba(47, 127, 114, 0.09);
}

.brand-bridge-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #2f7f72;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.brand-bridge h2 {
    max-width: 720px;
    margin: 0 0 14px;
    color: #1f3531;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.2;
}

.brand-bridge p {
    max-width: 740px;
    margin: 0;
    color: #506762;
    font-size: 17px;
    line-height: 1.8;
}

.brand-bridge-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.brand-bridge-notes span {
    padding: 7px 12px;
    border: 1px solid #d7ebe6;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #47635d;
    font-size: 13px;
    font-weight: 700;
}

.brand-bridge-cta,
.footer-journey-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #ffffff;
    background: #2f7f72;
    text-decoration: none;
    font-weight: 800;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.brand-bridge-cta {
    min-width: 245px;
    padding: 15px 20px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(47, 127, 114, 0.2);
}

.brand-bridge-cta:hover,
.footer-journey-link:hover {
    color: #ffffff;
    background: #245f57;
    text-decoration: none;
    transform: translateY(-2px);
}

.footer-journey-link {
    margin-top: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 14px;
}

.dark .navbar .nav-item .nav-link.nav-link-journey {
    color: #8bd1c3;
}

.dark .brand-bridge-card {
    border-color: #294943;
    background: linear-gradient(135deg, #172824 0%, #202b29 56%, #19292d 100%);
    box-shadow: none;
}

.dark .brand-bridge h2 {
    color: #f4f8f7;
}

.dark .brand-bridge p,
.dark .brand-bridge-notes span {
    color: #c0d2ce;
}

.dark .brand-bridge-notes span {
    border-color: #35544e;
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 991px) {
    .brand-bridge {
        padding: 28px 0 44px;
    }

    .brand-bridge-card {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 34px 28px;
    }

    .brand-bridge-cta {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .brand-bridge-card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .brand-bridge p {
        font-size: 16px;
    }
}

/* ============================================================
   FONT: mot font duy nhat, Be Vietnam Pro.
   Font nay thiet ke rieng cho tieng Viet nen dau ma can va ro.
   Bo Nunito de trang khong bi hai giong chu.
   Chu 17px cho de doc tren dien thoai, do dam toi da 600.
   Bang mau giu nguyen: than #222222, vang #fee86d, nen trang.
   ============================================================ */
:root {
    --font-head: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --than: #222222;
    --chu-nhat: #5a5658;
    --vang: #fee86d;
    --vien: #e2e0e0;
    --nen-nhat: #f7f7f7;
    --pastel-vang: #fffaea;
    --pastel-xanh: #eef6f4;
    --pastel-hong: #fdf1f0;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--than);
    -webkit-font-smoothing: antialiased;
}

p, li, td, th, input, textarea, select, button, .nav-link, .meta, a {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .logo, .navbar-nav > li > a {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: -.2px;
}

/* Doc tren dien thoai: chu to them mot chut, dong thoang hon */
@media (max-width: 767px) {
    body { font-size: 17.5px; line-height: 1.8; }
}


/* MENU SAT LOGO BEN TRAI (13/09/2026): cach logo mot khoang ro, cac muc cach deu nhau.
   style.css co san margin-right 30px cho moi muc lam lech khoang cach, xoa o day. */
.navbar .navbar-nav.menu-trai .nav-item .nav-link { margin: 0 !important; font-weight: 500; letter-spacing: .1px; }
@media (min-width: 992px) {
  .navbar .logo { flex-shrink: 0; }
  .navbar .navbar-nav.menu-trai { margin-left: 44px; }
  .navbar .navbar-nav.menu-trai .nav-item .nav-link { padding: 8px 18px !important; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar .navbar-nav.menu-trai { margin-left: 20px; }
  .navbar .navbar-nav.menu-trai .nav-item .nav-link { padding: 8px 10px !important; font-size: 15px !important; }
}


/* ===== GIAO DIEN NGOAI 13/09/2026 ===== */
/* Bieu tuong mang xa hoi o dau trang: link lay tu trang quan tri, dang tro trang cu
   (biantamluc) va link trong "#insta", "#youtube". Tren dien thoai con de len logo.
   An di (14/09/2026), khi co link that thi bo dong nay. */
.navbar .navbar-right .social-media { display: none !important; }
/* Menu tieng Viet chi viet hoa chu dau */
.navbar .navbar-nav.menu-trai .nav-link,
.navbar .navbar-nav.menu-trai .dropdown-item { text-transform: none !important; }

/* Menu con Bai viet: giao dien goc cho cac muc xep ngang (li inline-block),
   muc nao chu ngan thi hai muc dinh chung mot dong. Xep doc lai. */
.navbar .navbar-nav.menu-trai .dropdown-menu { min-width: 240px; padding: 10px; border-radius: 14px; }
.navbar .navbar-nav.menu-trai .dropdown-menu li { display: block; margin: 0; }
.navbar .navbar-nav.menu-trai .dropdown-menu .dropdown-item {
  display: block; margin: 0; padding: 10px 14px; border-radius: 10px;
  font-size: 15px !important; font-weight: 500; color: #333; white-space: nowrap;
}
.navbar .navbar-nav.menu-trai .dropdown-menu .dropdown-item:before { display: none; }
.navbar .navbar-nav.menu-trai .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav.menu-trai .dropdown-menu .dropdown-item.active { background: #fff8d6; color: #222; }

/* Khung "Thuy la ai" (dang tat, bat trong trang-chu.json) */
.thuy-la-ai { padding: 72px 0 8px; }
.thuy-la-ai-the { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; }
.thuy-la-ai-the:not(:has(.thuy-la-ai-anh)) { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.thuy-la-ai-anh img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; }
.thuy-la-ai-chu h2 { font-size: 32px; font-weight: 600; color: #222; margin: 0 0 16px; }
.thuy-la-ai-chu p { font-size: 17px; line-height: 1.8; color: #555; margin: 0 0 20px; }
.thuy-la-ai-link { font-weight: 600; color: #222; border-bottom: 2px solid #fee86d; padding-bottom: 2px; }
.thuy-la-ai-link:hover { color: #222; text-decoration: none; border-bottom-color: #222; }

/* Khung qua tang cuoi trang */
.qua-tang-khung { padding: 96px 0 104px; }
.qua-tang-the { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
  background: linear-gradient(135deg, #fff8d9 0%, #fff3c4 55%, #ffeaa8 100%); border-radius: 32px; padding: 64px 64px 64px 72px; }
.qua-tang-the::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: rgba(255,255,255,.45); }
.qua-tang-the::after { content: ""; position: absolute; width: 220px; height: 220px; left: -80px; bottom: -110px; border-radius: 50%; background: rgba(254,232,109,.55); }
.qua-tang-trai, .qua-tang-phai { position: relative; z-index: 1; }
.qua-tang-nhan { display: inline-flex; align-items: center; gap: 8px; background: #222; color: #fee86d; font-size: 13px; font-weight: 600;
  letter-spacing: .4px; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
.qua-tang-the h2 { font-size: 36px; line-height: 1.25; font-weight: 600; color: #222; margin: 0 0 16px; }
.qua-tang-mota { font-size: 17px; line-height: 1.75; color: #4a4545; margin: 0 0 22px; }
.qua-tang-ds { list-style: none; padding: 0; margin: 0 0 28px; }
.qua-tang-ds li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 10px; }
.qua-tang-tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #222; color: #fee86d; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.qua-tang-form { display: flex; flex-direction: column; gap: 10px; }
.qua-tang-form-ngang { flex-direction: row; max-width: 520px; }
.qua-tang-form input { flex: 1; min-width: 0; font-size: 16px; padding: 14px 18px; border: 1px solid rgba(34,34,34,.18); border-radius: 14px; background: #fff; color: #222; }
.qua-tang-form input:focus { outline: none; border-color: #222; box-shadow: 0 0 0 3px rgba(34,34,34,.08); }
.qua-tang-form button { font-size: 16px; font-weight: 600; color: #fff; background: #222; border: 0; border-radius: 14px; padding: 14px 26px; white-space: nowrap; cursor: pointer; transition: transform .2s, background .2s; }
.qua-tang-form button:hover { background: #000; transform: translateY(-1px); }
.qua-tang-ghichu { font-size: 13.5px; color: #6b6566; margin: 14px 0 0; line-height: 1.6; }

/* Minh hoa tai lieu ben phai */
.qua-tang-phai { height: 360px; display: flex; align-items: center; justify-content: center; }
.qua-tang-giay { position: absolute; width: 250px; height: 320px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px rgba(120,90,0,.18); }
.qua-tang-giay-sau { transform: rotate(-8deg) translate(-28px, 10px); background: #fffdf4; }
.qua-tang-giay-truoc { transform: rotate(4deg); padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; }
.qua-tang-giay-nhan { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #b58a00; }
.qua-tang-giay-ten { font-size: 21px; line-height: 1.3; font-weight: 600; color: #222; margin-bottom: 8px; }
.qua-tang-giay-dong { display: block; height: 8px; border-radius: 4px; background: #f1ece0; }
.qua-tang-giay-dong.ngan { width: 62%; }
.qua-tang-giay-ky { margin-top: auto; font-family: "Great Vibes", "Brush Script MT", cursive; font-size: 22px; color: #444; }

/* Nut qua tang noi */
.qua-tang-noi { position: fixed; left: 20px; bottom: 20px; z-index: 1040; display: inline-flex; align-items: center; gap: 8px;
  background: #fee86d; color: #222; border: 0; border-radius: 999px; padding: 12px 20px 12px 16px; font-size: 15px; font-weight: 600;
  box-shadow: 0 10px 28px rgba(34,34,34,.18); cursor: pointer; transition: opacity .25s, transform .25s; }
.qua-tang-noi:hover { transform: translateY(-2px); }
.qua-tang-noi.an { opacity: 0; transform: translateY(12px); pointer-events: none; }
.qua-tang-nen { position: fixed; inset: 0; z-index: 1050; background: rgba(34,34,34,.45); backdrop-filter: blur(2px); }
.qua-tang-hop { position: fixed; z-index: 1060; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 36px 32px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.qua-tang-hop .qua-tang-nhan { margin-bottom: 16px; }
.qua-tang-hop h3 { font-size: 24px; line-height: 1.3; font-weight: 600; color: #222; margin: 0 0 12px; }
.qua-tang-hop .qua-tang-mota { font-size: 16px; margin-bottom: 20px; }
.qua-tang-dong { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f4f2ee; color: #222; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qua-tang-dong:hover { background: #ebe7df; }
body.qua-tang-dang-mo { overflow: hidden; }

@media (max-width: 991px) {
  .qua-tang-khung { padding: 64px 0 72px; }
  .qua-tang-the { grid-template-columns: 1fr; padding: 40px 26px; border-radius: 24px; }
  .qua-tang-the h2 { font-size: 27px; }
  .qua-tang-phai { display: none; }
  .qua-tang-form-ngang { flex-direction: column; }
  .thuy-la-ai-the { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 576px) {
  .qua-tang-noi { left: 14px; bottom: 14px; padding: 11px 16px 11px 13px; font-size: 14px; }
}


/* ===== BANNER CHU VA HINH KHOI (13/09/2026, ban 2) =====
   Giu net banner cu Thuy thich: chu ky, nen cham, khung vom, chu nhan in nghieng.
   Moi tam doc tu trang-chu.json. */
.bn-lam  { --bn-a: #eef4fc; --bn-b: #d6e4f7; --bn-c: #b9d0ef; --bn-dam: #2c5a96; }
.bn-tim  { --bn-a: #f5f1fd; --bn-b: #e3d9f6; --bn-c: #cbbbee; --bn-dam: #5b4798; }
.bn-vang { --bn-a: #fff8e1; --bn-b: #ffe9a8; --bn-c: #ffd873; --bn-dam: #946d00; }
.bn-dao  { --bn-a: #fff2ea; --bn-b: #ffd9c7; --bn-c: #ffbfa3; --bn-dam: #a84c28; }
.bn-xanh { --bn-a: #edf7f3; --bn-b: #d2ebe1; --bn-c: #b2dccb; --bn-dam: #2a6f5b; }
.bn-hong { --bn-a: #fdf1f4; --bn-b: #f5d5de; --bn-c: #eab6c5; --bn-dam: #923e5a; }
.bn-kem  { --bn-a: #fbf6ee; --bn-b: #efe1c8; --bn-c: #e2ca9f; --bn-dam: #7f602b; }

.bn-tam { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center;
  background: radial-gradient(900px 520px at 82% 30%, var(--bn-b), transparent 65%), linear-gradient(115deg, var(--bn-a) 0%, #ffffff 58%, var(--bn-a) 100%); }
.bn-tam::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(34,34,34,.10) 1.2px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 62% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 55% 70% at 62% 45%, #000 15%, transparent 72%); }
.bn-khung { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; padding-top: 60px; padding-bottom: 110px; }
.bn-ky { display: block; height: 42px; width: auto; margin: 0 0 18px -4px; opacity: .85; }
.bn-nhan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--bn-dam);
  background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); padding: 7px 14px 7px 12px; border-radius: 999px; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.bn-nhan::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-dam); }
.bn-cau { font-size: 52px; line-height: 1.14; font-weight: 600; letter-spacing: -.6px; color: #1f1d1d; margin: 0 0 18px; max-width: 640px; }
.bn-cau em { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: 0; color: var(--bn-dam);
  background-image: linear-gradient(transparent 72%, var(--bn-c) 72%, var(--bn-c) 90%, transparent 90%); padding: 0 2px; }
.bn-phu { font-size: 18px; line-height: 1.7; color: #4a4545; margin: 0 0 18px; max-width: 560px; }
.bn-ds { list-style: none; padding: 0; margin: 4px 0 26px; max-width: 560px; }
.bn-ds li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: #3d3939; margin-bottom: 8px; }
.bn-ds li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bn-dam); }
.bn-hanh { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 10px; }
.bn-link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; background: #222; padding: 14px 24px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(34,34,34,.18); transition: transform .2s, box-shadow .2s, background .2s; }
.bn-link:hover { color: #fff; background: #000; text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(34,34,34,.24); }
.bn-link svg { width: 18px; height: 18px; }
.bn-goi { font-size: 14px; color: #6b6566; max-width: 260px; line-height: 1.5; }

.bn-hinh { position: relative; height: 460px; }
.bn-cau-vong { position: absolute; width: 430px; height: 430px; border-radius: 50%; right: -30px; top: 10px;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, var(--bn-b) 48%, var(--bn-c) 100%); opacity: .95; animation: bnTroi 10s ease-in-out infinite; }
.bn-vom { position: absolute; left: 50%; top: 50%; width: 272px; height: 384px; transform: translate(-46%, -50%); border-radius: 140px 140px 30px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.45)); border: 1px solid #fff;
  box-shadow: 0 34px 70px rgba(50,35,0,.13), inset 0 1px 0 #fff; outline: 1px solid rgba(255,255,255,.75); outline-offset: 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.bn-ve { width: 176px; height: 176px; color: var(--bn-dam); }
.bn-the { position: absolute; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 14px; font-weight: 600; color: #2a2626;
  background: rgba(255,255,255,.9); border: 1px solid #fff; border-radius: 14px; padding: 11px 15px; box-shadow: 0 14px 32px rgba(0,0,0,.09);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bn-the::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bn-dam); box-shadow: 0 0 0 4px var(--bn-b); }
.bn-the-1 { left: -6px; top: 78px; animation: bnTroi 7s ease-in-out infinite; }
.bn-the-2 { right: 0; bottom: 70px; animation: bnTroi 8s ease-in-out -3s infinite; }
@keyframes bnTroi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bn-dem { position: absolute; left: 15px; bottom: 46px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 1px; color: #7a7374; }
.bn-tien { display: block; position: relative; width: 120px; height: 2px; background: rgba(34,34,34,.12); overflow: hidden; }
.bn-tien::after { content: ""; position: absolute; inset: 0; background: var(--bn-dam); transform: scaleX(0); transform-origin: left; }
.owl-item.active .bn-tien::after { animation: bnChay 5s linear forwards; }
@keyframes bnChay { to { transform: scaleX(1); } }

.owl-loaded .owl-item .bn-chu > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.owl-loaded .owl-item.active .bn-chu > * { opacity: 1; transform: none; }
.owl-loaded .owl-item.active .bn-chu > *:nth-child(2) { transition-delay: .08s; }
.owl-loaded .owl-item.active .bn-chu > *:nth-child(3) { transition-delay: .16s; }
.owl-loaded .owl-item.active .bn-chu > *:nth-child(4) { transition-delay: .24s; }
.owl-loaded .owl-item.active .bn-chu > *:nth-child(5) { transition-delay: .32s; }
.owl-loaded .owl-item.active .bn-chu > *:nth-child(6) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .bn-cau-vong, .bn-the-1, .bn-the-2 { animation: none; }
  .owl-loaded .owl-item .bn-chu > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1199px) {
  .bn-cau { font-size: 44px; }
  .bn-cau-vong { width: 360px; height: 360px; }
}
@media (max-width: 991px) {
  .bn-tam { min-height: 0; align-items: flex-start; }
  .bn-khung { grid-template-columns: 1fr; gap: 8px; padding-top: 40px; padding-bottom: 96px; }
  .bn-cau { font-size: 34px; letter-spacing: -.3px; }
  .bn-phu { font-size: 16px; }
  .bn-ds li { font-size: 15px; }
  .bn-hinh { display: none; }
  .bn-tam::before { -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 70% 20%, #000 10%, transparent 70%); }
  .bn-dem { bottom: 34px; }
}
@media (max-width: 576px) {
  .bn-khung { padding-left: 22px; padding-right: 22px; }
  .bn-ky { height: 32px; margin-bottom: 14px; }
  .bn-cau { font-size: 29px; }
  .bn-dem { left: 22px; }
  .bn-tien { width: 70px; }
  .bn-goi { max-width: none; }
}

/* Sua banner ban 2: owl ep moi anh rong 100% lam chu ky bi gian, va slider cu canh giua chu */
.owl-carousel .owl-item img.bn-ky, .bn-ky { width: auto !important; max-width: 190px; height: 40px; object-fit: contain; object-position: left center; }
.bn-chu { text-align: left; }
@media (max-width: 576px) { .owl-carousel .owl-item img.bn-ky, .bn-ky { height: 30px; max-width: 150px; } }

/* Moi tam banner cao bang nhau, tam it chu khong de ho khoang trang ben duoi */
/* Giao diện gốc cho .hero cao đúng một màn hình (calc(100vh - 91px)). Banner mới cao hơn
   trên màn hình thấp nên tràn xuống, lớp slide (z-index 1) che nửa trên hàng vòng tròn
   danh mục. Cho khung slide cao theo nội dung, và đưa hai nút mũi tên vào trong banner. */
.hero.hero-carousel { height: auto; padding-bottom: 0; }
.hero-carousel-3 .owl-nav { bottom: 24px; }
.hero-carousel .owl-stage { display: flex; }
.hero-carousel .owl-item { display: flex; float: none; }
.hero-carousel .owl-item > .bn-tam { width: 100%; }
@media (max-width: 991px) {
  .hero-carousel .bn-tam { align-items: stretch; }
  .hero-carousel .bn-khung { align-content: start; }
}


/* ===== TRANG CHINH SACH (13/09/2026) ===== */
.cs-dau { position: relative; overflow: hidden; padding: 76px 0 0; background: radial-gradient(900px 420px at 88% 0%, #d6e4f7, transparent 62%), linear-gradient(115deg, #eef4fc 0%, #ffffff 62%); }
.cs-dau::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(34,34,34,.09) 1.2px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 45% 80% at 85% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 45% 80% at 85% 20%, #000 10%, transparent 70%); }
.cs-dau .container { position: relative; z-index: 1; }
.cs-nhan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #2c5a96; background: rgba(255,255,255,.85); padding: 7px 14px 7px 12px; border-radius: 999px; margin-bottom: 18px; }
.cs-nhan::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2c5a96; }
.cs-dau h1 { font-size: 46px; line-height: 1.15; font-weight: 600; letter-spacing: -.5px; color: #1f1d1d; margin: 0 0 14px; }
.cs-mota { font-size: 18px; line-height: 1.7; color: #4a4545; max-width: 680px; margin: 0 0 10px; }
.cs-ngay { font-size: 14px; color: #7a7374; margin: 0; }
.cs-tab { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; padding-bottom: 28px; }
.cs-tab a { font-size: 15px; font-weight: 500; color: #333; background: #fff; border: 1px solid rgba(34,34,34,.1); padding: 10px 18px; border-radius: 999px; transition: background .2s, color .2s; }
.cs-tab a:hover { color: #222; text-decoration: none; background: #f4f6fa; }
.cs-tab a.dang-xem { background: #222; color: #fff; border-color: #222; }
.cs-than { padding: 56px 0 96px; }
.cs-luoi { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.cs-mucluc { position: sticky; top: 110px; }
.cs-mucluc p { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8384; margin: 0 0 12px; }
.cs-mucluc ol { list-style: none; padding: 0; margin: 0; }
.cs-mucluc li { margin: 0 0 4px; }
.cs-mucluc a { display: block; font-size: 14.5px; line-height: 1.45; color: #5a5556; padding: 6px 12px; border-radius: 10px; }
.cs-mucluc a:hover { color: #222; background: #f4f6fa; text-decoration: none; }
.cs-bai { max-width: 780px; }
.cs-muc { scroll-margin-top: 110px; margin-bottom: 44px; }
.cs-muc h2 { font-size: 25px; line-height: 1.3; font-weight: 600; color: #1f1d1d; margin: 0 0 14px; }
.cs-muc h3 { font-size: 18px; font-weight: 600; color: #1f1d1d; margin: 0 0 10px; }
.cs-muc p, .cs-muc li { font-size: 16.5px; line-height: 1.8; color: #444; }
.cs-muc p { margin: 0 0 12px; }
.cs-muc a { color: #2c5a96; text-decoration: underline; text-underline-offset: 3px; }
.cs-muc ul { list-style: none; padding: 0; margin: 4px 0 14px; }
.cs-muc ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.cs-muc ul li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #9db6d8; }
.cs-buoc { counter-reset: buoc; list-style: none; padding: 0; margin: 4px 0 16px; }
.cs-buoc li { counter-increment: buoc; position: relative; padding-left: 46px; margin-bottom: 12px; min-height: 30px; }
.cs-buoc li::before { content: counter(buoc); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #222; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.cs-the { background: #f6f8fb; border-radius: 18px; padding: 22px 24px 10px; margin: 0 0 14px; }
.cs-bang { display: grid; grid-template-columns: 160px 1fr; gap: 10px 20px; background: #f6f8fb; border-radius: 18px; padding: 20px 24px; margin: 6px 0 16px; font-size: 16px; }
.cs-bang span { color: #7a7374; }
.cs-bang strong { color: #1f1d1d; font-weight: 600; }
.cs-lienhe { background: linear-gradient(135deg, #fff8d9, #fff1bd); border-radius: 22px; padding: 28px 30px; margin-top: 12px; }
.cs-lienhe p { font-size: 16.5px; line-height: 1.75; color: #3d3939; margin: 0; }
.cs-lienhe .cs-lienhe-tieude { font-size: 20px; font-weight: 600; color: #1f1d1d; margin-bottom: 6px; }
.cs-lienhe a { color: #1f1d1d; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.footer .copyright .cs-chan { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer .copyright .cs-chan a { color: inherit; opacity: .8; }
.footer .copyright .cs-chan a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 991px) {
  .cs-dau { padding-top: 48px; }
  .cs-dau h1 { font-size: 34px; }
  .cs-luoi { grid-template-columns: 1fr; gap: 0; }
  .cs-mucluc { display: none; }
  .cs-than { padding: 36px 0 72px; }
}
@media (max-width: 576px) {
  .cs-dau h1 { font-size: 29px; }
  .cs-mota { font-size: 16px; }
  .cs-muc h2 { font-size: 21px; }
  .cs-bang { grid-template-columns: 1fr; gap: 2px; }
  .cs-bang strong { margin-bottom: 10px; }
}

/* Trang chinh sach: chua cho thanh menu co dinh o tren, nut chuyen trang gon tren dien thoai */
.cs-dau { padding-top: 150px; }
@media (max-width: 991px) { .cs-dau { padding-top: 120px; } }
@media (max-width: 576px) {
  .cs-dau { padding-top: 112px; }
  .cs-tab { gap: 8px; margin-top: 24px; }
  .cs-tab a { font-size: 14px; padding: 8px 14px; }
}


/* ===== CHAN TRANG LAM LAI (13/09/2026) ===== */
.chan-trang { position: relative; overflow: hidden; color: rgba(255,255,255,.78); padding: 88px 0 0;
  background: radial-gradient(700px 380px at 90% 0%, rgba(254,232,109,.10), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(185,208,239,.10), transparent 60%), #151414; }
.chan-trang::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 85% 10%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 50% 70% at 85% 10%, #000 10%, transparent 70%); }
.chan-trang .container { position: relative; z-index: 1; }
.ct-tren { display: grid; grid-template-columns: 1.5fr .75fr 1fr; gap: 56px; padding-bottom: 64px; }
.ct-logo img { height: 46px; width: auto; opacity: .95; margin: 0 0 22px -4px; }
.ct-cau { font-size: 30px; line-height: 1.3; font-weight: 600; color: #fff; margin: 0 0 12px; max-width: 460px; }
.ct-cau em { font-family: "Lora", Georgia, serif; font-style: italic; color: #fee86d; }
.ct-phu { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.66); margin: 0 0 26px; max-width: 440px; }
.ct-nut { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: #1f1d1d; background: #fee86d; padding: 13px 22px; border-radius: 999px; transition: transform .2s, background .2s; }
.ct-nut:hover { color: #1f1d1d; background: #fff1a6; text-decoration: none; transform: translateY(-2px); }
.ct-cot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }
.ct-tieude { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 6px; }
.ct-cot a { font-size: 15.5px; color: rgba(255,255,255,.82); transition: color .2s; }
.ct-cot a:hover { color: #fee86d; text-decoration: none; }
.ct-lienhe { display: inline-flex; align-items: center; gap: 12px; }
.ct-lienhe svg { flex-shrink: 0; width: 36px; height: 36px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fee86d; }
.ct-gio { font-size: 14px; color: rgba(255,255,255,.45); margin: 4px 0 0; }
.chan-trang .ct-duoi { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.08); background: transparent; }
.chan-trang .ct-duoi .copyright { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; width: 100%; }
.chan-trang .ct-duoi .copyright p { margin: 0; font-size: 14px; color: rgba(255,255,255,.55); }
.chan-trang .ct-duoi .cs-chan { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.chan-trang .ct-duoi .cs-chan a { color: rgba(255,255,255,.6); opacity: 1; font-size: 14px; }
.chan-trang .ct-duoi .cs-chan a:hover { color: #fee86d; text-decoration: none; }
@media (max-width: 991px) {
  .chan-trang { padding-top: 64px; }
  .ct-tren { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding-bottom: 48px; }
  .ct-gioi-thieu { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
  .ct-tren { grid-template-columns: 1fr; }
  .ct-cau { font-size: 25px; }
  .chan-trang .ct-duoi .copyright { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 576px) { .chan-trang .ct-duoi { padding-bottom: 92px; } }

/* Chan trang: cau dai cua Thuy, chu nho lai cho can */
.ct-cau { font-size: 22px; line-height: 1.55; font-weight: 500; max-width: 520px; margin-bottom: 28px; }
@media (max-width: 576px) { .ct-cau { font-size: 19px; } }


/* ===== TRANG LIEN HE (13/09/2026) ===== */
.lh-than { padding: 56px 0 100px; }
.lh-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lh-the { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: #f6f8fb; border-radius: 24px; padding: 30px 28px 28px; color: #1f1d1d; transition: transform .2s, box-shadow .2s; }
.lh-the:hover { color: #1f1d1d; text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.07); }
.lh-icon { width: 48px; height: 48px; border-radius: 14px; background: #fff; color: #2c5a96; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.05); }
.lh-nhan { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8384; }
.lh-giatri { font-size: 21px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.lh-ghichu { font-size: 15px; line-height: 1.65; color: #5a5556; margin-top: 4px; }
.lh-the-nhan { background: linear-gradient(135deg, #fff8d9, #fff1bd); }
.lh-the-nhan .lh-icon { color: #946d00; }
.lh-di { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 600; color: #fff; background: #222; padding: 10px 18px; border-radius: 999px; }
@media (max-width: 991px) { .lh-luoi { grid-template-columns: 1fr; } }