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

        :root {
            --green:       var(--primary);
            --green-dark:  var(--primary-dark);
            --green-deep:  var(--primary-deep);
            --green-light: var(--primary-light);
            --green-mid:   var(--primary-mid);
            --yellow:      var(--accent);
            --orange:      #f97316;
            --white:       #ffffff;
            --off-white:   #f7f9fc;
            --gray-100:    #f0f4f8;
            --gray-200:    #dde4f0;
            --gray-400:    #8fa0b8;
            --gray-500:    #4a5e80;
            --gray-700:    #1e3557;
            --gray-900:    #0f1e36;
            --font-head:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-body:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body { font-family: var(--font-body); color: var(--gray-900); background: var(--white); line-height: 1.6; overflow-x: hidden; }

        /* ══ TOP BAR ══ */
        .top-bar {
            background: var(--green-dark);
            color: rgba(255,255,255,0.85);
            font-size: 0.8rem;
            padding: 0.5rem 0;
        }
        .top-bar-inner {
            max-width: 1280px; margin: 0 auto; padding: 0 2rem;
            display: flex; justify-content: space-between; align-items: center;
        }
        .top-bar-left { display: flex; gap: 2rem; }
        .top-bar-item { display: flex; align-items: center; gap: 0.4rem; }
        .top-bar-right { display: flex; align-items: center; gap: 1.5rem; }
        .hotline-pill {
            background: var(--yellow); color: var(--gray-900);
            padding: 0.22rem 1rem; border-radius: 20px;
            font-weight: 700; font-size: 0.8rem; text-decoration: none;
            transition: filter 0.2s;
        }
        .hotline-pill:hover { filter: brightness(1.08); }

        /* ══ HEADER ══ */
        .site-header {
            background: var(--white);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            position: sticky; top: 0; z-index: 900;
        }
        .header-inner {
            max-width: 1280px; margin: 0 auto; padding: 0.75rem 2rem;
            display: grid; grid-template-columns: auto 1fr auto;
            align-items: center; gap: 2rem;
        }
        .logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
        .logo-mark {
            width: 58px; height: 58px; border-radius: 12px;
            background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-dark) 100%);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(var(--rgb-primary),0.35);
        }
        .logo-mark svg { width: 32px; height: 32px; }
        .logo-text strong {
            display: block;
            font-family: var(--font-head); font-size: 1.18rem; font-weight: 800;
            color: var(--green-dark); line-height: 1.2;
            letter-spacing: -0.3px;
        }
        /* ── GHI CHÚ: Dòng subtitle logo – thay tên tỉnh/KCN nếu dời địa điểm ── */
        .logo-text span { font-size: 0.68rem; color: var(--green); font-weight: 600; letter-spacing: 0.3px; }

        /* Search */
        .search-wrap { position: relative; max-width: 580px; width: 100%; margin: 0 auto; }
        .search-wrap input {
            width: 100%; padding: 0.75rem 3.5rem 0.75rem 1.25rem;
            border: 2px solid var(--gray-200); border-radius: 40px;
            font-family: var(--font-body); font-size: 0.9rem; color: var(--gray-900);
            background: var(--gray-100); outline: none; transition: all 0.2s;
        }
        .search-wrap input:focus { border-color: var(--green); background: white; box-shadow: 0 0 0 3px rgba(var(--rgb-primary),0.12); }
        .search-wrap input::placeholder { color: var(--gray-400); }
        .search-btn {
            position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
            background: var(--green); border: none; border-radius: 50%;
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: background 0.2s;
        }
        .search-btn:hover { background: var(--green-dark); }
        .search-btn svg { width: 15px; height: 15px; color: white; }

        /* Header actions */
        .header-actions { display: flex; align-items: center; gap: 1rem; }
        .cart-btn {
            position: relative; width: 44px; height: 44px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid var(--gray-200); border-radius: 50%; transition: all 0.2s;
        }
        .cart-btn:hover { border-color: var(--green); }
        .cart-btn svg { width: 20px; height: 20px; color: var(--gray-700); }
        .cart-count {
            position: absolute; top: -5px; right: -5px;
            background: var(--orange); color: white;
            font-size: 0.65rem; font-weight: 700; width: 18px; height: 18px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }
        .quote-btn {
            background: var(--green); color: white;
            padding: 0.65rem 1.4rem; border-radius: 40px;
            font-family: var(--font-head); font-size: 0.82rem; font-weight: 700;
            text-decoration: none; transition: all 0.2s; white-space: nowrap;
        }
        .quote-btn:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--rgb-primary),0.3); }
        .mobile-menu-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.4rem; }
        .mobile-menu-btn span { width: 24px; height: 2.5px; background: var(--green-dark); border-radius: 2px; display: block; }

        /* ══ NAV ══ */
        /* ── GHI CHÚ: border-bottom vàng là điểm nhấn thương hiệu — giữ nguyên màu --yellow ── */
        .main-nav { background: linear-gradient(90deg, var(--green-deep), var(--green-dark)); border-bottom: 3px solid var(--yellow); }
        .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; }
        .nav-list { list-style: none; display: flex; }
        .nav-item { position: relative; }
        .nav-link {
            display: block; padding: 0.9rem 1.25rem;
            color: rgba(255,255,255,0.9); text-decoration: none;
            font-family: var(--font-head); font-size: 0.88rem; font-weight: 600;
            white-space: nowrap;
            transition: all 0.2s;
        }
        .nav-link:hover { background: rgba(255,255,255,0.1); color: white; }
        .nav-link.active { background: rgba(255,255,255,0.15); color: var(--yellow); border-bottom: 3px solid var(--yellow); margin-bottom: -3px; }

        /* Mega menu */
        .mega-menu {
            position: absolute; top: 100%; left: 0; background: white;
            box-shadow: 0 16px 48px rgba(0,0,0,0.14);
            min-width: 660px; padding: 2rem;
            display: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem;
            z-index: 1001; border-top: 3px solid var(--green);
        }
        .nav-item:hover .mega-menu { display: grid; }
        .mega-col h4 {
            font-family: var(--font-head); font-size: 0.75rem; font-weight: 700;
            color: var(--green); text-transform: uppercase; letter-spacing: 1px;
            margin-bottom: 0.75rem; padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--green-light);
        }
        .mega-col ul { list-style: none; }
        .mega-col li { margin-bottom: 0.4rem; }
        .mega-col a {
            color: var(--gray-500); text-decoration: none; font-size: 0.875rem;
            display: flex; align-items: center; gap: 0.4rem; transition: all 0.15s;
        }
        .mega-col a::before { content: '▸'; color: var(--green); font-size: 0.7rem; }
        .mega-col a:hover { color: var(--green); padding-left: 4px; }

        /* ══ HERO ══ */
        .hero { position: relative; height: 560px; overflow: hidden; background: var(--green-deep); }
        .hero-slides { position: relative; height: 100%; }
        .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; display: flex; align-items: center; }
        .slide.active { opacity: 1; }
        .slide-bg { position: absolute; inset: 0; }

        /* Slide backgrounds — GHI CHÚ: đổi gradient màu tại đây nếu muốn thay tone chủ đạo */
        .slide-1 .slide-bg { background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-mid) 100%); }
        .slide-2 .slide-bg { background: linear-gradient(135deg, #061d4a 0%, var(--primary-dark) 55%, var(--primary) 100%); }
        .slide-3 .slide-bg { background: linear-gradient(135deg, var(--primary-deep) 0%, #1255a3 60%, #2196f3 100%); }
        /* Diagonal texture overlay trên tất cả slides */
        .slide::after {
            content: '';
            position: absolute; inset: 0; z-index: 1;
            background: repeating-linear-gradient(
                -45deg,
                rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px,
                transparent 1px, transparent 32px
            );
            pointer-events: none;
        }
        .slide-content { position: relative; z-index: 3; }

        /* Diagonal white shape right side */
        .slide-shape {
            position: absolute; right: 0; top: 0; bottom: 0; width: 42%;
            background: rgba(255,255,255,0.04);
            clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
        }
        .slide-shape::before {
            content: '';
            position: absolute; inset: 0;
            background: repeating-linear-gradient(
                -45deg,
                rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px,
                transparent 1px, transparent 36px
            );
        }
        .slide-product {
            position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
            font-size: 8.5rem; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.4));
            animation: bob 4s ease-in-out infinite; line-height: 1;
        }
        @keyframes bob {
            0%,100% { transform: translateY(-50%); }
            50%      { transform: translateY(calc(-50% - 12px)); }
        }

        .slide-content {
            position: relative; z-index: 3;
            max-width: 1280px; margin: 0 auto; padding: 0 2rem; width: 100%;
        }
        .slide-eyebrow {
            display: inline-flex; align-items: center; gap: 0.6rem;
            background: var(--yellow); color: var(--gray-900);
            padding: 0.3rem 1rem; border-radius: 20px;
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.25rem;
        }
        .slide-content h2 {
            font-family: var(--font-head); font-size: 3.2rem; font-weight: 900;
            color: white; line-height: 1.1; max-width: 580px;
            margin-bottom: 1rem;
            text-shadow: 0 2px 12px rgba(0,0,0,0.2);
        }
        .slide-content h2 em { color: var(--yellow); font-style: normal; }
        .slide-content p {
            color: rgba(255,255,255,0.85); font-size: 1rem;
            max-width: 480px; margin-bottom: 2rem; line-height: 1.75;
        }
        .slide-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
        .btn-hero-1 {
            background: var(--yellow); color: var(--gray-900);
            padding: 0.9rem 2rem; border-radius: 40px;
            font-family: var(--font-head); font-size: 0.9rem; font-weight: 800;
            text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem;
        }
        .btn-hero-1:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,197,24,0.5); }
        .btn-hero-2 {
            background: transparent; color: white;
            padding: 0.9rem 2rem; border-radius: 40px;
            border: 2px solid rgba(255,255,255,0.4);
            font-family: var(--font-head); font-size: 0.9rem; font-weight: 700;
            text-decoration: none; transition: all 0.2s; backdrop-filter: blur(4px);
        }
        .btn-hero-2:hover { border-color: white; background: rgba(255,255,255,0.12); }

        /* Hotline badges in slide */
        .slide-phones {
            display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap;
        }
        .phone-badge {
            display: flex; align-items: center; gap: 0.4rem;
            background: rgba(0,0,0,0.25); backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.2);
            color: white; padding: 0.45rem 1rem; border-radius: 30px;
            font-family: var(--font-head); font-size: 0.85rem; font-weight: 700;
            text-decoration: none; transition: background 0.2s;
        }
        .phone-badge:hover { background: rgba(0,0,0,0.4); }
        .phone-badge span { font-size: 0.9rem; }

        /* Dots */
        .slide-dots {
            position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 8px; z-index: 10;
        }
        .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.3s; }
        .dot.active { width: 28px; border-radius: 5px; background: var(--yellow); }

        /* ══ TRUST BAR ══ */
        /* ── GHI CHÚ: Đổi nội dung trust item trong HTML bên dưới, giữ cấu trúc .trust-icon + .trust-text ── */
        .trust-bar { background: linear-gradient(90deg, var(--green-deep) 0%, var(--green-dark) 100%); border-top: 1px solid rgba(255,255,255,0.08); }
        .trust-inner {
            max-width: 1280px; margin: 0 auto; padding: 0 2rem;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        .trust-item {
            display: flex; align-items: center; gap: 0.85rem;
            padding: 1.1rem 1.5rem; border-right: 1px solid rgba(255,255,255,0.08);
        }
        .trust-item:last-child { border-right: none; }
        .trust-icon {
            font-size: 1.6rem; flex-shrink: 0;
            width: 46px; height: 46px;
            background: rgba(245,197,24,0.12);
            border: 1px solid rgba(245,197,24,0.25);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
        }
        .trust-text strong { display: block; color: white; font-size: 0.88rem; font-weight: 700; font-family: var(--font-head); }
        .trust-text span { color: rgba(255,255,255,0.45); font-size: 0.73rem; }

        /* ══ INTRO ══ */
        .intro-section { padding: 5rem 2rem; background: white; }
        .intro-inner {
            max-width: 1280px; margin: 0 auto;
            display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
        }
        .intro-eyebrow {
            display: flex; align-items: center; gap: 0.6rem;
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
            color: var(--green); text-transform: uppercase; letter-spacing: 2px;
            margin-bottom: 1rem;
        }
        .intro-eyebrow::before { content: ''; width: 28px; height: 3px; background: var(--green); display: block; border-radius: 2px; }
        .intro-inner h2 {
            font-family: var(--font-head); font-size: 2.4rem; font-weight: 900;
            color: var(--green-dark); line-height: 1.15; margin-bottom: 1.25rem;
            text-transform: uppercase;
        }
        .intro-inner h2 em { color: var(--green); font-style: normal; }
        .intro-inner p { color: var(--gray-500); line-height: 1.85; margin-bottom: 1rem; }
        .btn-green {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: var(--green); color: white;
            padding: 0.8rem 1.75rem; border-radius: 40px;
            font-family: var(--font-head); font-size: 0.82rem; font-weight: 700;
            text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
            transition: all 0.2s; margin-top: 0.5rem;
        }
        .btn-green:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--rgb-primary),0.3); }

        /* Stats grid */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
        .stat-box {
            background: var(--green-light); border-radius: 14px; padding: 1.75rem;
            border: 1.5px solid var(--gray-200); text-align: center; transition: all 0.3s;
        }
        .stat-box:hover { border-color: var(--green); box-shadow: 0 8px 24px rgba(var(--rgb-primary),0.1); }
        .stat-num {
            font-family: var(--font-head); font-size: 2.8rem; font-weight: 900;
            color: var(--green); line-height: 1; margin-bottom: 0.4rem;
        }
        .stat-desc { font-size: 0.82rem; color: var(--gray-500); font-weight: 500; }

        /* ══ PRODUCTS ══ */
        .products-section { padding: 3.5rem 1.5rem 4rem; background: #f5f5f5; }

        /* Tiêu đề lớn căn giữa */
        .prod-main-head {
            max-width: 1280px; margin: 0 auto 2.5rem; text-align: center;
        }
        .prod-main-head h2 {
            font-family: var(--font-head); font-size: 1.6rem; font-weight: 900;
            color: var(--green); text-transform: uppercase; letter-spacing: 0.5px;
            display: inline-block; position: relative;
        }
        .prod-main-head h2::after {
            content: ''; display: block; width: 60px; height: 3px;
            background: var(--green); margin: 0.4rem auto 0; border-radius: 2px;
        }

        /* Khối danh mục */
        .cat-block { max-width: 1280px; margin: 0 auto 2.5rem; }

        /* Header danh mục — style Thành Tiến */
        .cat-row {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1rem;
        }
        .cat-title-wrap {
            display: flex; align-items: center; gap: 0;
        }
        .cat-title-bar {
            width: 5px; height: 28px; background: var(--green);
            border-radius: 3px; margin-right: 10px; flex-shrink: 0;
        }
        .cat-title-text {
            font-family: var(--font-head); font-size: 1rem; font-weight: 800;
            color: var(--gray-900); text-transform: uppercase; letter-spacing: 0.5px;
        }
        .cat-viewmore {
            background: var(--green); color: white;
            padding: 0.3rem 1rem; border-radius: 20px;
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
            text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
            transition: background 0.2s; white-space: nowrap;
            display: flex; align-items: center; gap: 0.3rem;
        }
        .cat-viewmore:hover { background: var(--green-dark); }

        /* Grid 4 cột sản phẩm */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
        }


        /* ══════════════════════════════════════════════════════════════
           PRODUCT CARD — CẤU TRÚC HỖ TRỢ CODE ĐỘNG
           ══════════════════════════════════════════════════════════════
           Mỗi .product-card render từ 1 object JSON:
           {
             "id":       "sp-001",
             "category": "thung-carton",
             "name":     "Thùng Carton 3 Lớp Sóng B",
             "images":   ["images/thung-carton/sp-001.jpg", "..."],  ← nhiều ảnh
             "badge":    "HOT",          ← tuỳ chọn: HOT / MỚI / SALE / null
             "specs":    "Sóng B · 3 lớp · Tải 10kg",
             "contact":  true
           }

           HTML TĨNH MẪU (copy để tạo card mới):
           <a href="#" class="product-card" data-id="sp-001" data-category="thung-carton">
             <div class="product-img">
               <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:0"><rect width="200" height="200" fill="#dbeafe"/><rect x="30" y="50" width="140" height="25" rx="5" fill="#1e40af" opacity="0.35"/><rect x="30" y="85" width="140" height="10" rx="3" fill="#1e40af" opacity="0.2"/><rect x="30" y="103" width="110" height="10" rx="3" fill="#1e40af" opacity="0.15"/><rect x="30" y="121" width="80" height="8" rx="3" fill="#1e40af" opacity="0.12"/></svg>
               <img src="images/thung-carton/sp-001.jpg" alt="Tên sản phẩm" loading="lazy" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover">
               <span class="product-badge">HOT</span>
               <div class="product-img-dots">
                 <span class="img-dot active"></span>
                 <span class="img-dot"></span>
                 <span class="img-dot"></span>
               </div>
               <div class="product-img-footer">
                 <span class="brand-tag">Bao Bì Tân Long</span>
                 <span class="hotline-tag">0964 825 757</span>
               </div>
             </div>
             <div class="product-body">
               <div class="product-specs">Sóng B · 3 lớp</div>
               <div class="product-name">Thùng Carton 3 Lớp Sóng B</div>
               <span class="product-contact">› Liên hệ báo giá</span>
             </div>
           </a>
        ══════════════════════════════════════════════════════════════ */

        /* ── Card container ── */
        .product-card {
            background: white; border-radius: 10px; overflow: hidden;
            border: 2px solid #c8955a;
            transition: all 0.25s; cursor: pointer;
            box-shadow: 0 2px 8px rgba(155,100,60,0.08);
            display: flex; flex-direction: column;
            text-decoration: none; color: inherit;
        }
        .product-card:hover {
            border-color: #9a6030;
            box-shadow: 0 8px 24px rgba(155,100,60,.2);
            transform: translateY(-4px);
        }

        /* ── Vùng ảnh vuông — hỗ trợ nhiều ảnh slide khi làm động ── */
        .product-img {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: #fef3e2;
            position: relative; overflow: hidden;
            display: block; flex-shrink: 0;
        }
        /* Ảnh chính — object-fit:cover tự căn không méo dù ảnh ngang/dọc */
        .product-img img {
            width: 100%; height: 100%;
            object-fit: cover; display: block;
            transition: transform 0.45s ease;
        }
        .product-card:hover .product-img img { transform: scale(1.06); }

        /* Dots chỉ số ảnh — hiện khi có nhiều ảnh (làm động sau) */
        .product-img-dots {
            position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 4px; z-index: 3;
        }
        .img-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: rgba(255,255,255,0.45); transition: all 0.2s;
        }
        .img-dot.active { background: white; width: 14px; border-radius: 3px; }

        /* Badge góc trên trái — HOT / MỚI / SALE */
        .product-badge {
            position: absolute; top: 8px; left: 8px; z-index: 3;
            background: var(--orange); color: white;
            font-family: var(--font-head); font-size: 0.6rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px;
            padding: 0.18rem 0.6rem; border-radius: 3px;
        }
        .product-badge.new-badge  { background: var(--green); }
        .product-badge.sale-badge { background: #e53e3e; }

        /* Footer ảnh — brand + hotline */
        .product-img-footer {
            position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
            background: linear-gradient(to top, rgba(var(--rgb-deep),0.82) 0%, transparent 100%);
            padding: 1.5rem 0.6rem 0.45rem;
            display: flex; align-items: center; justify-content: space-between;
        }
        .product-img-footer .brand-tag {
            font-family: var(--font-head); font-size: 0.57rem; font-weight: 700;
            color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.3px;
        }
        .product-img-footer .hotline-tag {
            font-family: var(--font-head); font-size: 0.6rem; font-weight: 700;
            color: var(--yellow); letter-spacing: 0.3px;
        }

        /* ── Body card ── */
        .product-body {
            padding: 0.7rem 0.85rem 0.85rem;
            border-top: 1px solid var(--green-light);
            display: flex; flex-direction: column; gap: 0.25rem;
            flex: 1;
        }
        /* Thông số kỹ thuật ngắn — hiện nhỏ trên tên */
        .product-specs {
            font-size: 0.68rem; color: var(--gray-400);
            font-weight: 500; letter-spacing: 0.3px;
        }
        .product-name {
            font-family: var(--font-head); font-weight: 700;
            color: var(--gray-900); font-size: 0.82rem;
            line-height: 1.35; flex: 1;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        /* Nút liên hệ */
        .product-contact {
            color: var(--green); font-family: var(--font-head);
            font-size: 0.73rem; font-weight: 700; text-decoration: none;
            display: inline-flex; align-items: center; gap: 0.3rem;
            background: var(--green-light);
            padding: 0.28rem 0.75rem; border-radius: 20px;
            border: 1px solid rgba(var(--rgb-primary),0.15);
            margin-top: 0.3rem; align-self: flex-start;
            transition: all 0.2s;
        }
        .product-contact:hover { background: var(--green); color: white; border-color: var(--green); }



        /* Responsive grid */
        @media (max-width: 900px) { .products-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
        @media (max-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; } }

        /* ══ WHY US ══ */
        .why-section { padding: 5rem 2rem; background: var(--green-deep); }
        .why-inner { max-width: 1280px; margin: 0 auto; }
        .why-head { margin-bottom: 3.5rem; }
        .why-head .ey {
            display: flex; align-items: center; gap: 0.6rem;
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
            color: var(--yellow); text-transform: uppercase; letter-spacing: 2px;
            margin-bottom: 0.75rem;
        }
        .why-head .ey::before { content: ''; width: 24px; height: 3px; background: var(--yellow); display: block; }
        .why-head h2 {
            font-family: var(--font-head); font-size: 2.4rem; font-weight: 900;
            color: white; line-height: 1.15;
        }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
        .feat-card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 14px; padding: 2rem 1.5rem; transition: all 0.3s;
        }
        .feat-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-4px); border-color: rgba(255,255,255,0.2); }
        .feat-icon {
            width: 54px; height: 54px; background: rgba(245,197,24,0.15);
            border: 1px solid rgba(245,197,24,0.3); border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; margin-bottom: 1.25rem;
        }
        .feat-card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 800; color: white; margin-bottom: 0.6rem; }
        .feat-card p { color: rgba(255,255,255,0.5); font-size: 0.875rem; line-height: 1.75; }

        /* ══ PROCESS — Timeline Style ══ */
        .process-section { padding: 5rem 2rem; background: var(--off-white); }
        .process-inner { max-width: 1280px; margin: 0 auto; }
        .proc-head { margin-bottom: 3rem; }
        .proc-title {
            font-size: 2rem; font-weight: 900;
            color: var(--blue-dark); text-transform: uppercase; line-height: 1.2;
            font-family: var(--font);
        }
        .proc-title em { color: var(--blue); font-style: normal; }
        .proc-sub { font-size: 0.875rem; color: var(--gray-500); margin-top: 0.4rem; }

        /* Scroll container */
        .proc-scroll {
            overflow-x: auto; padding: 1rem 0 1.5rem;
            scrollbar-width: thin;
            scrollbar-color: var(--blue-light) transparent;
        }
        .proc-scroll::-webkit-scrollbar { height: 4px; }
        .proc-scroll::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 2px; }
        .proc-scroll::-webkit-scrollbar-thumb { background: var(--blue-light); border-radius: 2px; }

        /* Track */
        .proc-track {
            display: flex; gap: 0;
            min-width: max-content;
            padding-bottom: 1rem; padding-right: 2rem;
            position: relative;
        }
        .proc-track::before {
            content: '';
            position: absolute; top: 56px; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 55%, var(--gray-200) 55%, var(--gray-200) 100%);
            z-index: 0;
        }

        /* Card */
        .proc-tl-card {
            width: 200px; flex-shrink: 0;
            padding: 0 1rem;
            display: flex; flex-direction: column; align-items: center; text-align: center;
            position: relative;
        }
        .proc-dot-wrap {
            position: relative; margin-bottom: 1.4rem;
            z-index: 1; padding-top: 1.8rem;
        }
        .proc-dot {
            width: 52px; height: 52px; border-radius: 50%;
            background: white; border: 3px solid var(--blue);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem;
            box-shadow: 0 0 0 5px var(--blue-light);
            transition: var(--transition);
        }
        .proc-tl-card:hover .proc-dot {
            background: var(--blue); border-color: var(--blue-dark);
            transform: scale(1.1);
            box-shadow: 0 0 0 6px rgba(var(--rgb-primary),0.15), 0 8px 24px rgba(var(--rgb-primary),0.35);
        }
        .proc-yr {
            position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            background: var(--yellow); color: var(--gray-900);
            font-size: 0.65rem; font-weight: 800;
            padding: 0.2rem 0.7rem; border-radius: 10px;
            white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        }
        .active-yr { background: var(--blue-dark) !important; color: white !important; }

        /* Bước active */
        .proc-tl-card.active .proc-dot {
            background: var(--blue); border-color: var(--blue-dark);
            box-shadow: 0 0 0 6px rgba(var(--rgb-primary),0.15), 0 8px 24px rgba(var(--rgb-primary),0.35);
        }
        /* Bước done (ft) */
        .proc-tl-card.ft .proc-dot {
            background: var(--blue); border-color: var(--blue-dark);
            box-shadow: 0 0 0 6px rgba(var(--rgb-primary),0.15), 0 8px 24px rgba(var(--rgb-primary),0.35);
        }
        .proc-tl-card.ft .proc-yr { background: var(--blue-dark); color: white; }

        /* Body */
        .proc-body {
            background: white; border-radius: var(--radius-lg);
            padding: 1rem 0.9rem;
            border: 1.5px solid var(--gray-200);
            transition: var(--transition);
            width: 100%;
        }
        .proc-tl-card:hover .proc-body,
        .proc-tl-card.ft .proc-body,
        .proc-tl-card.active .proc-body {
            border-color: var(--blue);
            box-shadow: var(--shadow-md);
        }
        .proc-title-card {
            font-size: 0.82rem; font-weight: 800;
            color: var(--blue-dark); margin-bottom: 0.35rem;
        }
        .proc-desc-card {
            font-size: 0.74rem; color: var(--gray-500); line-height: 1.6;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .proc-tl-card { width: 160px; }
        }

/* ══ TESTIMONIALS ══ */
        /* ── GHI CHÚ: Thay nội dung testimonial trong HTML bên dưới
              • Tên khách hàng: .testi-name
              • Chức vụ / công ty: .testi-role
              • Nội dung đánh giá: .testi-body (giữ dấu "" bao ngoài)
              • Sản phẩm đã mua: .testi-prod-name + .testi-prod-sub
              • Badge "✓ Đối tác" / "✓ Khách lâu năm": đổi text trong <span class="testi-badge">
        ── */
        .testimonials-section { padding: 5rem 2rem; background: var(--off-white); }
        .section-head-center { max-width: 1280px; margin: 0 auto 3rem; text-align: center; }
        .sec-label-c {
            display: inline-flex; align-items: center; gap: 0.6rem;
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
            color: var(--green); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.4rem;
        }
        .sec-label-c::before, .sec-label-c::after { content: ''; width: 20px; height: 3px; background: var(--green); display: block; border-radius: 2px; }
        .section-head-center h2 { font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: var(--green-dark); }
        .testi-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .testi-card {
            background: white; border-radius: 14px; padding: 2rem;
            border: 1.5px solid var(--gray-200); transition: all 0.3s; position: relative; overflow: hidden;
        }
        .testi-card::before {
            content: '"';
            position: absolute; top: 0.5rem; right: 1.5rem;
            font-family: Georgia, serif; font-size: 6rem; font-weight: 900;
            color: var(--green); opacity: 0.06; line-height: 1;
        }
        .testi-card:hover { border-color: var(--green); box-shadow: 0 12px 32px rgba(var(--rgb-primary),0.1); }
        .testi-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
        .testi-avatar {
            width: 54px; height: 54px; border-radius: 50%;
            background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
            display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
            flex-shrink: 0; box-shadow: 0 4px 12px rgba(var(--rgb-primary),0.3);
        }
        .testi-name-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
        .testi-name { font-family: var(--font-head); font-weight: 700; color: var(--gray-900); font-size: 0.95rem; }
        /* Badge xác thực bên cạnh tên */
        .testi-badge {
            background: var(--green-light); color: var(--green);
            font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.55rem;
            border-radius: 20px; border: 1px solid rgba(var(--rgb-primary),0.2);
            white-space: nowrap;
        }
        .testi-role { font-size: 0.78rem; color: var(--gray-400); }
        .testi-stars { color: var(--yellow); font-size: 0.85rem; margin-top: 0.1rem; letter-spacing: 1px; }
        /* Quote block nổi bật */
        .testi-body {
            color: var(--gray-500); font-style: italic; line-height: 1.85; font-size: 0.9rem;
            margin-bottom: 1.25rem;
            border-left: 3px solid var(--green);
            background: var(--off-white);
            padding: 0.75rem 1rem; border-radius: 0 8px 8px 0;
        }
        .testi-product { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--gray-200); }
        .testi-thumb {
            width: 50px; height: 50px;
            background: linear-gradient(135deg, var(--green-light), #c5ddf5);
            border-radius: 8px; display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; border: 1px solid var(--gray-200);
        }
        .testi-prod-name { font-size: 0.82rem; font-weight: 700; color: var(--gray-700); }
        .testi-prod-sub { font-size: 0.73rem; color: var(--gray-400); }

        /* ══ NEWS ══ */
        /* ── GHI CHÚ: Thêm bài viết mới bằng cách copy 1 .news-card trong HTML
              Đổi màu border-top theo category: Kiến Thức=var(--primary) / Xu Hướng=var(--primary-mid) / Ứng Dụng=#42a5f5
              Thay đổi trong style="border-top-color: #..." trực tiếp trên thẻ .news-card ── */
        .news-section { padding: 5rem 2rem; background: white; }
        .news-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
        .news-card {
            border-radius: 12px; overflow: hidden;
            border: 1.5px solid var(--gray-200);
            border-top: 3px solid var(--green);
            transition: all 0.3s;
        }
        .news-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); transform: translateY(-4px); border-color: var(--green); border-top-width: 3px; }
        .news-img {
            height: 260px; background: var(--green-light);
            display: flex; align-items: center; justify-content: center;
            font-size: 3.5rem; position: relative; overflow: hidden;
        }
        .news-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .news-cat {
            position: absolute; top: 12px; left: 12px;
            background: rgba(var(--rgb-primary),0.88); backdrop-filter: blur(4px);
            color: white;
            font-family: var(--font-head); font-size: 0.68rem; font-weight: 700;
            letter-spacing: 0.5px; text-transform: uppercase;
            padding: 0.2rem 0.65rem; border-radius: 4px;
        }
        .news-body { padding: 1.5rem; }
        /* Date với accent line nhỏ phía trước */
        .news-date {
            font-size: 0.73rem; color: var(--gray-400); margin-bottom: 0.5rem;
            display: flex; align-items: center; gap: 0.5rem;
        }
        .news-date::before { content: ''; display: block; width: 14px; height: 2px; background: var(--green); border-radius: 1px; flex-shrink: 0; }
        .news-title { font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; color: var(--gray-900); line-height: 1.45; margin-bottom: 0.6rem; }
        .news-excerpt { font-size: 0.85rem; color: var(--gray-500); margin-bottom: 1rem; line-height: 1.7; }
        .read-more {
            font-family: var(--font-head); font-size: 0.75rem; font-weight: 700;
            color: var(--green); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
            display: inline-flex; align-items: center; gap: 0.3rem; transition: gap 0.2s;
        }
        .read-more:hover { gap: 0.6rem; }

        /* ══ PARTNERS (ĐỐI TÁC) ══ */
        .partners-section {
            background: linear-gradient(135deg, var(--green-deep) 0%, var(--primary-dark) 50%, var(--green-dark) 100%);
            padding: 2.8rem 0; overflow: hidden; position: relative;
        }
        .partners-header { text-align: center; margin-bottom: 1.8rem; padding: 0 2rem; }
        .partners-label {
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 3.5px; color: rgba(255,255,255,0.55);
            display: flex; align-items: center; justify-content: center; gap: 1.2rem;
        }
        .partners-label::before, .partners-label::after {
            content: ''; flex: 1; max-width: 100px; height: 1px; background: rgba(255,255,255,0.2);
        }
        .partners-label-accent { color: var(--yellow); font-weight: 800; }
        .partners-count { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.4rem; letter-spacing: 1px; }
        .partners-track-wrap { overflow: hidden; position: relative; }
        .partners-track-wrap::before,
        .partners-track-wrap::after {
            content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
        }
        .partners-track-wrap::before { left: 0; background: linear-gradient(to right, var(--green-deep), transparent); }
        .partners-track-wrap::after  { right: 0; background: linear-gradient(to left, var(--green-dark), transparent); }
        .partners-track {
            display: flex; gap: 0; width: max-content;
            animation: marquee 32s linear infinite;
        }
        .partners-track:hover { animation-play-state: paused; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .partner-item {
            display: flex; align-items: center; gap: 0.85rem;
            padding: 0.75rem 2rem;
            border-right: 1px solid rgba(255,255,255,0.1);
            white-space: nowrap; cursor: default; transition: background 0.2s;
        }
        .partner-item:hover { background: rgba(255,255,255,0.07); }
        .partner-avatar {
            width: 44px; height: 44px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            border: 1px solid rgba(255,255,255,0.15);
        }
        .partner-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
        .partner-avatar span { font-size: 0.78rem; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
        .partner-info { display: flex; flex-direction: column; gap: 2px; }
        .partner-name {
            font-family: var(--font-head); font-size: 0.88rem; font-weight: 700;
            color: rgba(255,255,255,0.92); letter-spacing: 0.2px;
        }
        .partner-type { font-size: 0.68rem; color: rgba(255,255,255,0.45); font-weight: 400; display: block; }
        .partners-footer {
            text-align: center; margin-top: 1.5rem;
            font-size: 0.72rem; color: rgba(255,255,255,0.3); letter-spacing: 0.5px;
        }
        .partners-footer a { color: rgba(255,255,255,0.45); text-decoration: none; }
        .partners-footer a:hover { color: rgba(255,255,255,0.7); }

        /* ══ CTA BANNER ══ */
        .cta-section {
            background: linear-gradient(135deg, var(--green-deep) 0%, var(--primary-dark) 50%, var(--green-dark) 100%);
            padding: 4.5rem 2rem; text-align: center; position: relative; overflow: hidden;
        }
        .cta-section::before {
            content: ''; position: absolute; inset: 0;
            background: repeating-linear-gradient(
                -45deg,
                rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
                transparent 1px, transparent 28px
            );
        }
        .cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }

        .cta-eyebrow {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: rgba(245,197,24,0.15); border: 1px solid rgba(245,197,24,0.4);
            color: var(--yellow); font-size: 0.72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 2px;
            padding: 0.4rem 1.1rem; border-radius: 20px; margin-bottom: 1.4rem;
        }

        .cta-section h2 {
            font-family: var(--font-head); font-size: 2.8rem; font-weight: 900;
            color: white; text-transform: uppercase; line-height: 1.1;
            margin-bottom: 0.75rem; letter-spacing: -0.5px;
        }
        .cta-section h2 em { color: var(--yellow); font-style: normal; }

        .cta-sub {
            color: rgba(255,255,255,0.85); font-size: 1rem;
            margin-bottom: 1.75rem; line-height: 1.75;
            max-width: 540px; margin-left: auto; margin-right: auto;
        }
        .cta-sub strong { color: #fff; font-weight: 700; }

        /* Badge lợi ích */
        .cta-badges {
            display: flex; align-items: center; justify-content: center;
            gap: 22px; margin-bottom: 2rem; flex-wrap: wrap;
        }
        .cta-badge {
            display: flex; align-items: center; gap: 7px;
            font-size: 12.5px; color: rgba(255,255,255,0.78); font-weight: 500;
        }
        .cta-badge::before {
            content: '';
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--yellow); flex-shrink: 0;
            box-shadow: 0 0 0 3px rgba(245,197,24,0.25);
        }

        /* Nút CTA */
        .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
        .cta-btn-1 {
            background: var(--yellow); color: var(--gray-900);
            padding: 0.95rem 2.4rem; border-radius: 40px;
            font-family: var(--font-head); font-size: 0.95rem; font-weight: 800;
            text-decoration: none; transition: all 0.2s;
            display: inline-flex; align-items: center; gap: 0.5rem;
            text-transform: uppercase; letter-spacing: 0.3px;
            box-shadow: 0 6px 24px rgba(245,197,24,0.45);
        }
        .cta-btn-1:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(245,197,24,0.55); }
        .cta-btn-2 {
            background: rgba(255,255,255,0.12); color: white;
            padding: 0.95rem 2.2rem; border-radius: 40px;
            border: 1.5px solid rgba(255,255,255,0.35);
            font-family: var(--font-head); font-size: 0.95rem; font-weight: 700;
            text-decoration: none; transition: all 0.2s;
            display: inline-flex; align-items: center; gap: 0.5rem;
        }
        .cta-btn-2:hover { border-color: white; background: rgba(255,255,255,0.2); }

        /* Liên hệ dưới nút */
        .cta-contacts {
            display: flex; align-items: center; justify-content: center;
            gap: 0; flex-wrap: wrap;
        }
        .cta-contact-item {
            display: flex; align-items: center; gap: 10px;
            padding: 0 24px;
            border-right: 1px solid rgba(255,255,255,0.15);
        }
        .cta-contact-item:last-child { border-right: none; }
        .cta-contact-icon {
            width: 30px; height: 30px; border-radius: 50%;
            background: rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; flex-shrink: 0;
        }
        .cta-contact-label {
            display: block; font-size: 10.5px;
            color: rgba(255,255,255,0.45); text-transform: uppercase;
            letter-spacing: 0.8px; margin-bottom: 1px;
        }
        .cta-contact-value {
            color: #fff; font-weight: 700; font-size: 13.5px;
            text-decoration: none; transition: color 0.2s;
        }
        .cta-contact-value:hover { color: var(--yellow); }

        /* Giữ .cta-phones cho tương thích */
        .cta-phones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
        .cta-phone {
            color: rgba(255,255,255,0.85); font-family: var(--font-head); font-weight: 700;
            font-size: 0.9rem; text-decoration: none;
            display: flex; align-items: center; gap: 0.4rem; transition: color 0.2s;
        }
        .cta-phone:hover { color: var(--yellow); }

        /* ══ FOOTER ══ */
        /* ── GHI CHÚ: Footer dùng navy var(--primary-navy) thay vì đen → đọc dễ hơn, vẫn chuyên nghiệp ── */
        footer { background: var(--primary-navy); color: white; padding: 4rem 2rem 0; border-top: 3px solid var(--green); }
        .footer-grid {
            max-width: 1280px; margin: 0 auto;
            display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
            gap: 3.5rem; padding-bottom: 3rem;
        }
        .footer-col h4 {
            font-family: var(--font-head); font-size: 0.72rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: 2px; color: var(--green-mid);
            margin-bottom: 1.25rem; padding-bottom: 0.6rem;
            border-bottom: 2px solid rgba(var(--rgb-primary),0.3);
        }
        .footer-col p { color: rgba(255,255,255,0.65); font-size: 0.875rem; line-height: 1.85; }
        .footer-col a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.875rem; display: block; margin-bottom: 0.45rem; transition: color 0.2s; }
        .footer-col a:hover { color: var(--yellow); }
        .footer-contact-item { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.9rem; }
        .footer-contact-item .ci { flex-shrink: 0; margin-top: 0.15rem; font-size: 0.9rem; }
        .footer-contact-item span { color: rgba(255,255,255,0.65); font-size: 0.875rem; line-height: 1.65; }
        /* ── GHI CHÚ: Số điện thoại trong footer highlight vàng → dễ thấy, tăng tỉ lệ gọi ── */
        .footer-contact-item a { color: var(--yellow); text-decoration: none; display: inline; font-weight: 600; }
        .footer-contact-item a:hover { color: white; }
        .social-row { display: flex; gap: 0.65rem; margin-top: 1.5rem; }
        .social-btn {
            width: 38px; height: 38px;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px; display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.5); text-decoration: none;
            font-family: var(--font-head); font-size: 0.75rem; font-weight: 700;
            transition: all 0.2s;
        }
        .social-btn:hover { background: var(--green); border-color: var(--green); color: white; }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            max-width: 1280px; margin: 0 auto; padding: 1.5rem 0;
            display: flex; justify-content: space-between; align-items: center;
        }
        .footer-bottom p { color: rgba(255,255,255,0.5); font-size: 0.78rem; }

        /* ══ FLOATERS ══ */
        /* ── GHI CHÚ FLOATING BUTTONS:
              • f-zalo: đổi link Zalo trong href="https://zalo.me/SỐ_ĐIỆN_THOẠI"
              • f-mess: đổi link Messenger trong href="https://m.me/TÊN_PAGE"
              • f-phone: đổi số điện thoại trong href="tel:SỐ"
              • Phone button to nhất (60px) = CTA quan trọng nhất
              • Pulse ring chạy liên tục trên Zalo + Phone = thu hút chú ý
        ── */
        .floaters { position: fixed; right: 18px; bottom: 80px; display: flex; flex-direction: column; gap: 10px; z-index: 999; align-items: flex-end; }
        .floater {
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none; color: white; font-weight: 700; font-size: 0.7rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: all 0.25s; position: relative;
        }
        /* Tooltip label luôn hiện cạnh button */
        .floater-label {
            position: absolute; right: calc(100% + 10px);
            color: white; padding: 0.38rem 0.85rem; border-radius: 6px;
            font-size: 0.75rem; font-weight: 600; white-space: nowrap;
            opacity: 0; visibility: hidden; transition: all 0.25s;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .floater:hover .floater-label { opacity: 1; visibility: visible; }
        .floater:hover { transform: scale(1.08); }
        /* Pulse ring animation */
        @keyframes pulse-ring {
            0%   { transform: scale(1);   opacity: 0.5; }
            100% { transform: scale(1.55); opacity: 0; }
        }
        .floater-pulse::before {
            content: ''; position: absolute; inset: 0; border-radius: 50%;
            border: 2.5px solid currentColor; opacity: 0;
            animation: pulse-ring 2s ease-out infinite;
        }
        .floater-pulse::after {
            content: ''; position: absolute; inset: 0; border-radius: 50%;
            border: 2px solid currentColor; opacity: 0;
            animation: pulse-ring 2s ease-out infinite 0.65s;
        }
        /* Zalo */
        .f-zalo {
            background: #0068ff; width: 50px; height: 50px; font-size: 0.75rem;
        }
        .f-zalo .floater-label { background: #004fcc; }
        /* Messenger */
        .f-mess { background: #0084ff; width: 46px; height: 46px; font-size: 1rem; }
        .f-mess .floater-label { background: #0060cc; }
        /* Phone — lớn nhất, nổi bật nhất */
        .f-phone {
            background: var(--green); width: 60px; height: 60px; font-size: 1.2rem;
            box-shadow: 0 6px 20px rgba(var(--rgb-primary),0.45);
        }
        .f-phone .floater-label {
            background: var(--green-deep);
            color: var(--yellow); font-weight: 700; font-size: 0.8rem;
            border: 1px solid rgba(245,197,24,0.35);
        }
        @keyframes ring { 0%,80%,100% { transform: scale(1); } 20% { transform: scale(1.12); } 40% { transform: scale(0.97); } }
        .f-phone { animation: ring 3.5s ease-in-out infinite; }
        .f-phone:hover { animation: none; transform: scale(1.08); }

        /* ══ MOBILE NAV ══ */
        .mobile-nav-overlay {
            display: none;
            position: fixed; inset: 0; background: rgba(0,0,0,0.45);
            z-index: 1100; backdrop-filter: blur(2px);
        }
        .mobile-nav-overlay.open { display: block; }
        .mobile-nav-drawer {
            position: fixed; top: 0; left: -320px; bottom: 0;
            width: 300px; background: white;
            z-index: 1200; transition: left 0.32s cubic-bezier(.4,0,.2,1);
            display: flex; flex-direction: column;
            box-shadow: 8px 0 32px rgba(0,0,0,0.18);
            overflow-y: auto;
        }
        .mobile-nav-drawer.open { left: 0; }
        .mobile-nav-head {
            background: linear-gradient(135deg, var(--green-deep), var(--green-dark));
            padding: 1.2rem 1.25rem;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 3px solid var(--yellow);
        }
        .mobile-nav-head .logo-text strong { color: white; font-size: 1rem; }
        .mobile-nav-head .logo-text span { color: rgba(255,255,255,0.6); }
        .mobile-nav-close {
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.12); border: none; cursor: pointer;
            color: white; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }
        .mobile-nav-close:hover { background: rgba(255,255,255,0.22); }
        .mobile-nav-links { padding: 1rem 0; flex: 1; }
        .mobile-nav-links a {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.85rem 1.5rem;
            color: var(--gray-700); text-decoration: none;
            font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
            border-bottom: 1px solid var(--gray-100);
            transition: all 0.15s;
        }
        .mobile-nav-links a:hover { background: var(--green-light); color: var(--green); padding-left: 1.85rem; }
        .mobile-nav-links a.active-link { color: var(--green); background: var(--green-light); }
        .mobile-nav-sub { background: var(--gray-100); }
        .mobile-nav-sub a {
            padding-left: 2.25rem; font-size: 0.85rem; font-weight: 500;
            color: var(--gray-500); border-bottom: 1px solid var(--gray-200);
        }
        .mobile-nav-sub a::before { content: '▸ '; color: var(--green); font-size: 0.7rem; }
        .mobile-nav-footer {
            padding: 1.25rem 1.5rem;
            border-top: 1px solid var(--gray-200);
            background: var(--off-white);
        }
        .mobile-nav-footer .hotline-pill {
            display: block; text-align: center; padding: 0.7rem;
            font-size: 0.95rem; margin-bottom: 0.6rem;
        }
        .mobile-nav-toggle-btn { cursor: pointer; }
        .mobile-submenu-icon { font-size: 0.7rem; color: var(--gray-400); transition: transform 0.2s; }
        .mobile-nav-links .has-sub.open .mobile-submenu-icon { transform: rotate(90deg); }

        /* ══ RESPONSIVE ══ */
        @media (max-width: 1024px) {
            .features-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
            .trust-inner { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
            .trust-item:nth-child(2) { border-right: none; }
            .proc-track { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; padding-top: 0; }
            .proc-track::before { display: none; }
            .proc-dot-wrap { display: none; }
        }
        @media (max-width: 768px) {
            .top-bar-left { display: none; }
            .header-inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
            .search-wrap { order: 3; grid-column: 1/-1; }
            .quote-btn { display: none; }
            .main-nav { display: none; }
            .mobile-menu-btn { display: flex; }
            .hero { height: 480px; }
            .slide-content h2 { font-size: 2rem; }
            .slide-shape { display: none; }
            .intro-inner { grid-template-columns: 1fr; gap: 3rem; }
            .features-grid { grid-template-columns: 1fr 1fr; }
            .news-grid { grid-template-columns: 1fr; }
            .testi-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
            .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
            .proc-track { grid-template-columns: 1fr 1fr; }
        }