/* ============================================================
   HAPPY SIP — Stylesheet nền tảng
   Công ty TNHH Thương mại Dịch vụ Happy Sip · Nước uống đóng bình / đóng chai
   ------------------------------------------------------------
   Bản RESET: chỉ giữ design tokens + reset + typography + override
   Bootstrap 5 + helper bố cục. CSS thành phần (header, hero, card,
   footer…) sẽ viết mới theo UI HappySip — thêm vào cuối file, mỗi
   thành phần một mục có đánh số.
   Nạp SAU bootstrap.css (xem sources/templates/css.php).
   Font: Be Vietnam Pro (Google Fonts, đủ dấu tiếng Việt).
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
    /* --- Màu thương hiệu — đo trực tiếp từ yeucau/logo.png --- */
    --hs-red:          #ED1C24;   /* chữ "HAPPY SIP" — nhấn, CTA, giá, badge   */
    --hs-red-dark:     #C4141B;   /* hover của đỏ                              */
    --hs-red-soft:     #FDE8E9;   /* nền badge / nền nhấn nhẹ                  */
    --hs-blue:         #0C4DA2;   /* núi trong logo — màu CHÍNH của giao diện  */
    --hs-blue-dark:    #083A7C;   /* hover, footer, nền đậm                    */
    --hs-blue-mid:     #1D58A5;   /* sắc xanh phụ trong logo                   */
    --hs-blue-soft:    #EAF1FB;   /* nền section xen kẽ, nền icon              */
    --hs-sun:          #F06048;   /* cam mặt trời trong logo — điểm nhấn hiếm  */
    --hs-red-rgb:      237, 28, 36;
    --hs-blue-rgb:     12, 77, 162;

    /* --- Trung tính (ngả xanh cho hợp chủ đề nước) --- */
    --hs-ink:          #10233F;   /* tiêu đề, chữ đậm        */
    --hs-gray-700:     #44546A;   /* chữ thân bài            */
    --hs-gray-500: #303133;   /* chữ phụ, mô tả          */
    --hs-gray-300:     #C5D0DD;   /* viền đậm, placeholder   */
    --hs-gray-200:     #E1E8F0;   /* đường kẻ, viền card     */
    --hs-gray-100:     #F4F7FB;   /* nền nhạt                */
    --hs-white:        #FFFFFF;

    /* --- Typography --- */
    --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Merriweather', system-ui, -apple-system, "Segoe UI", Roboto, serif;
    --font-script:  'Dancing Script', 'Inter', cursive;   /* slogan viết tay như nhãn chai */
    --fw-body:      400;
    --fw-medium:    500;
    --fw-heading:   700;

    /* --- Nhịp thiết kế --- */
    --radius:      8px;
    --radius-lg:   16px;
    --radius-pill: 999px;
    --shadow-sm:   0 1px 3px rgba(16, 35, 63, .06), 0 1px 2px rgba(16, 35, 63, .04);
    --shadow:      0 6px 20px rgba(16, 35, 63, .08);
    --shadow-lg:   0 16px 40px rgba(16, 35, 63, .12);
    --container:   1300px;
    --transition:  .25s ease;
    --header-h:    80px;

    /* --- Override biến Bootstrap để .btn-primary, .text-primary… ăn theo brand --- */
    --bs-primary:           var(--hs-blue);
    --bs-primary-rgb:       var(--hs-blue-rgb);
    --bs-danger:            var(--hs-red);
    --bs-danger-rgb:        var(--hs-red-rgb);
    --bs-body-bg:           var(--hs-white);
    --bs-body-color:        var(--hs-gray-700);
    --bs-body-font-family:  var(--font-body);
    --bs-body-font-weight:  var(--fw-body);
    --bs-link-color:        var(--hs-blue);
    --bs-link-color-rgb:    var(--hs-blue-rgb);
    --bs-link-hover-color:  var(--hs-blue-dark);
    --bs-border-color:      var(--hs-gray-200);
    --bs-heading-color:     var(--hs-ink);
}

/* ------------------------------------------------------------
   2. RESET (bổ sung trên Bootstrap reboot)
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    overflow-x: hidden;
}
body { overflow-x: hidden; }
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

body {
    margin: 0;
    background-color: var(--hs-white);
    color: var(--hs-gray-700);
    font-family: var(--font-body);
    font-weight: var(--fw-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg, iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--hs-blue);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--hs-blue-dark); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select { font-family: inherit; font-size: inherit; }

::selection { background: var(--hs-blue); color: #fff; }

:focus-visible {
    outline: 2px solid var(--hs-blue);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 .6em;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    line-height: 1.25;
    color: var(--hs-ink);
}

h1, .h1 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
h3, .h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
h4, .h4 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--hs-gray-200);
    opacity: 1;
    margin: 1.5rem 0;
}

.lead { font-size: 1.05rem; color: var(--hs-gray-500); }

/* Nội dung soạn bằng CKEditor (in qua rte()) — trả lại list/khoảng cách mà reset đã bỏ */
.rte ul, .rte ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte img { height: auto; border-radius: var(--radius); }
.rte table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.rte th, .rte td { padding: 10px 12px; border: 1px solid var(--hs-gray-200); }

/* ------------------------------------------------------------
   4. BRAND UTILITIES
   ------------------------------------------------------------ */
.text-red   { color: var(--hs-red) !important; }
.text-blue  { color: var(--hs-blue) !important; }
.text-ink   { color: var(--hs-ink) !important; }
.text-muted { color: var(--hs-gray-500) !important; }

.bg-red       { background-color: var(--hs-red) !important;       color: #fff; }
.bg-blue      { background-color: var(--hs-blue) !important;      color: #fff; }
.bg-blue-dark { background-color: var(--hs-blue-dark) !important; color: #fff; }
.bg-soft      { background-color: var(--hs-blue-soft) !important; }

/* ------------------------------------------------------------
   5. OVERRIDE COMPONENT BOOTSTRAP
   ------------------------------------------------------------ */
.btn {
    --bs-btn-font-family: var(--font-heading);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-pill);
    padding: 11px 26px;
    font-size: .94rem;
    transition: all var(--transition);
}
.btn-lg { padding: 14px 34px; font-size: 1rem; }
.btn-sm { padding: 8px 18px; font-size: .85rem; }

.btn-primary {
    --bs-btn-bg: var(--hs-blue);
    --bs-btn-border-color: var(--hs-blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--hs-blue-dark);
    --bs-btn-hover-border-color: var(--hs-blue-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--hs-blue-dark);
    --bs-btn-active-border-color: var(--hs-blue-dark);
}

/* Nút kêu gọi hành động (Đặt nước, Gọi ngay…) dùng đỏ thương hiệu */
.btn-danger {
    --bs-btn-bg: var(--hs-red);
    --bs-btn-border-color: var(--hs-red);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--hs-red-dark);
    --bs-btn-hover-border-color: var(--hs-red-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--hs-red-dark);
    --bs-btn-active-border-color: var(--hs-red-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--hs-blue);
    --bs-btn-border-color: var(--hs-blue);
    --bs-btn-hover-bg: var(--hs-blue);
    --bs-btn-hover-border-color: var(--hs-blue);
    --bs-btn-hover-color: #fff;
}

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .6);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: var(--hs-blue);
}

/* --- Form --- */
.form-control,
.form-select {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--hs-gray-200);
    background: var(--hs-gray-100);
    color: var(--hs-ink);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--hs-gray-300); }
.form-control:focus,
.form-select:focus {
    background: #fff;
    border-color: var(--hs-blue);
    box-shadow: 0 0 0 .2rem rgba(var(--hs-blue-rgb), .12);
}
.form-label {
    font-size: .86rem;
    font-weight: var(--fw-medium);
    color: var(--hs-gray-700);
    margin-bottom: .4rem;
}
.form-label .req { color: var(--hs-red); }

/* Thông báo kết quả form AJAX (script.js → HS.ajaxForms) */
.form-msg-box:empty { display: none; }
.form-msg-box { margin-top: 1rem; padding: 10px 14px; border-radius: var(--radius); font-size: .92rem; }
.form-msg-box.ok  { background: #E8F6EE; color: #17693A; }
.form-msg-box.err { background: var(--hs-red-soft); color: var(--hs-red-dark); }

/* --- Phân trang --- */
.pagination { --bs-pagination-color: var(--hs-gray-700); gap: 6px; }
.page-link {
    border-radius: var(--radius);
    border-color: var(--hs-gray-200);
    min-width: 40px;
    text-align: center;
}
.page-item.active .page-link {
    background: var(--hs-blue);
    border-color: var(--hs-blue);
    color: #fff;
}

/* ------------------------------------------------------------
   6. LAYOUT HELPERS
   ------------------------------------------------------------ */
@media (min-width: 1400px) {
    .container { max-width: var(--container); }
}

.section    { position: relative; padding-block: clamp(2.75rem, 6vw, 5rem); }
.section-sm { position: relative; padding-block: clamp(2rem, 4vw, 3rem); }
.section-soft { background: var(--hs-blue-soft); }

/* Nút cuộn lên đầu trang (index.php) — script.js bật class .show khi cuộn */
.scroll-top {
    position: fixed;
    left: 18px;             /* bên phải dành cho nút liên hệ nổi .hs-float */
    bottom: 18px;
    z-index: 990;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--hs-blue);
    color: #fff;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.scroll-top.show { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Ẩn nội dung nhưng vẫn đọc được bằng trình đọc màn hình */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ============================================================
   7. THÀNH PHẦN DÙNG CHUNG
   ============================================================ */
/* Lõi dùng class .swiper-container (Swiper 11 chỉ style .swiper) → tự thêm cắt tràn,
   nếu không slide thừa lòi ra ngoài và gây cuộn ngang trên mobile */
.swiper-container { position: relative; overflow: hidden; }
.hs-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(36px, 6vw, 90px);
    fill: var(--hs-white);
    z-index: 2;
    pointer-events: none;
}

/* Đường chuyển tiếp mềm giữa các section trên trang chủ */
.hs-section-wave {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: clamp(42px, 5vw, 76px);
    pointer-events: none;
}
.hs-section-wave--white {fill: var(--hs-white);}
.hs-section-wave--soft { fill: var(--hs-blue-soft); }
.hs-section-wave--dark { fill: var(--hs-blue-dark); }

.hs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hs-red);
}
.hs-eyebrow::before {
    content: "";
    width: 10px;
    height: 13px;
    background: currentColor;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    clip-path: polygon(50% 0, 100% 62%, 88% 88%, 50% 100%, 12% 88%, 0 62%);
}
.hs-eyebrow--light { color: #fff; }

.hs-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.hs-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.hs-head--row .hs-title { margin-bottom: 0; }
.hs-title {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hs-ink);
    margin-bottom: 30px;
}
.hs-title--sm { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.hs-lead { max-width: 680px; margin-inline: auto; color: var(--hs-gray-500); font-size: 1.02rem; }
.hs-lead p { margin-bottom: .35rem; }
.hs-lead em { font-size: .88em; opacity: .85; }
.hs-head--row .hs-lead { margin-inline: 0; }
.hs-head--light .hs-title,
.hs-head--light .hs-eyebrow { color: #fff; }
.hs-head--light .hs-lead { color: rgba(255, 255, 255, .8); }

.hs-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--hs-blue);
}
.hs-more i { transition: transform var(--transition); }
a:hover .hs-more i, .hs-more:hover i { transform: translateX(4px); }

.hs-chip {
    display: inline-block;
    padding: .32em .9em;
    font-size: .76rem;
    font-weight: 600;
    color: var(--hs-blue);
    background: var(--hs-blue-soft);
    border-radius: var(--radius-pill);
}
a.hs-chip:hover { background: var(--hs-blue); color: #fff; }

.hs-arrows { display: flex; gap: .5rem; }
.hs-arrow {
    width: 46px;
    height: 46px;
    border: 1px solid var(--hs-gray-200);
    border-radius: 50%;
    background: #fff;
    color: var(--hs-blue);
    transition: all var(--transition);
}
.hs-arrow:hover { background: var(--hs-blue); border-color: var(--hs-blue); color: #fff; }
.hs-arrow.swiper-button-disabled { opacity: .4; pointer-events: none; }

.hs-box {
    height: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
}
.hs-box__title {
    font-size: 1.2rem;
    padding-bottom: .9rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--hs-blue-soft);
}

@media (min-width: 992px) {
    .hs-sticky { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* Hiện dần khi cuộn (HS.reveal) */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* Người dùng bật "giảm chuyển động" → bỏ mọi hiệu ứng trượt / phóng */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .hs-hero__content > *, .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   8. TOPBAR + HEADER + MENU
   ============================================================ */
.hs-topbar {
    background: var(--hs-blue-dark);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.hs-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
}
.hs-topbar__left,
.hs-topbar__right { display: flex; align-items: center; gap: 1.25rem; }
.hs-topbar span, .hs-topbar a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; }
.hs-topbar a:hover { color: #fff; }
.hs-topbar i { color: #8FB8EA; font-size: .78rem; }
.hs-topbar__slogan {font-family: var(--font-script);font-size: 20px;color: #fff !important;}
.hs-topbar__slogan i { color: var(--hs-sun) !important; }

/* Chọn ngôn ngữ (topbar + cuối drawer) — markup: _header.php, dữ liệu: hs_lang_links() */
.hs-lang { display: inline-flex; align-items: center; gap: 2px; }
.hs-lang__item {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.6;
    color: inherit;
    opacity: .75;
    transition: background-color var(--transition), opacity var(--transition), color var(--transition);
}
.hs-lang__item:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.hs-lang__item.is-active { opacity: 1; color: #fff; background: rgba(255, 255, 255, .22); }

.hs-lang--drawer { display: flex; gap: 8px; margin-top: 14px; }
.hs-lang--drawer .hs-lang__item {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: .85rem;
    color: var(--hs-ink);
    opacity: 1;
    border: 1px solid var(--hs-gray-200);
    background: #fff;
}
.hs-lang--drawer .hs-lang__item.is-active {
    color: #fff;
    background: var(--hs-blue);
    border-color: var(--hs-blue);
}

.hs-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--transition), border-color var(--transition);
    padding-top: 10px;
    padding-bottom: 10px;
}
.hs-header.scrolled { box-shadow: 0 6px 24px rgba(16, 35, 63, .08); border-color: var(--hs-gray-200); }
.hs-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--header-h);
}
.hs-logo { flex-shrink: 0; }
.hs-logo img {width: auto;height: 75px;}

.hs-nav { flex: 1; display: none; }
.hs-nav__list {display: flex;justify-content: center;gap: 0;}
.hs-nav__item { position: relative; }
.hs-nav__link {
    display: flex;
    align-items: center;
    gap: 15px;
    height: var(--header-h);
    padding: 0 .85rem;
    font-size: 15px;
    font-weight: 900;
    color: var(--hs-ink);
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-heading);
}
.hs-nav__link i { font-size: .62rem; opacity: .6; transition: transform var(--transition); }
.hs-nav__link::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: 18px;
    height: 3px;
    border-radius: 3px;
    background: var(--hs-red);
    transform: scaleX(0);
    transition: transform var(--transition);
}
.hs-nav__item:hover > .hs-nav__link,
.hs-nav__item.is-active > .hs-nav__link { color: var(--hs-blue); }
.hs-nav__item:hover > .hs-nav__link::after,
.hs-nav__item.is-active > .hs-nav__link::after { transform: scaleX(1); }
.hs-nav__item:hover > .hs-nav__link i { transform: rotate(180deg); }

.hs-dropdown,
.hs-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    /* visibility không chuyển tiếp mượt được: đóng thì trễ tới khi mờ xong, mở thì bật ngay */
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.hs-nav__item:hover > .hs-dropdown,
.hs-nav__item:focus-within > .hs-dropdown,
.hs-nav__item:hover > .hs-mega,
.hs-nav__item:focus-within > .hs-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.hs-dropdown { min-width: 240px; padding: .5rem; }
.hs-dropdown a {
    display: block;
    padding: .6rem .9rem;
    border-radius: var(--radius);
    font-size: .92rem;
    color: var(--hs-gray-700);
}
.hs-dropdown a:hover { background: var(--hs-blue-soft); color: var(--hs-blue); }

.hs-mega { width: min(760px, 90vw); padding: 1.1rem; }
.hs-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.hs-mega__card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .6rem;
    border-radius: var(--radius);
    color: var(--hs-ink);
    transition: background var(--transition);
}
.hs-mega__card:hover { background: var(--hs-blue-soft); color: var(--hs-blue); }
.hs-mega__img {
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: .35rem;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--hs-gray-100);
}
.hs-mega__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; }
.hs-mega__card:hover .hs-mega__img img { transform: scale(1.05); }
.hs-mega__name { font-size: .9rem; font-weight: 700; line-height: 1.3; }
.hs-mega__desc { font-size: .78rem; line-height: 1.45; color: var(--hs-gray-500); }
.hs-mega__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--hs-gray-200);
    font-size: .88rem;
    font-weight: 600;
}

.hs-header__actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.hs-header__hotline { display: none; align-items: center; gap: .6rem; color: var(--hs-ink); }
.hs-header__hotline .ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hs-red-soft);
    color: var(--hs-red);
}
.hs-header__hotline small {display: block;font-size: 14px;color: var(--hs-gray-500);line-height: 1.2;}
.hs-header__hotline strong {font-size: 1.2rem;color: var(--hs-red);font-family: var(--font-heading);}
.hs-header__cta {padding: 10px 20px;display: none;}

.hs-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 12px;
    background: var(--hs-blue-soft);
}
.hs-burger span { height: 2px; border-radius: 2px; background: var(--hs-blue); }
.hs-burger span:nth-child(2) { width: 70%; }

@media (min-width: 1200px) {
    .hs-nav { display: block; }
    .hs-burger { display: none; }
}
@media (min-width: 1400px) {
    .hs-header__hotline { display: flex; }
}
@media (max-width: 575.98px) {
    :root { --header-h: 68px; }
    .hs-logo img { height: 46px; }
    .hs-header__cta { padding: 8px 14px; font-size: .85rem; }
    .hs-topbar__left span:not(.hs-topbar__slogan) { display: none; }
}

/* --- Drawer mobile --- */
.hs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateX(105%);
    transition: transform .3s ease;
}
.nav-open .hs-drawer { transform: none; }
.nav-open { overflow: hidden; }
.hs-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(8, 25, 52, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.nav-open .hs-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
.hs-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--hs-gray-200);
}
.hs-drawer__head img { height: 44px; width: auto; }
.hs-drawer__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--hs-gray-100);
    color: var(--hs-ink);
    font-size: 1.1rem;
}
.hs-drawer__list { flex: 1; overflow-y: auto; padding: 8px 0; }
.hs-drawer__list > li { position: relative; border-bottom: 1px solid var(--hs-gray-100); }
.hs-drawer__list > li > a {
    display: block;
    padding: 14px 60px 14px 22px;
    font-weight: 600;
    color: var(--hs-ink);
}
.hs-drawer__list > li.is-active > a { color: var(--hs-blue); }
.hs-drawer__toggle {
    position: absolute;
    top: 6px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hs-gray-500);
}
.hs-drawer__toggle i { transition: transform var(--transition); }
.hs-drawer__list li.is-open > .hs-drawer__toggle i { transform: rotate(180deg); }
.hs-drawer__list li ul { display: none; padding: 0 0 10px 22px; }
.hs-drawer__list li.is-open > ul { display: block; }
.hs-drawer__list li ul a { display: block; padding: 8px 16px; font-size: .92rem; color: var(--hs-gray-700); border-left: 2px solid var(--hs-blue-soft); }
.hs-drawer__foot { padding: 18px; border-top: 1px solid var(--hs-gray-200); background: var(--hs-gray-100); }
.hs-drawer__foot p { margin: .9rem 0 0; font-size: .85rem; color: var(--hs-gray-500); word-break: break-all; }

/* ============================================================
   9. HERO SLIDER + DẢI CAM KẾT
   ============================================================ */
.hs-hero { position: relative; background: var(--hs-blue-dark); }
.hs-hero .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(540px, 80vh, 760px);
    padding-block: 60px 150px;
    overflow: hidden;
}
.hs-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 7s ease;
}
.hs-hero .swiper-slide-active .hs-hero__bg { transform: scale(1); }
.hs-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 30, 66, .9) 0%, rgba(8, 58, 124, .7) 38%, rgba(8, 58, 124, .15) 68%, rgba(8, 58, 124, 0) 100%);
}
.hs-hero .container { position: relative; z-index: 1; }
.hs-hero__content {width: 800px;color: #fff;max-width: 100%;}
.hs-hero__eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
    font-family: var(--font-script);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: #e1e0e0;
    text-shadow: 1px 1px 3px #373434;
}
.hs-hero__title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 76px;
    letter-spacing: -.015em;
    color: #fff;
    margin-bottom: 1.1rem;
    text-wrap: balance;
}
.hs-hero__text { font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(255, 255, 255, .88); margin-bottom: 2rem; max-width: 520px; }
.hs-hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
/* chữ trượt lên khi slide hiện */
.hs-hero__content > * { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .8s ease; }
.hs-hero .swiper-slide-active .hs-hero__content > * { opacity: 1; transform: none; }
.hs-hero .swiper-slide-active .hs-hero__content > :nth-child(2) { transition-delay: .12s; }
.hs-hero .swiper-slide-active .hs-hero__content > :nth-child(3) { transition-delay: .24s; }
.hs-hero .swiper-slide-active .hs-hero__content > :nth-child(4) { transition-delay: .36s; }
.hs-hero__dots.swiper-pagination { bottom: 120px !important; text-align: left; left: 50% !important; transform: translateX(-50%); width: min(1240px, 100% - 24px) !important; padding-inline: 12px; }
.hs-hero__dots .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; opacity: .45; transition: all var(--transition); }
.hs-hero__dots .swiper-pagination-bullet-active { width: 32px; border-radius: 6px; opacity: 1; background: var(--hs-red); }

/* Hero motion layer: tạo cảm giác nước đang chuyển động ngay cả khi chưa có video nền */
.hs-hero__bg { animation: hs-hero-drift 16s ease-in-out infinite alternate; }
.hs-hero__bg::before { content: ""; position: absolute; inset: -12%; background: radial-gradient(circle at 72% 32%, rgba(255,255,255,.22) 0 1px, transparent 2px), radial-gradient(circle at 82% 64%, rgba(255,255,255,.18) 0 2px, transparent 3px), radial-gradient(circle at 58% 70%, rgba(255,255,255,.16) 0 1px, transparent 2px); background-size: 170px 150px, 240px 190px, 120px 180px; animation: hs-bubbles 11s linear infinite; opacity: .72; }
.hs-hero__orb { position:absolute; z-index:1; border:1px solid rgba(255,255,255,.28); border-radius:50%; pointer-events:none; animation: hs-ripple 7s ease-out infinite; }
.hs-hero__orb--one { width: 240px; height: 240px; right: 18%; top: 18%; }
.hs-hero__orb--two { width: 130px; height: 130px; right: 31%; top: 48%; animation-delay: 2.2s; }
.hs-hero__scroll { position:absolute; z-index:3; left:50%; bottom:74px; transform:translateX(-50%); display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.78); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.hs-hero__scroll span { width:1px; height:34px; background:linear-gradient(#fff,transparent); animation: hs-scroll 1.8s ease-in-out infinite; }
@keyframes hs-hero-drift { from { background-position: center center; } to { background-position: 53% 48%; } }
@keyframes hs-bubbles { from { transform: translate3d(0,18px,0); } to { transform: translate3d(-12px,-22px,0); } }
@keyframes hs-ripple { 0%,35% { opacity:0; transform:scale(.72); } 55% { opacity:.55; } 100% { opacity:0; transform:scale(1.18); } }
@keyframes hs-scroll { 0%,100% { opacity:.3; transform:scaleY(.7); transform-origin:top; } 50% { opacity:1; transform:scaleY(1); } }

@media (max-width: 767.98px) {
    .hs-hero .swiper-slide { min-height: 560px; padding-block: 48px 140px; align-items: flex-end; }
    .hs-hero__bg::after { background: linear-gradient(0deg, rgba(6, 30, 66, .95) 0%, rgba(8, 58, 124, .75) 55%, rgba(8, 58, 124, .25) 100%); }
    .hs-hero__dots.swiper-pagination { bottom: 104px !important; }
    .hs-hero__scroll { display:none; }
    .hs-hero__orb--one { width:140px; height:140px; right:8%; top:22%; }
    .hs-hero__orb--two { width:80px; height:80px; right:28%; top:48%; }
}

.hs-usp {position: relative;z-index: 3;margin-top: 15px;padding-bottom: 50px;}
.hs-usp__item {
    height: 100%;
    padding: 1.4rem 1.25rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 40px rgba(12, 77, 162, .12);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.hs-usp__item:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(12, 77, 162, .18); }
.hs-usp__icon {
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--hs-blue-soft);
    font-size: 1.5rem;
    color: var(--hs-blue);
}
.hs-usp__icon img {width: 70px;height: 70px;object-fit: contain;}
.hs-usp__item h3 {font-size: 1.02rem;margin-bottom: 15px;color: var(--hs-ink);}
.hs-usp__item p {font-size: 15px;line-height: 1.55;color: var(--hs-gray-500);margin: 0;font-weight: 500;}
@media (max-width: 575.98px) {
    .hs-usp { margin-top: -70px; }
    .hs-usp__item { padding: 1rem .8rem; }
    .hs-usp__item p { display: none; }
    .hs-usp__icon { width: 52px; height: 52px; }
    .hs-usp__icon img { width: 32px; height: 32px; }
    .hs-usp__item h3 { font-size: .9rem; margin: 0; }
}

/* ============================================================
   10. TRANG CHỦ — NHÓM SẢN PHẨM, GIỚI THIỆU, SẢN PHẨM, DỊCH VỤ
   ============================================================ */
.hs-cat {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: inherit;
    transition: all var(--transition);
}
.hs-cat:hover { border-color: rgba(var(--hs-blue-rgb), .35); box-shadow: var(--shadow-lg); transform: translateY(-6px); color: inherit; }
.hs-cat__img {
    display: block;
    aspect-ratio: 1;
    padding: 1rem;
    background: radial-gradient(circle at 50% 60%, var(--hs-blue-soft) 0 55%, #fff 56%);
}
.hs-cat__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s ease; }
.hs-cat:hover .hs-cat__img img { transform: scale(1.06); }
.hs-cat__body {display: flex;flex-direction: column;flex: 1;padding: 0px 1.25rem 1.3rem;text-align: center;}
.hs-cat__body h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.hs-cat__body p { font-size: .88rem; color: var(--hs-gray-500); margin-bottom: .9rem; }
.hs-cat__body .hs-more { margin-top: auto; justify-content: center; }
@media (max-width: 575.98px) {
    .hs-cat__body { padding: 0 .8rem 1rem; }
    .hs-cat__body p { display: none; }
    .hs-cat__body h3 { font-size: .95rem; }
}

.hs-about {
    position: relative;
    overflow: hidden;
    padding-block: clamp(5rem, 8vw, 8rem);
    background: #f5faff;
    padding-bottom: 170px;
    padding-top: 70px;
}
.hs-about::before {
    content: "";
    position: absolute;
    right: -130px;
    top: -220px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 90px solid rgba(var(--hs-blue-rgb), .055);
    pointer-events: none;
}
.hs-about__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
    align-items: center;
    min-height: 630px;
}
.hs-about__media {
    position: relative;
    min-height: 630px;
    overflow: hidden;
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(8, 52, 105, .18);
}
.hs-about__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 34, 73, .18), transparent 56%);
    pointer-events: none;
}
.hs-about__media img {
    width: 100%;
    height: 630px;
    object-fit: cover;
    transition: transform .8s ease;
}
.hs-about__stage:hover .hs-about__media img { transform: scale(1.025); }
.hs-about__watermark {
    position: absolute;
    left: 34px;
    bottom: 22px;
    z-index: 1;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(2.2rem, 4.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .13em;
    text-shadow: 0 6px 28px rgba(3, 34, 72, .3);
}
.hs-about__panel {
    position: relative;
    z-index: 2;
    margin-left: -88px;
    padding: clamp(2.2rem, 4vw, 4.2rem);
    background: rgba(255, 255, 255, .97);
    border-top: 5px solid var(--hs-red);
    border-radius: 3px 32px 32px 3px;
    box-shadow: 0 30px 70px rgba(6, 42, 86, .18);
}
.hs-about__panel::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: 30px;
    width: 64px;
    height: 1px;
    background: var(--hs-blue);
    box-shadow: 0 7px 0 rgba(var(--hs-blue-rgb), .32), 0 14px 0 rgba(var(--hs-blue-rgb), .14);
}
.hs-about__index {
    position: absolute;
    top: 22px;
    right: 30px;
    color: rgba(var(--hs-blue-rgb), .08);
    font-size: 5.6rem;
    font-weight: 800;
    line-height: 1;
}
.hs-about__panel .hs-title {
    position: relative;
    max-width: 610px;
    margin-bottom: 1.2rem;
    font-size: clamp(2.15rem, 1.5vw, 2rem);
    line-height: 50px;
}
.hs-about__text {
    max-width: 620px;
    margin-bottom: 1.45rem;
    color: var(--hs-gray-700);
    font-size: 1.02rem;
    line-height: 1.8;
}
.hs-about__text > :last-child { margin-bottom: 0; }
.hs-about__trust {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: fit-content;
    margin-bottom: 1.55rem;
    padding: 1rem 1.2rem 1rem 0;
    border-block: 1px solid var(--hs-gray-200);
}
.hs-about__trust .ic {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--hs-blue-soft);
    color: var(--hs-blue);
    font-size: 1.25rem;
}
.hs-about__trust strong { display: block; color: var(--hs-ink); font-size: 1.12rem; line-height: 1.2; }
.hs-about__trust small { display: block; margin-top: .2rem; color: var(--hs-gray-500); font-size: .78rem; }
.hs-about__cta { min-width: 165px; }
.hs-about__water-edge {
    position: absolute;
    left: 0;
    bottom: -10px;
    z-index: 4;
    width: 100%;
    /* height: clamp(150px, 16vw, 230px); */
    object-fit: fill;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
@media (max-width: 991.98px) {
    .hs-about__stage { grid-template-columns: 1fr; min-height: 0; }
    .hs-about__media { min-height: 470px; border-radius: 28px 28px 0 0; }
    .hs-about__media img { height: 470px; }
    .hs-about__panel { margin: -54px 28px 0; border-radius: 24px; }
}
@media (max-width: 575.98px) {
    .hs-about { padding-block: 4.2rem 5rem; }
    .hs-about__media { min-height: 340px; }
    .hs-about__media img { height: 340px; }
    .hs-about__watermark { left: 18px; bottom: 70px; font-size: 2rem; }
    .hs-about__panel { margin: -42px 12px 0; padding: 2rem 1.35rem 2.2rem; border-radius: 20px; }
    .hs-about__index { top: 18px; right: 18px; font-size: 4rem; }
    .hs-about__panel .hs-title { font-size: 2rem; }
    .hs-about__text { font-size: .95rem; line-height: 1.7; }
    .hs-about__panel::after { display: none; }
    .hs-about__water-edge { height: 125px; }
}

.hs-prod {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}
.hs-prod:hover { box-shadow: var(--shadow-lg); border-color: rgba(var(--hs-blue-rgb), .3); transform: translateY(-4px); }
.hs-prod__img { position: relative; display: block; aspect-ratio: 1; background: #fff; }
.hs-prod__img img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; transition: transform .45s ease; }
.hs-prod:hover .hs-prod__img img { transform: scale(1.05); }
.hs-prod__code {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: .2em .7em;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--hs-blue);
    background: var(--hs-blue-soft);
    border-radius: var(--radius-pill);
}
.hs-prod__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--hs-gray-100); }
.hs-prod__name { font-size: 1rem; line-height: 1.4; margin-bottom: .35rem; }
.hs-prod__name a { color: var(--hs-ink); }
.hs-prod__name a:hover { color: var(--hs-blue); }
.hs-prod__desc { font-size: .84rem; line-height: 1.55; color: var(--hs-gray-500); margin-bottom: .9rem; }
.hs-prod__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.hs-prod__price { font-size: .84rem; color: var(--hs-gray-500); }
.hs-prod__price strong { color: var(--hs-red); font-size: 1rem; }
.hs-prod .btn-sm { padding: 7px 14px; font-size: .8rem; }
@media (max-width: 575.98px) {
    .hs-prod__body { padding: .8rem; }
    .hs-prod__name { font-size: .9rem; }
    .hs-prod__desc { display: none; }
    .hs-prod__foot .btn { width: 100%; }
}
.hs-featured .swiper-slide { height: auto; }

.hs-svc {
    position: relative;
    display: block;
    height: 100%;
    min-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}
.hs-svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.hs-svc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 58, 124, 0) 30%, rgba(6, 30, 66, .92) 100%);
    transition: background var(--transition);
}
.hs-svc:hover { color: #fff; }
.hs-svc:hover img { transform: scale(1.07); }
.hs-svc:hover::after { background: linear-gradient(180deg, rgba(12, 77, 162, .2) 0%, rgba(6, 30, 66, .95) 100%); }
.hs-svc__num {
    position: absolute;
    top: 16px;
    left: 18px;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.hs-svc__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; }
.hs-svc__body h3, .hs-svc__body h2 { font-size: 1.2rem; color: #fff; margin-bottom: .4rem; }
.hs-svc__body p { font-size: .87rem; color: rgba(255, 255, 255, .85); margin-bottom: .75rem; }
.hs-svc .hs-more { color: #fff; }
@media (max-width: 575.98px) { .hs-svc { min-height: 300px; } }

/* ============================================================
   11. QUY TRÌNH, VÌ SAO CHỌN, ĐẠI LÝ, ĐỐI TÁC
   ============================================================ */
.hs-process {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: var(--hs-blue-dark);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hs-process--wave-top {
    margin-top: -1px;
    padding-top: clamp(5rem, 8vw, 7rem);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 58 C180 103 345 17 545 52 C760 90 917 20 1098 48 C1245 70 1347 64 1440 32 L1440 1000 L0 1000 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 58 C180 103 345 17 545 52 C760 90 917 20 1098 48 C1245 70 1347 64 1440 32 L1440 1000 L0 1000 Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}
.hs-process__bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; opacity: .3; }
.hs-process__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: .48;
}
.hs-process::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at top, rgba(29, 88, 165, .28), transparent 60%), linear-gradient(180deg, rgba(8, 58, 124, .65), rgba(6, 30, 66, .88));
}

@media (prefers-reduced-motion: reduce) {
    .hs-process__video { display: none; }
}
.hs-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    counter-reset: step;
}
.hs-steps::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 8px, transparent 8px 16px);
}
.hs-steps__item { position: relative; text-align: center; }
.hs-steps__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #fff;
    color: var(--hs-blue);
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .12);
    transition: all var(--transition);
}
.hs-steps__item:hover .hs-steps__num { background: var(--hs-red); color: #fff; box-shadow: 0 0 0 10px rgba(var(--hs-red-rgb), .25); }
.hs-steps__item h3 { font-size: 1rem; color: #fff; margin-bottom: .4rem; }
.hs-steps__item p { font-size: .84rem; color: rgba(255, 255, 255, .75); margin: 0; }
@media (max-width: 991.98px) {
    .hs-steps { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
    .hs-steps::before { display: none; }
}
@media (max-width: 575.98px) {
    .hs-steps { grid-template-columns: 1fr; gap: 0; }
    .hs-steps__item { display: grid; grid-template-columns: 56px 1fr; gap: 0 1rem; text-align: left; padding-bottom: 1.4rem; }
    .hs-steps__item::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; border-left: 2px dashed rgba(255, 255, 255, .35); }
    .hs-steps__item:last-child::before { display: none; }
    .hs-steps__num { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 1.15rem; }
    .hs-steps__item h3 { margin-top: .6rem; }
}

.hs-why__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; }
.hs-why__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    border-radius: 18px;
    background: var(--hs-blue-soft);
    font-size: 1.4rem;
    color: var(--hs-blue);
    transition: all var(--transition);
}
.hs-why__icon img {width: 70px;height: 70px;object-fit: contain;}
.hs-why__item:hover .hs-why__icon { background: #fff; box-shadow: var(--shadow); transform: rotate(-6deg); }
.hs-why__item h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.hs-why__item p { font-size: .88rem; color: var(--hs-gray-500); margin: 0; }
@media (min-width: 992px) {
    .hs-why__item.is-left { flex-direction: row-reverse; text-align: right; }
}
.hs-why__visual {
    position: relative;
    max-width: 380px;
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 40%, var(--hs-blue-soft) 41% 64%, rgba(var(--hs-blue-rgb), .08) 65% 100%);
}
.hs-why__visual::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px dashed rgba(var(--hs-blue-rgb), .25);
    animation: hs-spin 40s linear infinite;
}
.hs-why__visual img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hs-why__visual::after { animation: none; } }

.hs-dealer__media { position: relative; }
.hs-dealer__media::before {
    content: "";
    position: absolute;
    inset: 24px -24px -24px 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--hs-blue), var(--hs-blue-mid));
    opacity: .12;
}
.hs-dealer__media img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
.hs-benefit {
    display: flex;
    gap: .8rem;
    height: 100%;
    padding: 1rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--hs-gray-200);
}
.hs-benefit > i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hs-red-soft);
    color: var(--hs-red);
}
.hs-benefit h3 { font-size: .95rem; margin-bottom: .2rem; }
.hs-benefit p { font-size: .82rem; color: var(--hs-gray-500); margin: 0; }

.hs-partner__logo { display: grid; place-items: center; height: 90px; padding: 1rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--hs-gray-200); }
.hs-partner__logo img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .7; transition: all var(--transition); }
.hs-partner__logo:hover img { filter: none; opacity: 1; }

/* ============================================================
   12. TIN TỨC
   ============================================================ */
.hs-news {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}
.hs-news:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.hs-news__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.hs-news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hs-news:hover .hs-news__img img { transform: scale(1.06); }
.hs-news__date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    padding: .35rem .5rem;
    background: #fff;
    border-radius: 12px;
    font-size: .72rem;
    color: var(--hs-gray-500);
    line-height: 1.2;
    box-shadow: var(--shadow);
}
.hs-news__date strong { font-size: 1.3rem; color: var(--hs-blue); }
.hs-news__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.3rem 1.4rem; }
.hs-news__body h3 { font-size: 1.08rem; line-height: 1.45; margin-bottom: .5rem; }
.hs-news__body h3 a { color: var(--hs-ink); }
.hs-news__body h3 a:hover { color: var(--hs-blue); }
.hs-news__body p { font-size: .88rem; color: var(--hs-gray-500); margin-bottom: 1rem; }
.hs-news__body .hs-more { margin-top: auto; }

.hs-lead-post {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    margin-bottom: 2rem;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: 24px;
    overflow: hidden;
    color: inherit;
    transition: box-shadow var(--transition);
}
.hs-lead-post:hover { box-shadow: var(--shadow-lg); color: inherit; }
.hs-lead-post__img { display: block; min-height: 320px; overflow: hidden; }
.hs-lead-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hs-lead-post:hover .hs-lead-post__img img { transform: scale(1.04); }
.hs-lead-post__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .75rem; padding: clamp(1.5rem, 4vw, 3rem); }
.hs-lead-post__body h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0; }
.hs-lead-post__body p { color: var(--hs-gray-500); margin: 0; }
.hs-lead-post__meta { font-size: .85rem; color: var(--hs-gray-500); }
@media (max-width: 767.98px) {
    .hs-lead-post { grid-template-columns: 1fr; }
    .hs-lead-post__img { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ============================================================
   13. CTA ĐẶT NƯỚC + FORM
   ============================================================ */
.hs-cta {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: var(--hs-blue-dark);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hs-cta__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center right; }
.hs-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 30, 66, .92) 0%, rgba(8, 58, 124, .7) 55%, rgba(8, 58, 124, .35) 100%); }
.hs-cta__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 1rem; }
.hs-cta__text { color: rgba(255, 255, 255, .85); margin-bottom: 1.4rem; }
.hs-cta__list { display: grid; gap: .7rem; margin-bottom: 1.6rem; }
.hs-cta__list li { display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .92); }
.hs-cta__list i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: .85rem; }
.hs-cta__phone { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.5rem; font-weight: 800; color: #fff; }
.hs-cta__phone i { color: #FFD9CF; }
.hs-cta__card {
    padding: clamp(1.4rem, 3vw, 2rem);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
    color: var(--hs-gray-700);
}
.hs-cta__card h3 { font-size: 1.2rem; margin-bottom: 1.1rem; }

.hs-form .form-label { margin-bottom: .3rem; }
.hs-form .form-control, .hs-form .form-select { background-color: var(--hs-gray-100); }
.hs-form .form-select { padding-right: 2.5rem; }
.hs-form textarea.form-control { resize: vertical; min-height: 110px; }
.hs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hs-form__note { margin: .8rem 0 0; font-size: .8rem; color: var(--hs-gray-500); }
.hs-form--compact .form-label { font-size: .82rem; }

/* ============================================================
   14. FOOTER + NÚT NỔI
   ============================================================ */
.hs-footer {
    position: relative;
    margin-top: 70px;
    padding: 30px 0 0;
    background-color: var(--hs-blue-dark);
    background-image:
        linear-gradient(90deg, rgba(6, 30, 66, .94), rgba(8, 58, 124, .84) 50%, rgba(6, 30, 66, .94)),
        url('../../img_data/images/footer-bg-happysip.webp');
    background-position: center, center bottom;
    background-size: cover, cover;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, .75);
    font-size: .92rem;
}
/* Trang kết thúc bằng khối nền đậm (CTA trang chủ, bản đồ liên hệ) → footer nối liền, bỏ sóng */
main:has(> .hs-cta:last-child) + .hs-footer,
main:has(> .hs-map:last-child) + .hs-footer { margin-top: 0; }
.hs-footer__wave { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: 70px; fill: var(--hs-blue-dark); margin-bottom: -1px; }
main:has(> .hs-cta:last-child) + .hs-footer .hs-footer__wave,
main:has(> .hs-map:last-child) + .hs-footer .hs-footer__wave { display: none; }
.hs-footer .container > .row { padding-block: 2.5rem 2rem; }
.hs-footer h4 { position: relative; font-size: 1.05rem; color: #fff; margin-bottom: 1.2rem; padding-bottom: .7rem; }
.hs-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: var(--hs-red); }
.hs-footer a { color: rgba(255, 255, 255, .78); }
.hs-footer a:hover { color: #fff; }
.hs-footer__logo { display: inline-block; padding: 10px 16px; margin-bottom: 1.1rem; background: #fff; border-radius: 16px; }
.hs-footer__logo img { height: 60px; width: auto; }
.hs-footer__rte p { margin-bottom: .6rem; }
.hs-footer__rte strong { color: #fff; font-family: var(--font-script); font-size: 1.3rem; font-weight: 700; }
.hs-footer__social { display: flex; gap: .5rem; margin-top: 1rem; }
.hs-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.hs-footer__social a:hover { background: var(--hs-red); }
.hs-footer__links ul, ul.hs-footer__links { display: grid; gap: .6rem; }
.hs-footer__links a { display: flex; align-items: flex-start; gap: .45rem; line-height: 1.5; }
.hs-footer__links a::before { content: "\f054"; flex-shrink: 0; margin-top: .45em; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .6rem; color: #8FB8EA; }
.hs-footer__contact { display: grid; gap: .8rem; }
.hs-footer__contact li { display: flex; gap: .75rem; }
.hs-footer__contact i { margin-top: .3rem; color: #8FB8EA; width: 16px; text-align: center; }
.hs-footer__contact a { word-break: break-all; }
.hs-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    flex-wrap: wrap;
    padding-block: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .84rem;
}
.hs-footer__bottom a { color: inherit; opacity: .85; }
.hs-footer__bottom a:hover { opacity: 1; color: #fff; text-decoration: underline; }

@media (max-width: 767.98px) {
    .hs-footer {
        background-position: center, 68% bottom;
        background-size: cover, auto 100%;
    }
}

.hs-float { position: fixed; right: 16px; bottom: 18px; z-index: 990; display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; }
.hs-float__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 63, .25);
    transition: transform var(--transition), box-shadow var(--transition);
}
.hs-float__btn:hover { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 13px 30px rgba(16, 35, 63, .3); }
.hs-float__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hs-float__btn img {display: block;width: 30px;height: 30px;object-fit: contain;}
.hs-float__btn i { font-size: 1.3rem; }
.hs-float__btn.is-phone { background: #16A34A; }
.hs-float__btn.is-zalo  { background: #0068FF; }
.hs-float__btn.is-mess  {background: #0a58c3;}
.hs-float__btn.is-order {
    width: auto;
    padding-inline: 18px;
    gap: .55rem;
    border-radius: var(--radius-pill);
    background: var(--hs-red);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    animation: hs-pulse 2.4s ease-out infinite;
}
@keyframes hs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--hs-red-rgb), .45), 0 10px 26px rgba(16, 35, 63, .25); }
    70%  { box-shadow: 0 0 0 16px rgba(var(--hs-red-rgb), 0), 0 10px 26px rgba(16, 35, 63, .25); }
    100% { box-shadow: 0 0 0 0 rgba(var(--hs-red-rgb), 0), 0 10px 26px rgba(16, 35, 63, .25); }
}
@media (prefers-reduced-motion: reduce) { .hs-float__btn.is-order { animation: none; } }

/* ============================================================
   15. TRANG CON: BANNER, NỘI DUNG, SIDEBAR
   ============================================================ */
.hs-page-hero {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4.5rem, 8vw, 6.5rem);
    background: var(--hs-blue-dark);
    color: #fff;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.hs-page-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hs-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 30, 66, .78), rgba(8, 58, 124, .7)); }
.hs-page-hero__title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; color: #fff; margin: 0 auto .9rem; max-width: 900px; text-wrap: balance; }
.hs-crumb { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: .88rem; }
.hs-crumb li { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .9); }
.hs-crumb li + li::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .6rem; opacity: .6; }
.hs-crumb a { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .75); }
.hs-crumb a:hover { color: #fff; }

.hs-page { padding-top: clamp(2rem, 4vw, 3rem); }
.hs-page__lead { font-size: 1.1rem; color: var(--hs-ink); font-weight: 500; }
.hs-page__media { margin: 0; }
.hs-page__media img { width: 100%; border-radius: 20px; box-shadow: var(--shadow); }
.hs-article .rte { font-size: 1.02rem; }
.rte h2 { font-size: 1.45rem; margin-top: 1.8rem; }
.rte h3 { font-size: 1.2rem; margin-top: 1.4rem; }
.rte a { text-decoration: underline; text-underline-offset: 3px; }
.rte li { margin-bottom: .35rem; }
.rte ul li::marker { color: var(--hs-blue); }
.rte em { color: var(--hs-gray-500); }
.hs-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: 1.25rem; font-size: .86rem; color: var(--hs-gray-500); }
.hs-article__meta i { margin-right: .35rem; color: var(--hs-blue); }
.hs-article__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hs-gray-200); }
.hs-share { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--hs-gray-500); }
.hs-share a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hs-blue-soft); color: var(--hs-blue); }
.hs-share a:hover { background: var(--hs-blue); color: #fff; }

.hs-side-nav {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
}
.hs-side-nav h3 { font-size: 1.05rem; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 2px solid var(--hs-blue-soft); }
.hs-side-nav ul { display: grid; gap: .3rem; }
.hs-side-nav li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-radius: var(--radius);
    font-weight: 500;
    color: var(--hs-gray-700);
}
.hs-side-nav li a i { font-size: .65rem; opacity: .5; }
.hs-side-nav li a:hover { background: var(--hs-blue-soft); color: var(--hs-blue); }
.hs-side-nav li.is-active a { background: var(--hs-blue); color: #fff; }
.hs-mini-post { display: flex; gap: .8rem; align-items: center; padding: .6rem 0; color: var(--hs-ink); }
.hs-mini-post + .hs-mini-post { border-top: 1px dashed var(--hs-gray-200); }
.hs-mini-post img { width: 76px; height: 60px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.hs-mini-post strong { display: block; font-size: .88rem; line-height: 1.4; font-weight: 600; }
.hs-mini-post small { font-size: .76rem; color: var(--hs-gray-500); }
.hs-mini-post:hover strong { color: var(--hs-blue); }

.hs-side-cta {
    position: relative;
    padding: 1.6rem 1.4rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--hs-blue) 0%, var(--hs-blue-dark) 100%);
    color: rgba(255, 255, 255, .85);
    overflow: hidden;
}
.hs-side-cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.hs-side-cta__icon { width: 64px; height: 64px; padding: 10px; margin-bottom: .8rem; border-radius: 16px; background: #fff; }
.hs-side-cta h3 { font-size: 1.2rem; color: #fff; }
.hs-side-cta p { font-size: .88rem; }
.hs-side-cta__phone { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: .9rem; font-weight: 600; color: #fff; font-size: .9rem; word-break: break-all; }
.hs-side-cta__phone:hover { color: #FFD9CF; }

.hs-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.hs-tabs a {
    padding: .55rem 1.15rem;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    color: var(--hs-gray-700);
}
.hs-tabs a:hover { border-color: var(--hs-blue); color: var(--hs-blue); }
.hs-tabs a.is-active { background: var(--hs-blue); border-color: var(--hs-blue); color: #fff; }
.hs-intro { margin-bottom: 1.5rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--hs-blue); border-radius: 0 var(--radius) var(--radius) 0; background: var(--hs-blue-soft); }
.hs-intro p:last-child, .hs-intro .rte > :last-child { margin-bottom: 0; }
.hs-count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: var(--hs-gray-500);
}
.hs-count strong { color: var(--hs-ink); }
.hs-count__page { margin-left: auto; }

/* Sơ đồ website — markup: sources/sitemap.php */
.hs-sitemap__group {
    height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius);
    background: #fff;
}
.hs-sitemap__group h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.hs-sitemap__group h2 a { color: var(--hs-blue); }
.hs-sitemap__sub {
    margin: 1rem 0 .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hs-gray-500);
}
.hs-sitemap__list { margin: .75rem 0 0; padding: 0; list-style: none; }
.hs-sitemap__list li { position: relative; padding: 4px 0 4px 16px; }
.hs-sitemap__list li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hs-gray-300, #C9D2DE);
}
.hs-sitemap__list a { color: var(--hs-ink); }
.hs-sitemap__list a:hover { color: var(--hs-blue); }
.hs-sitemap__list--item { font-size: .9rem; }
.hs-sitemap__list--item a { color: var(--hs-gray-500); }
.hs-sitemap__xml {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 2.5rem 0 0;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--hs-blue-soft);
    font-size: .88rem;
    color: var(--hs-gray-500);
}
.hs-sitemap__xml i { color: var(--hs-blue); }

/* Phân trang — markup: sources/module/pagination.php */
.hs-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 2.5rem;
}
.hs-pager__num,
.hs-pager__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .6rem;
    border: 1px solid var(--hs-gray-200);
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    color: var(--hs-ink);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.hs-pager__num:hover,
.hs-pager__nav:hover {
    border-color: var(--hs-blue);
    color: var(--hs-blue);
    background: var(--hs-blue-soft);
}
.hs-pager__num.is-active {
    border-color: var(--hs-blue);
    background: var(--hs-blue);
    color: #fff;
}
.hs-pager__nav.is-disabled {
    opacity: .4;
    background: var(--hs-gray-100);
    pointer-events: none;
}
.hs-pager__dots { padding: 0 .2rem; color: var(--hs-gray-500); }

/* ============================================================
   16. CHI TIẾT SẢN PHẨM
   ============================================================ */
.hs-gallery__main,
.hs-gallery .mySwiper2 {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border: 1px solid var(--hs-gray-200);
    border-radius: 24px;
    background: radial-gradient(circle at 50% 55%, var(--hs-blue-soft) 0 48%, #fff 49%);
    overflow: hidden;
}
.hs-gallery__main img, .hs-gallery .mySwiper2 img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4%; }
.hs-gallery__zoom { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--hs-blue); box-shadow: var(--shadow); }
.hs-gallery .mySwiper { margin-top: .75rem; }
.hs-gallery .mySwiper .swiper-slide { aspect-ratio: 1; border: 2px solid var(--hs-gray-200); border-radius: 12px; overflow: hidden; cursor: pointer; opacity: .6; }
.hs-gallery .mySwiper .swiper-slide-thumb-active { border-color: var(--hs-blue); opacity: 1; }
.hs-gallery .mySwiper img { width: 100%; height: 100%; object-fit: contain; }

.hs-pd__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: .75rem 0 .75rem; }
.hs-pd__desc { font-size: 1.05rem; color: var(--hs-gray-700); }
.hs-pd__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1.25rem 0; }
.hs-pd__meta li { padding: .7rem .9rem; border-radius: var(--radius); background: var(--hs-gray-100); }
.hs-pd__meta span { display: block; font-size: .76rem; color: var(--hs-gray-500); }
.hs-pd__meta strong { font-size: .95rem; color: var(--hs-ink); }
.hs-pd__price {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: .2rem 1rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
    border: 1px dashed rgba(var(--hs-red-rgb), .45);
    border-radius: var(--radius);
    background: var(--hs-red-soft);
}
.hs-pd__price span { font-size: .85rem; color: var(--hs-gray-700); }
.hs-pd__price strong { font-size: 1.5rem; color: var(--hs-red); }
.hs-pd__price small { grid-column: 1 / -1; font-size: .8rem; color: var(--hs-gray-500); }
.hs-pd__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.hs-pd__perks { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hs-gray-200); font-size: .88rem; font-weight: 500; }
.hs-pd__perks i { margin-right: .45rem; color: var(--hs-blue); }

.hs-spec { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hs-spec th, .hs-spec td { padding: .8rem .9rem; border-bottom: 1px solid var(--hs-gray-200); vertical-align: top; }
.hs-spec tr:nth-child(odd) { background: var(--hs-gray-100); }
.hs-spec th { width: 42%; font-weight: 600; color: var(--hs-ink); }

.hs-order {
    margin-top: 3rem;
    padding: clamp(1.4rem, 4vw, 2.6rem);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--hs-blue-soft), #fff 70%);
    border: 1px solid var(--hs-gray-200);
    scroll-margin-top: calc(var(--header-h) + 20px);
}
.hs-order__img { max-width: 220px; margin-top: 1rem; mix-blend-mode: multiply; }

/* ============================================================
   17. LIÊN HỆ + 404
   ============================================================ */
.hs-contact__list { display: grid; gap: .8rem; margin: 1.5rem 0 2rem; }
.hs-contact__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--hs-ink);
    transition: all var(--transition);
}
a.hs-contact__item:hover { border-color: var(--hs-blue); box-shadow: var(--shadow); color: var(--hs-ink); }
.hs-contact__item .ic { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hs-blue-soft); color: var(--hs-blue); font-size: 1.1rem; }
.hs-contact__item small { display: block; font-size: .76rem; color: var(--hs-gray-500); }
.hs-contact__item strong { font-size: .95rem; font-weight: 600; word-break: break-word; }
.hs-contact__help h3 { font-size: 1.02rem; }
.hs-contact__help ul { display: grid; gap: .55rem; }
.hs-contact__help li { display: flex; align-items: center; gap: .7rem; font-size: .92rem; }
.hs-contact__help i { width: 20px; color: var(--hs-red); text-align: center; }
.hs-contact__form { box-shadow: var(--shadow); }
.hs-map { line-height: 0; }
.hs-map iframe { width: 100%; height: 420px; border: 0; }

.hs-404 { padding-block: clamp(3rem, 8vw, 6rem); }
.hs-404__icon { width: 96px; margin: 0 auto 1rem; }
.hs-404__code { font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--hs-blue); letter-spacing: -.03em; }
.hs-404 .hs-tabs { margin-bottom: 0; }
.hs-footer .hs-footer__wave{
    fill: #ffffff;
    top: -21px;
    transform: rotatex(180deg);
}
.hs-footer h4{
    margin-top: 50px;
}
@media (max-width: 575.98px) {
    .hs-header__hotline{
        display: flex;
    }
    .hs-header__hotline strong{
        font-size: 14px;
    }
    .hs-footer h4{
        margin-top: 0px;
    }
    .hs-hero__title{
        line-height: 42px;
    }
    .btn-lg{
        padding: 10px 20px;
        font-size: 14px;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .hs-header__hotline{
        display: flex;
    }
    .container{
        max-width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hs-header__cta{
        display: block;
    }
    .hs-header__hotline{
        display: flex;
    }
    .container{
        max-width: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    .hs-header__cta{
        display: block;
    }
    .hs-header__hotline{
        display: flex;
    }
    .container{/mo
        max-width: 100%;
    }
}
@media (min-width: 1025px) and (max-width: 1199.98px) {
    .container{
        max-width: 100%;
    }
    .hs-header__hotline{
        display: flex;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container{
        max-width: 1300px;
    }
    .hs-header__hotline{
        display: flex;
    }
}
@media (min-width: 1400px) {
    .container{
    }
}