/* Reset CSS cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Tắt gạch chân link*/
a { text-decoration: none; }
h2 { color: #F2CD82; }
/* Biến kính lỏng — BỔ SUNG khi gộp (file của Bo dùng var(--glass-*) ở 46 chỗ
   nhưng chưa từng khai báo :root, khiến nền kính của thẻ/stat/sản phẩm/liên hệ
   bị vô hiệu. Đoạn này chỉ THÊM biến, không sửa rule nào của Bo.) */
:root {
    --glass-bg: linear-gradient(135deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.02) 100%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.12);
    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 24px 48px rgba(0, 0, 0, 0.22);
    --glass-blur: blur(16px) saturate(150%);
    --ease-liquid: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   NỀN LIQUID CHUYỂN ĐỘNG
========================================= */
body {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    
    /* Tạo hiệu ứng nền chất lỏng */
    background-color: #1a1c18;
    background-image: 
        radial-gradient(circle at 80% 90%, rgba(86, 222, 232, 0.15) 0%, transparent 10%),
        radial-gradient(circle at 70% 60%, rgba(86, 150, 232, 0.1) 0%, transparent 10%),
        radial-gradient(circle at 60% 40%, rgba(86, 232, 150, 0.05) 0%, transparent 10%);
    background-attachment: fixed;
    background-size: 400% 200%;
    
    /* Animation làm nền chuyển động loang lổ */
    animation: liquidBackground 36s ease-in-out infinite alternate;
}

/* Keyframes cho nền liquid */
@keyframes liquidBackground {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 100%; }
}

/* =========================================
   HIỆU ỨNG LIQUID GLASS (VỆT SÁNG CHUỘT)
========================================= */
.liquid-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 450px;
    height: 450px;
    border-radius: 10%;
    pointer-events: none; 
    z-index: 1; 
    
    background: radial-gradient(circle, rgba(232, 184, 86, 0.2) -50%, rgba(232, 184, 86, 0) 50%);
    /* v13: khôi phục fix v11 — xóa backdrop-filter còn sót của bản cũ (blur 200px làm nhòe trang sau con trỏ) */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    transform: translate(-50%, -50%);
    
    /* Ẩn đi lúc đầu để không tạo đốm ở góc trái trên cùng */
    opacity: 0; 
    transition: transform 0.05s ease-out, opacity 0.3s ease; 
}

/* --- HEADER --- */
header {
    background-color: transparent;
    color: #ffffff;
    padding: 20px 0;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* =========================================
   LOGO DẠNG ẢNH — thay rule .logo cũ (fix 2026-10-30)
   Rule cũ chỉ style cho CHỮ (.logo { font-weight: 700; ... }) nên không
   khống chế được ảnh; ảnh trong nav.ejs lại bị inline style="height: 4rem"
   giữ chặt ở 64px làm nav bar cao quá khổ.
   Cách dùng: TÌM rule .logo cũ trong public/css/style.css và THAY BẰNG
   toàn bộ block dưới đây. (Bản nav.ejs đi kèm đã bỏ inline height 4rem
   để CSS này toàn quyền quyết định kích thước.)
   Giữ lại font-weight/font-size/letter-spacing làm fallback: nếu ảnh lỗi,
   chữ alt "Organic Coffee" vẫn hiện đúng dáng logo.
========================================= */
.logo {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo img {
    height: 2.75rem; /* 44px — vừa nav bar: bar cao 84px thường, 68px khi cuộn */
    width: auto;
    display: block;
    object-fit: contain;
}
/* ==   NAVIGATION & HEADER ACTIONS*/
nav { display: flex; gap: 30px; margin-left: 50px; }
nav a { color: #ffffff; text-decoration: none; font-size: 0.95rem; font-weight: 600; }
nav a:hover { opacity: 0.8; }
.header-actions { display: flex; align-items: center; gap: 15px; }
.lang-btn {
    background: transparent; border: 1px solid #ffffff; color: #ffffff;
    border-radius: 50%; width: 35px; height: 35px;
    display: flex; justify-content: center; align-items: center;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.cart-btn {
    background-color: #E8B856; color: #1A1A1A; border: none;
    padding: 10px 20px; border-radius: 20px;
    font-weight: 700; font-size: 0.9rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 10px 24px rgba(232, 184, 86, 0.22);
}

/* =========================================
   HERO SECTION & HIỆU ỨNG CREDIT
========================================= */
.hero-section {
    background-color: transparent;
    color: #ffffff;
    padding: 30px 0 60px 0;
    position: relative;
    z-index: 2;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.hero-content-wrapper {
    flex: 1;
    max-width: 600px;
    /* BẢN CŨ: overflow: hidden để "giấu" chữ trồi lên — nhưng nó CẮT CỤT mọi
       bóng đổ / hiệu ứng kính tràn ra ngoài, tạo vệt chữ nhật cứng dưới nút
       (đúng lỗi trong ảnh Bo chụp). Bản mới bỏ hẳn overflow: hidden,
       hiệu ứng hiện chữ chuyển sang trồi nhẹ 26px + fade, không cần che. */
    overflow: visible;
    padding-bottom: 10px;
}

.hero-content {
    animation: creditRoll 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform: translateY(26px);
    opacity: 0;
}

@keyframes creditRoll {
    0% { transform: translateY(26px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.hero-subtitle {
    color: #E8B856; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 2px; margin-bottom: 15px; text-transform: uppercase;
}
.hero-title {
    font-family: 'Montserrat', sans-serif; font-size: 4.5rem;
    font-weight: 900; line-height: 1.1; margin-bottom: 25px;
}
.hero-desc {
    font-size: 1.1rem; color: #D1D5DB; line-height: 1.7;
    margin-bottom: 40px; max-width: 90%;
}
.hero-buttons { display: flex; gap: 15px; }

.btn-primary {
    background-color: #E8B856; color: #1A1A1A; border: none;
    padding: 15px 30px; border-radius: 30px; font-weight: 700;
    font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 10px 24px rgba(232, 184, 86, 0.18);
    transition: transform 0.45s var(--ease-liquid), box-shadow 0.45s var(--ease-liquid), opacity 0.3s ease;
    text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { text-decoration: none; }

.btn-primary:hover { opacity: 0.95; transform: translateY(-2px); }
.btn-secondary {
    /* Nút phụ = kính lỏng */
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: #ffffff;
    padding: 15px 30px; border-radius: 30px; font-weight: 700;
    font-size: 0.9rem; cursor: pointer;
    transition: transform 0.45s var(--ease-liquid), border-color 0.45s ease;
}
.btn-secondary:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); }

/* =========================================
   HIỆU ỨNG 5 HẠT CÀ PHÊ RƠI (giữ nguyên)
========================================= */
.hero-image-wrapper {
    flex: 1; display: flex; justify-content: center;
    align-items: center; position: relative; min-height: 500px;
}
.coffee-stack {
    position: relative; width: 250px; height: 480px;
    animation: floatGroup 4s ease-in-out infinite;
    animation-delay: 2.5s; margin-top: 20px;
}
.bean {
    position: absolute; width: 120px; left: 50%;
    transform: translate(-50%, -250px); opacity: 0;
    animation: dropIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.bean-5 { bottom: 0px; animation-delay: 0s; margin-left: -15px; transform: translate(-50%, -250px) rotate(-5deg); }
.bean-4 { bottom: 95px; animation-delay: 0.4s; margin-left: 15px; transform: translate(-50%, -250px) rotate(8deg); }
.bean-3 { bottom: 160px; animation-delay: 0.8s; margin-left: -10px; transform: translate(-50%, -250px) rotate(-2deg); }
.bean-2 { bottom: 225px; animation-delay: 1.2s; margin-left: 20px; transform: translate(-50%, -250px) rotate(10deg); }
.bean-1 { bottom: 320px; animation-delay: 1.6s; margin-left: -15px; transform: translate(-50%, -250px) rotate(-8deg); }

.shadow {
    position: absolute; bottom: -20px; left: 50%;
    transform: translateX(-50%); margin-left: -15px;
    width: 100px; height: 12px; background: rgba(0, 0, 0, 0.7);
    border-radius: 50%; filter: blur(8px);
    animation: pulseShadow 4s ease-in-out infinite;
    animation-delay: 2.5s;
}

@keyframes dropIn {
    0% { transform: translate(-50%, -250px) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    70% { transform: translate(-50%, 15px) rotate(0deg); }
    100% { transform: translate(-50%, 0px) rotate(0deg); opacity: 1; }
}
@keyframes floatGroup {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}
@keyframes pulseShadow {
    0%, 100% { width: 100px; opacity: 0.5; }
    50% { width: 70px; opacity: 0.2; }
}

/* =========================================
   THANH THỐNG KÊ — LIQUID GLASS
========================================= */
.hero-stats {
    max-width: 1200px; margin: 60px auto 0; padding: 0 20px;
    display: flex; gap: 20px;
}
.stat-box {
    flex: 1;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px; padding: 30px 25px;
    transition: transform 0.5s var(--ease-liquid), border-color 0.5s ease;
}
.stat-box:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.20); }
.stat-number {
    font-family: 'Montserrat', sans-serif; font-size: 2.5rem;
    font-weight: 800; color: #E8B856; margin-bottom: 10px;
}
.stat-label {
    font-size: 0.75rem; font-weight: 700; color: #D1D5DB;
    letter-spacing: 1px; text-transform: uppercase;
}

/* =========================================
   MAIN CONTENT (BLOG) — LIQUID GLASS
========================================= */
main {
    flex: 1; max-width: 1200px; margin: 60px auto;
    padding: 0 20px; width: 100%;
    position: relative; z-index: 2;
}
.subtitle {
    color: #E8B856; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px;
}
.page-title {
    font-family: 'Montserrat', sans-serif; font-size: 5rem;
    font-weight: 900; color: #ffffff; line-height: 1; margin-bottom: 50px;
}

.blog-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    width: calc(50% - 15px); min-width: 300px;
    border-radius: 24px; overflow: hidden;
    transition: transform 0.5s var(--ease-liquid), border-color 0.5s ease, box-shadow 0.5s var(--ease-liquid);
}
.blog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 32px 60px rgba(0, 0, 0, 0.28);
}
.img-wrapper { width: 100%; height: 280px; overflow: hidden; }
.blog-card img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: transform 0.8s var(--ease-liquid);
}
.blog-card:hover img { transform: scale(1.05); }
.card-content { padding: 25px 25px 35px 25px; }

.card-title { font-size: 1.4rem; font-weight: 800; color: #ffffff; margin-bottom: 12px; }
.card-desc { font-size: 0.95rem; color: #D1D5DB; line-height: 1.5; }

/* --- FOOTER --- */
footer {
    background-color: transparent;
    color: #ffffff; padding: 50px 0 60px 0;
    position: relative; z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}











/* Responsive */
@media (max-width: 992px) {
    .hero-container { flex-direction: column; text-align: center; }
    .hero-content-wrapper { max-width: 100%; width: 100%; }
    .hero-desc { max-width: 100%; margin: 0 auto 30px auto; }
    .hero-buttons { justify-content: center; }
    .hero-stats { flex-direction: column; }
    .hero-image-wrapper { min-height: 450px; margin-top: 40px; }
}

@media (max-width: 768px) {
    .header-container { flex-direction: column; gap: 30px; align-items: flex-start; }
    nav { margin-left: 0; flex-wrap: wrap; }
    .hero-title { font-size: 3rem; }
    .page-title { font-size: 3.5rem; }
    .blog-card { width: 100%; }
    
}

/* Màn hình cảm ứng / không có chuột: tắt hẳn vệt lỏng */
@media (hover: none) {
    .liquid-cursor { display: none; }
}

/* Người dùng giảm chuyển động: tắt blob trôi + vệt chuột */
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
    .liquid-cursor { display: none; }
}

/* =========================================
   SMART MENU (Bo yêu cầu 2026-10-23, theo mẫu smart header hôm trước)
   - Sticky dính trên cùng (header là con trực tiếp của body,
     không bị kẹt trong wrapper ngắn như lỗi NONPRO hôm trước).
   - Cuộn xuống quá ngưỡng: menu trượt lên ẩn.
   - Cuộn lên: menu hiện lại ngay.
   - Vừa cuộn: menu chuyển sang kính lỏng (mờ + blur) và gọn lại.
========================================= */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.35s ease,
                box-shadow 0.35s ease,
                padding 0.35s ease;
    will-change: transform;
}

header.is-hidden {
    transform: translateY(calc(-100% - 2px));
}

header.is-scrolled {
    padding: 12px 0;
    background: linear-gradient(135deg,
        rgba(38, 40, 34, 0.78) 0%,
        rgba(24, 26, 22, 0.72) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 36px rgba(0, 0, 0, 0.28);
}
/* SMART-MENU-CSS-END */

/* =========================================
   BLOCK "VÌ SAO PHÙ HỢP" (thêm theo mẫu Bo gửi 2026-10-23)
   Đặt sau hero, trước Blog. Thẻ dùng chung ngôn ngữ kính lỏng
   của site nhưng bo góc gọn 12px như mẫu.
========================================= */
.why-section {
    position: relative;
    z-index: 2;
    padding: 70px 0 10px 0;
}
.why-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.why-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.08;
    color: #F5EFE4;
    margin-bottom: 26px;
    max-width: 1000px;
}
.why-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 38px;
}
.why-buy {
    padding: 13px 26px;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.why-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 12px;
    padding: 30px 28px 34px 28px;
    transition: transform 0.5s var(--ease-liquid), border-color 0.5s ease;
}
.why-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.20); }
.why-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1;
    color: #E8B856;
    margin-bottom: 26px;
}
.why-card-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
}
.why-card-desc {
    font-size: 0.98rem;
    color: #C9CFC9;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-actions { justify-content: flex-start; }
    .why-section { padding-top: 50px; }
}




/* --- Bản đồ hương vị --- */






/* --- Hành trình hạt: Ươm / Chọn / Phơi / Rang --- */














/* =========================================
   SẢN PHẨM NỔI BẬT + LIÊN HỆ (Bo yêu cầu 2026-10-23)
========================================= */
.products-section {
    position: relative;
    z-index: 2;
    padding: 70px 0 10px 0;
}
.products-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.products-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.1;
    color: #F5EFE4;
    margin-bottom: 14px;
}
.products-sub {
    color: #C9CFC9;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 640px;
    margin-bottom: 38px;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.product-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--ease-liquid), border-color 0.5s ease;
}
.product-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.20); }
.product-img-wrap { height: 210px; overflow: hidden; }
.product-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.8s var(--ease-liquid);
}
.product-card:hover .product-img { transform: scale(1.05); }
.product-body { padding: 22px 24px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.product-tag {
    color: #E8B856; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 2.5px; margin-bottom: 8px;
}
.product-name { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.product-desc { font-size: 0.93rem; color: #C9CFC9; line-height: 1.55; margin-bottom: 16px; }


.product-btn {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 13px 20px;
    font-size: 0.82rem;
}

/* --- Liên hệ --- */
.contact-section {
    position: relative;
    z-index: 2;
    padding: 70px 0 80px 0;
}
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.1;
    color: #F5EFE4;
    margin-bottom: 38px;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 24px;
    align-items: start;
}
.contact-form {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    padding: 28px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #F5EFE4;
    margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 13px 15px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.form-group textarea { resize: vertical; min-height: 108px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.form-group input:focus,
.form-group textarea:focus {
    border-color: rgba(232, 184, 86, 0.75);
    box-shadow: 0 0 0 3px rgba(232, 184, 86, 0.16);
    background: rgba(255, 255, 255, 0.07);
}
.form-group input.invalid,
.form-group textarea.invalid { border-color: rgba(255, 110, 90, 0.85); }
.form-error { color: #FF9A8A; font-size: 0.88rem; font-weight: 600; margin-bottom: 14px; }
.form-note { color: #A8D8B0; font-size: 0.88rem; line-height: 1.55; margin-top: 14px; }
.form-submit { width: 100%; padding: 15px 20px; }

.channels {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    padding: 28px;
}
.channels-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 18px; }
.channel-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 13px 10px;
    border-radius: 14px;
    transition: background 0.3s ease, transform 0.35s var(--ease-liquid);
}
.channel-card + .channel-card { margin-top: 4px; }
.channel-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(4px); }
.channel-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.15rem; color: #ffffff;
}
.channel-zalo { background-color: #0068FF; }
.channel-fb   { background-color: #1877F2; }
.channel-yt   { background-color: #FF0000; font-size: 0.95rem; }
.channel-mail { background-color: #E8B856; color: #1A1A1A; }
.channel-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.channel-name { color: #ffffff; font-weight: 800; font-size: 0.98rem; }
.channel-sub { color: #B9BFB9; font-size: 0.8rem; line-height: 1.4; }
.channel-arrow { color: #E8B856; font-weight: 800; }

@media (max-width: 992px) {
    .products-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .contact-form, .channels { padding: 22px; }
}

/* =========================================
   NỀN LIQUID GLASS TOÀN TRANG + RÊ CHUỘT MỜ NHÒE NHẸ
   (Bo yêu cầu 2026-10-23)
   - Lớp .liquid-bg CỐ ĐỊNH phủ toàn màn hình, nằm dưới mọi nội dung:
     3 quầng màu (vàng hổ phách / xanh lam / xanh lá ấm) trôi rất chậm
     bằng transform — cuộn trang tới đâu nền lỏng cũng ở đó.
   - 2 blob nền cũ ở body::before/::after được tắt để khỏi chồng lớp.
   - Rê chuột: thấu kính kính (giọt) phình nhẹ, méo hình giọt nước,
     phía sau kéo theo 2 vệt nhòe mờ dần — cảm giác quệt qua mặt kính.
========================================= */
body::before, body::after { display: none; }

.liquid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.liquid-bg i {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.liquid-bg .lb-1 {
    width: 56vmax; height: 56vmax;
    top: -18vmax; left: -12vmax;
    background: radial-gradient(circle, rgba(232, 184, 86, 0.17) 0%, rgba(232, 184, 86, 0) 65%);
    filter: blur(48px);
    animation: liquidDriftA 26s ease-in-out infinite alternate;
}
.liquid-bg .lb-2 {
    width: 52vmax; height: 52vmax;
    bottom: -18vmax; right: -10vmax;
    background: radial-gradient(circle, rgba(96, 148, 205, 0.14) 0%, rgba(86, 232, 150, 0.05) 45%, rgba(86, 232, 150, 0) 70%);
    filter: blur(56px);
    animation: liquidDriftB 32s ease-in-out infinite alternate;
}
.liquid-bg .lb-3 {
    width: 38vmax; height: 38vmax;
    top: 42%; left: 55%;
    background: radial-gradient(circle, rgba(232, 150, 86, 0.09) 0%, rgba(232, 150, 86, 0) 65%);
    filter: blur(52px);
    animation: liquidDriftC 38s ease-in-out infinite alternate;
}
@keyframes liquidDriftC {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-10vw, -7vh, 0) scale(1.15); }
}

/* Vệt nhòe kéo theo sau chuột (JS tự tạo, 2 lớp trễ dần) */
.liquid-ghost {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(232, 184, 86, 0.13) 0%,
        rgba(232, 184, 86, 0.05) 40%,
        rgba(232, 184, 86, 0) 68%);
    opacity: 0;
    transition: opacity 0.7s ease;
    will-change: transform;
}
.liquid-ghost.g1 { width: 300px; height: 300px; z-index: 88; }


/* Thấu kính kính: to hơn một chút, méo hình giọt nước, blur nhẹ 8px */

@keyframes liquidMorph {
    0%   { border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%; }
    50%  { border-radius: 45% 55% 48% 52% / 52% 58% 42% 48%; }
    100% { border-radius: 52% 48% 42% 58% / 45% 52% 55% 50%; }
}

@media (hover: none) {
    .liquid-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .liquid-bg i { animation: none; }
    .liquid-ghost { display: none; }
}

/* =========================================
   CHỮ TRỒI LÊN TRÊN BANNER + GỠ TỰ TẮT HIỆU ỨNG CHUỘT
   (Bo yêu cầu 2026-10-23)
   - Tiêu đề trồi TỪNG DÒNG: mỗi dòng có mặt nạ riêng ôm sát chữ
     (không dùng overflow:hidden ở khung lớn — tránh lỗi cắt bóng nút).
   - Nhãn / mô tả / nút hiện nối tiếp theo nhịp trễ --d.
   - Lớp chuột: gỡ hẳn 2 điều kiện tự tắt theo cài đặt máy
     (prefers-reduced-motion + hover:none ở các đoạn CSS phía trên)
     vì máy bật "tắt hiệu ứng động" là toàn bộ lớp chuột bị ẩn oan.
========================================= */
.hero-content { animation: none; transform: none; opacity: 1; }

.rise {
    display: block;
    overflow: hidden;
    /* Chừa chỗ cho dấu tiếng Việt phía dưới, tránh bị mặt nạ cắt dấu */
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}
.rise-in {
    display: block;
    transform: translateY(112%);
    animation: riseUp 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--d, 0s);
    will-change: transform;
}
@keyframes riseUp {
    to { transform: translateY(0); }
}

.rise-item {
    opacity: 0;
    animation: riseFade 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--d, 0s);
    will-change: transform, opacity;
}
@keyframes riseFade {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Gỡ tự tắt lớp chuột theo cài đặt hệ thống — v13: khôi phục fix v11, chỉ hiện
   lại lớp chuột khi máy vừa giảm chuyển động VỪA có chuột thật; máy cảm ứng
   (hover: none) không bị ép hiện lớp chuột nữa */
@media (prefers-reduced-motion: reduce) and (hover: hover) {
    .liquid-cursor, .liquid-ghost { display: block; }
}

/* =========================================
   BẢN ĐỒ HƯƠNG VỊ — BỐ CỤC MỚI THEO MẪU longalone.id.vn
   (Bo yêu cầu 2026-10-23)
   Trái: danh sách tab dọc (mục đang chọn = nền xanh dương sáng).
   Phải: panel lớn — tiêu đề + gạch nhấn, mô tả, hộp trích,
   danh sách dấu tick, ảnh. Tông navy/xanh dương như mẫu,
   tách riêng khỏi nền kem cũ (.flavor-* cũ không còn dùng).
========================================= */
.flv-section {
    position: relative;
    z-index: 2;
    padding: 76px 0;
    border-radius: 18px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 60%),
        linear-gradient(180deg, #0A1122 0%, #0B1428 100%);
}
.flv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.flv-label {
    color: #38BDF8;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.flv-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    color: #F4F8FF;
    max-width: 720px;
    margin-bottom: 40px;
}
.flv-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    align-items: stretch;
}

/* --- Cột tab trái --- */
.flv-tabs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.flv-tab {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    width: 100%;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid rgba(125, 170, 255, 0.10);
    background: #101A30;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.flv-tab:hover { transform: translateX(4px); background: #13223F; }
.flv-tab.is-active {
    background: linear-gradient(135deg, #14A3E8 0%, #0B76C6 100%);
    border-color: transparent;
    box-shadow: 0 18px 36px rgba(11, 140, 220, 0.30);
}
.flv-tab-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #16263F;
    color: #38BDF8;
}
.flv-tab-icon svg { width: 26px; height: 26px; }
.flv-tab.is-active .flv-tab-icon { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.flv-tab-texts { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flv-tab-name { color: #F4F8FF; font-size: 1.02rem; font-weight: 800; }
.flv-tab-sub { color: #8CA3C7; font-size: 0.85rem; }
.flv-tab.is-active .flv-tab-sub { color: rgba(255, 255, 255, 0.82); }

/* --- Panel phải --- */
.flv-panel {
    background: #0E1830;
    border: 1px solid rgba(125, 170, 255, 0.10);
    border-radius: 18px;
    padding: 38px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 36px;
    align-items: stretch;
}
.flv-panel.flv-swap .flv-panel-text,
.flv-panel.flv-swap .flv-panel-media { animation: flvFade 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes flvFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flv-panel-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #FFFFFF;
    padding-bottom: 14px;
    margin-bottom: 20px;
    position: relative;
}
.flv-panel-name::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 52px; height: 3px;
    border-radius: 3px;
    background: #14A3E8;
}
.flv-panel-desc {
    color: #B9C7DE;
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.flv-quote {
    background: #16263F;
    border-radius: 12px;
    padding: 18px 20px;
    color: #DCE8F8;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 24px;
}
.flv-list { list-style: none; }
.flv-list li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 14px;
    color: #D7E2F2;
    font-size: 0.95rem;
    line-height: 1.5;
}
.flv-list li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    width: 22px; height: 22px;
    border: 1.5px solid #2FB3F0;
    border-radius: 50%;
    color: #2FB3F0;
    font-size: 0.72rem;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.flv-panel-media { min-height: 100%; }
.flv-panel-media img {
    width: 100%; height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

@media (max-width: 992px) {
    .flv-layout { grid-template-columns: 1fr; }
    .flv-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .flv-panel { grid-template-columns: 1fr; padding: 28px; }
    .flv-panel-media img { min-height: 240px; max-height: 300px; }
}
@media (max-width: 640px) {
    .flv-tabs { grid-template-columns: 1fr; }
    .flv-tab:hover { transform: none; }
}

/* =========================================
   ĐỒNG BỘ MÀU KHỐI TAB + CHUỘT BẢN NHẸ (Bo sửa 2026-10-23 tối)
   - Bỏ tông navy/xanh dương lạc quẻ: khối tab về palette ấm của trang
     (nền tối ấm, nhấn VÀNG #E8B856 như nút bấm và các khối khác).
   - Chuột: bỏ hẳn "cục" kính (giọt 156px có viền — nhìn như cục to
     che nội dung). Từ giờ chỉ còn quầng sáng mềm, không viền, không đặc.
   Đoạn này nằm cuối file nên thắng các rule navy/cursor phía trên.
========================================= */
.flv-section {
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(232, 184, 86, 0.10) 0%, rgba(232, 184, 86, 0) 60%),
        linear-gradient(180deg, #171914 0%, #141610 100%);
}
.flv-label { color: #E8B856; }
.flv-title { color: #F5EFE4; }
.flv-tab {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
}
.flv-tab:hover { background: rgba(255, 255, 255, 0.07); }
.flv-tab.is-active {
    background: linear-gradient(135deg, #EFC26B 0%, #DFA83F 100%);
    box-shadow: 0 18px 36px rgba(223, 168, 63, 0.25);
}
.flv-tab-icon { background: rgba(232, 184, 86, 0.12); color: #E8B856; }
.flv-tab.is-active .flv-tab-icon { background: rgba(26, 26, 26, 0.16); color: #1A1A1A; }
.flv-tab-name { color: #F5EFE4; }
.flv-tab.is-active .flv-tab-name { color: #1A1A1A; }
.flv-tab-sub { color: #A9AEA9; }
.flv-tab.is-active .flv-tab-sub { color: rgba(26, 26, 26, 0.72); }
.flv-panel {
    background: var(--glass-bg);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: var(--glass-shadow);
}
.flv-panel-step {
    color: #E8B856;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
}
.flv-panel-name { color: #FFFFFF; }
.flv-panel-name::after { background: #E8B856; }
.flv-panel-desc { color: #D8DCD8; }
.flv-quote {
    background: rgba(232, 184, 86, 0.08);
    color: #EDE6D6;
}
.flv-list li { color: #D8DCD8; }
.flv-list li::before { border-color: #E8B856; color: #E8B856; }

/* --- Chuột bản nhẹ: không cục, không viền --- */

.liquid-cursor {
    transition: opacity 0.5s ease;
    animation: liquidMorph 11s ease-in-out infinite alternate;
}
.liquid-ghost { transition: opacity 0.7s ease; }

/* =========================================
   BLOG CAROUSEL (theo mẫu longalone, Bo yêu cầu 2026-10-23 tối)
   Hiện 4 bài mới nhất; nút tròn góc phải + vuốt để trượt ngang
   xem bài khác. Tông vàng đồng bộ trang (không navy).
========================================= */
.blog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 34px;
}
.blog-head .page-title { margin-bottom: 10px; }
.blog-head-desc { color: #A9AEA9; font-size: 0.98rem; line-height: 1.6; max-width: 560px; }
.blog-nav { display: flex; gap: 12px; flex-shrink: 0; padding-bottom: 4px; }
.blog-nav-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 184, 86, 0.55);
    background: transparent;
    color: #E8B856;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}
.blog-nav-btn:hover { background: #E8B856; color: #1A1A1A; }
.blog-nav-btn:active { transform: scale(0.94); }
.blog-nav-btn.is-disabled { opacity: 0.28; pointer-events: none; }
.blog-viewport { overflow: hidden; }
.blog-track {
    display: flex;
    gap: 24px;
    transition: transform 0.55s var(--ease-liquid);
    will-change: transform;
}
.blog-track .blog-card {
    flex: 0 0 calc((100% - 72px) / 4);
    display: flex; flex-direction: column;
    background: #1D201B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
}
.blog-track .img-wrapper { aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; }
.blog-track .img-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s var(--ease-liquid);
}
.blog-track .blog-card:hover .img-wrapper img { transform: scale(1.05); }
.blog-track .card-content { padding: 22px; display: flex; flex-direction: column; }
.blog-track .card-meta {
    color: #E8B856;
    font-size: 0.7rem; font-weight: 800;
    letter-spacing: 1.8px; text-transform: uppercase;
    margin-bottom: 9px;
}
.blog-track .card-title { color: #FFFFFF; font-size: 1.13rem; line-height: 1.38; margin-bottom: 10px; }
.blog-track .card-desc { color: #A9AEA9; font-size: 0.92rem; line-height: 1.62; }
@media (max-width: 1024px) {
    .blog-track .blog-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
    .blog-track .blog-card { flex-basis: 100%; }
    .blog-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================
   SỬA THẺ BLOG BỊ CẮT + NÚT XEM TẤT CẢ SẢN PHẨM (2026-10-23 tối)
   Nguyên nhân thẻ thứ 4 bị cắt: rule gốc .blog-card có
   min-width: 300px và width: calc(50% - 15px) — 4 thẻ x 300px
   + khoảng cách > khung chứa nên tràn. Gỡ ngay tại đây.
   Ảnh bị cao 280px cố định do rule gốc .img-wrapper height,
   nên trả height về auto để tỉ lệ 4:3 chạy đúng.
========================================= */
.blog-track .blog-card { min-width: 0; width: auto; }
.blog-track .img-wrapper { height: auto; }
.products-more { text-align: center; margin-top: 36px; }
.btn-outline-gold {
    display: inline-block;
    padding: 14px 34px;
    border: 1.5px solid rgba(232, 184, 86, 0.6);
    border-radius: 999px;
    color: #E8B856;
    font-size: 0.82rem; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-outline-gold:hover { background: #E8B856; color: #1A1A1A; border-color: #E8B856; }

/* Giá sản phẩm + mô tả khối liên hệ + link trong thẻ blog (port nội dung thật 2026-10-23) */
.product-price {
    color: #E8B856;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 2px 0 8px;
}
.contact-sub { color: #A9AEA9; font-size: 0.98rem; line-height: 1.65; max-width: 620px; margin-top: 10px; }
.blog-track .card-title a { color: inherit; text-decoration: none; }
.blog-track .card-title a:hover { color: #E8B856; }

/* =========================================
   GOOGLE MAP + FOOTER MỚI THEO MẪU (2026-10-23 tối)
   Footer: brand + social tròn | Liên kết nhanh |
   Sản phẩm & dịch vụ | Liên hệ — thanh copyright dưới.
   Tông tối ấm + vàng đồng bộ trang.
========================================= */
.map-section { padding: 70px 20px 10px; position: relative; z-index: 2; }
.map-container { max-width: 1200px; margin: 0 auto; }
.map-title { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 22px; }
.map-frame {
    border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}
.map-frame iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(25%); }

.site-footer { position: relative; z-index: 2; margin-top: 60px; }
.footer-container2 { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-grid2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 44px;
    padding: 56px 0 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* =========================================
   FOOTER LOGO DẠNG ẢNH (fix 2026-10-30)
   Thay chữ "Organic Coffee" bằng ảnh logo trong modules/footer:
     Cũ: <div class="footer-logo2">Organic Coffee</div>
     Mới: <div class="footer-logo2"><img src="/img/logo.webp" alt="Organic Coffee"></div>
   (dùng đúng file /img/logo.webp mà nav bar đang dùng.)

   Vì sao ảnh mới "đều" được với các cột khác, còn chữ thì không:
   - Tiêu đề các cột khác (h4): chữ 1rem × line-height 1.6 = 25.6px
     + margin-bottom 18px = khối cao 43.6px.
   - Logo chữ cũ: chữ 1.7rem × line-height 1.6 = 43.5px
     + margin-bottom 16px = khối cao 59.5px → cột brand lún xuống
     ~16px so với các cột khác.
   - Logo ảnh: cao đúng 1.7rem (27.2px, không chịu line-height)
     + margin-bottom 16px = khối cao 43.2px ≈ 43.6px của h4
     → mô tả và link các cột bắt đầu ngang nhau.
   Cách dùng: THAY rule .footer-logo2 cũ trong public/css/style.css
   bằng block dưới đây (giữ font làm fallback khi ảnh lỗi).
========================================= */
.footer-logo2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.footer-logo2 img {
    height: 1.7rem; /* 27.2px — khớp khối tiêu đề h4 các cột khác */
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-desc2 { color: #A9AEA9; font-size: 0.94rem; line-height: 1.7; max-width: 400px; margin-bottom: 22px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #D8DCD8;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-social a:hover { background: #E8B856; border-color: #E8B856; color: #1A1A1A; }
.footer-col h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
.footer-col a {
    display: block; color: #A9AEA9; text-decoration: none;
    font-size: 0.94rem; margin-bottom: 11px;
    transition: color 0.25s ease;
}
.footer-col a:hover { color: #E8B856; }
.footer-contact-line { color: #A9AEA9; font-size: 0.94rem; line-height: 1.55; margin-bottom: 11px; }
.footer-contact-line strong { color: #E8DCC2; font-weight: 700; }
.footer-bottom {
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
    padding: 22px 20px;
    color: #A9AEA9; font-size: 0.9rem;
}
.footer-bottom strong { color: #fff; }
@media (max-width: 900px) {
    .footer-grid2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-grid2 { grid-template-columns: 1fr; }
    .map-frame iframe { height: 300px; }
}

/* =========================================
   TRANG CỬA HÀNG (shop.html) — banner theo mẫu About:
   chữ mờ lớn sau lưng, tiêu đề giữa, hàng pill dấu tích
   làm category lọc sản phẩm. (2026-10-23 tối)
========================================= */
.page-banner {
    position: relative;
    text-align: center;
    padding: 150px 20px 56px;
    overflow: hidden;
    z-index: 1;
}
.banner-ghost {
    position: absolute; inset: 0;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 92px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(4rem, 13vw, 10.5rem);
    font-weight: 900; letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    pointer-events: none; user-select: none;
}
.banner-inner { position: relative; max-width: 860px; margin: 0 auto; }
.banner-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 3.9rem);
    font-weight: 900; color: #fff; line-height: 1.12; margin-bottom: 16px;
}
.banner-sub { color: #C9CDC9; font-size: 1.02rem; line-height: 1.65; max-width: 620px; margin: 0 auto; }
.cat-pills {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; margin-top: 34px;
}
.cat-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px 10px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #EDEBE4; font-size: 0.92rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cat-pill .cat-check {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(232, 184, 86, 0.22); color: #E8B856;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}
.cat-pill .cat-count { color: #9AA39C; font-size: 0.8rem; font-weight: 700; }
.cat-pill:hover { border-color: rgba(232, 184, 86, 0.5); }
.cat-pill.is-active {
    background: linear-gradient(135deg, #EFC26B 0%, #DFA83F 100%);
    border-color: transparent; color: #1A1A1A;
}
.cat-pill.is-active .cat-check { background: rgba(26, 26, 26, 0.85); color: #EFC26B; }
.cat-pill.is-active .cat-count { color: rgba(26, 26, 26, 0.65); }
.shop-section { padding-top: 26px; }
.shop-count { color: #9AA39C; font-size: 0.9rem; margin-bottom: 20px; }
.product-specs {
    color: #9AA39C; font-size: 0.82rem; line-height: 1.55;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    padding-top: 10px; margin-bottom: 16px;
}
.product-card.is-hidden { display: none; }

/* Ảnh sản phẩm ở trang SHOP hiển thị TRỌN VẸN trong ô (Bo yêu cầu 2026-10-24):
   object-fit: contain thay cho cover (cover cắt mất phần trên/dưới của gói),
   nền ô sáng ấm để ảnh gói/chai nền trắng-trong suốt nhìn sạch và đủ hình. */
.shop-section .product-img-wrap {
    background: #F7F3EA;
    height: 240px;
}
.shop-section .product-img {
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}

/* =========================================
   TRANG BLOG (blog.html) — bố cục như mẫu Features:
   mỗi khối lớn = trái bài NỔI BẬT (ảnh lớn + trích dài),
   phải lưới 2x2 các bài khác. Tổng 3 khối, 15 bài.
========================================= */
.blog-block { padding: 44px 20px 8px; position: relative; z-index: 2; }
.blog-block-container { max-width: 1200px; margin: 0 auto; }
.blog-block-head { margin-bottom: 26px; }
.blog-block-title { font-family: 'Montserrat', sans-serif; font-size: 1.9rem; font-weight: 800; color: #fff; }
.blog-block-layout {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 40px;
    align-items: start;
}
.feat-post {
    background: #1D201B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
}
.feat-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-liquid); }
.feat-post:hover .feat-media img { transform: scale(1.04); }
.feat-meta {
    color: #E8B856; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 1.8px; text-transform: uppercase;
    padding: 20px 24px 0;
}
.feat-title { font-size: 1.55rem; line-height: 1.3; padding: 8px 24px 0; }
.feat-title a { color: #fff; text-decoration: none; }
.feat-title a:hover { color: #E8B856; }
.feat-excerpt { color: #A9AEA9; font-size: 0.96rem; line-height: 1.7; padding: 10px 24px 0; }
.feat-more {
    display: inline-block; padding: 14px 24px 24px;
    color: #E8B856; font-weight: 700; font-size: 0.92rem; text-decoration: none;
}
.feat-more:hover { color: #F2CD82; }
.post-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.post-mini {
    background: #1D201B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(232, 184, 86, 0.0);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.post-mini:hover { border-left-color: #E8B856; transform: translateY(-3px); }
.post-mini-media { display: block; height: 128px; overflow: hidden; }
.post-mini-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-mini-body { padding: 16px 18px 18px; }
.post-mini-meta {
    color: #E8B856; font-size: 0.66rem; font-weight: 800;
    letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 7px;
}
.post-mini-title { font-size: 1.0rem; line-height: 1.35; margin-bottom: 7px; }
.post-mini-title a { color: #fff; text-decoration: none; }
.post-mini-title a:hover { color: #E8B856; }
.post-mini-excerpt {
    color: #A9AEA9; font-size: 0.87rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) {
    .blog-block-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .post-grid2 { grid-template-columns: 1fr; }
}


/* =========================================
   TRANG CHI TIẾT SẢN PHẨM (product.html) — 1 file dùng chung cho 18 sản phẩm.
   Bố cục theo mẫu longalone (Bo yêu cầu 2026-10-24): trái tiêu đề + mô tả,
   phải 3 ô ảnh, dưới 4 ô thông tin chính; tông vàng kem của project.
========================================= */
.pd-card-link { color: inherit; text-decoration: none; }
.product-img-wrap a.pd-card-link { display: block; height: 100%; }
.pd-wrap { max-width: 1200px; margin: 0 auto; padding: 150px 20px 40px; position: relative; z-index: 2; }
.pd-crumb { margin-bottom: 26px; }
.pd-crumb a { color: #E8B856; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.pd-crumb a:hover { color: #F2CD82; }
.pd-empty { text-align: center; padding: 80px 20px; color: #C9CDC9; }
.pd-empty h2 { font-family: 'Montserrat', sans-serif; color: #fff; margin-bottom: 10px; }
.pd-hero { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: start; }
.pd-pill {
    display: inline-block; padding: 7px 16px; border-radius: 999px;
    background: linear-gradient(135deg, #EFC26B 0%, #DFA83F 100%);
    color: #1A1A1A; font-size: 0.72rem; font-weight: 800; letter-spacing: 1.6px;
}
.pd-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900;
    color: #fff; line-height: 1.15; margin: 18px 0 10px;
}
.pd-price { font-size: 1.6rem; font-weight: 800; color: #E8B856; margin-bottom: 16px; }
.pd-desc { color: #C9CDC9; line-height: 1.8; font-size: 1.02rem; }
.pd-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.btn-ghost {
    display: inline-block; padding: 12px 22px; border-radius: 999px;
    border: 1px solid rgba(232, 184, 86, 0.55); color: #EFC26B;
    font-weight: 700; font-size: 0.92rem; text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}
.btn-ghost:hover { background: rgba(232, 184, 86, 0.14); color: #F2CD82; }
.pd-gallery { display: grid; gap: 16px; }
.pd-gal-main {
    background: #F7F3EA; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.pd-gal-main img { width: 100%; height: 420px; object-fit: contain; padding: 18px; display: block; box-sizing: border-box; }
.pd-gal-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-gal-thumb { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: #1D201B; }
.pd-gal-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.pd-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.pd-info-box {
    background: #1D201B; border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #E8B856; border-radius: 16px; padding: 22px 20px;
}
.pd-info-icon { color: #E8B856; margin-bottom: 12px; }
.pd-info-title { font-family: 'Montserrat', sans-serif; font-size: 1.02rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.pd-info-text { color: #A9AEA9; font-size: 0.9rem; line-height: 1.6; }
.pd-related { margin-top: 56px; }
.pd-related-title { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 20px; }
.pd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pd-rel-card { background: #1D201B; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.pd-rel-card img { width: 100%; height: 150px; object-fit: contain; background: #F7F3EA; padding: 10px; box-sizing: border-box; display: block; }
.pd-rel-body { padding: 14px 16px 18px; }
.pd-rel-name { color: #fff; font-weight: 700; font-size: 0.95rem; }
.pd-rel-price { color: #E8B856; font-weight: 700; font-size: 0.9rem; margin-top: 4px; }
@media (max-width: 900px) {
    .pd-hero { grid-template-columns: 1fr; }
    .pd-info { grid-template-columns: 1fr 1fr; }
    .pd-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .pd-info, .pd-related-grid { grid-template-columns: 1fr; }
    .pd-gal-main img { height: 300px; }
}

/* =========================================
   TRANG CHI TIẾT BÀI VIẾT (article.html) — 1 file dùng chung cho 15 bài.
   Bố cục theo mẫu longalone (Bo yêu cầu 2026-10-24): trái ảnh + thẻ tóm tắt nổi,
   phải tiêu đề + mô tả + pill từ khóa; dưới carousel 4 ô bài khác tự trượt ngang.
========================================= */
.at-wrap { max-width: 1200px; margin: 0 auto; padding: 150px 20px 40px; position: relative; z-index: 2; }
.at-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.at-photo { position: relative; margin-bottom: 28px; }
.at-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; border: 1px solid rgba(255, 255, 255, 0.08); }
.at-overlay {
    position: absolute; left: 20px; right: 20px; bottom: -28px;
    background: linear-gradient(135deg, #EFC26B 0%, #DFA83F 100%);
    color: #1A1A1A; border-radius: 16px; padding: 20px 22px;
    display: flex; gap: 14px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.at-overlay-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 26, 26, 0.15); display: flex; align-items: center; justify-content: center; }
.at-overlay-title { font-weight: 800; margin-bottom: 4px; }
.at-overlay-text { font-size: 0.9rem; line-height: 1.55; }
.at-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900;
    color: #fff; line-height: 1.2; margin: 18px 0 0;
}
.at-meta { color: #9AA39C; font-size: 0.85rem; letter-spacing: 1.4px; margin: 12px 0 16px; }
.at-desc p { color: #C9CDC9; line-height: 1.8; margin-bottom: 14px; }
.at-keys-title { font-weight: 800; color: #fff; margin: 22px 0 12px; }
.at-keys { display: flex; flex-wrap: wrap; gap: 10px; }
.at-key { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; color: #EDEBE4; }
.at-key .at-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(232, 184, 86, 0.22); color: #E8B856; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; }
.at-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.at-related { margin-top: 72px; }
.at-related-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.at-related-title { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; }
.at-rel-nav { display: flex; gap: 10px; }
.at-rel-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: #EDEBE4; cursor: pointer; font-size: 1.4rem; line-height: 1; }
.at-rel-nav button:hover { border-color: #E8B856; color: #E8B856; }
.at-viewport { overflow: hidden; }
.at-track { display: flex; gap: 18px; transition: transform 0.6s var(--ease-liquid); }
.at-card { flex: 0 0 calc(25% - 13.5px); background: #1D201B; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; }
.at-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.at-card-body { padding: 14px 16px 18px; }
.at-card-meta { color: #E8B856; font-size: 0.66rem; font-weight: 800; letter-spacing: 1.6px; margin-bottom: 7px; }
.at-card-title { color: #fff; font-weight: 700; font-size: 0.98rem; line-height: 1.35; margin-bottom: 7px; }
.at-card-excerpt { color: #A9AEA9; font-size: 0.85rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) {
    .at-card { flex-basis: calc(50% - 9px); }
}
@media (max-width: 900px) {
    .at-hero { grid-template-columns: 1fr; }
    .at-overlay { position: static; margin-top: 16px; }
    .at-photo { margin-bottom: 0; }
}
@media (max-width: 640px) {
    .at-card { flex-basis: 100%; }
}

/* =========================================
   GIỎ HÀNG (cart.html + badge header + nút shop) — v16.
========================================= */
.cart-count {
    display: none; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px;
    border-radius: 999px; background: #1A1A1A; color: #E8B856;
    font-size: 0.7rem; font-weight: 800;
}
button.product-btn { font-family: inherit; }
.product-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.product-actions .product-btn { margin-top: 0; flex: 1 1 120px; }
.cart-wrap { max-width: 1200px; margin: 0 auto; padding: 150px 20px 40px; position: relative; z-index: 2; }
.cart-title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: 28px; }
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
.cart-section { background: #1D201B; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 24px; margin-bottom: 22px; }
.cart-sec-title { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 18px; }
.cart-item { display: grid; grid-template-columns: 84px 1fr auto auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cart-item:last-child { border-bottom: none; }
.cart-item img { width: 84px; height: 84px; object-fit: contain; background: #F7F3EA; border-radius: 12px; padding: 6px; box-sizing: border-box; }
.cart-item-name { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.cart-item-price { color: #9AA39C; font-size: 0.85rem; margin-top: 4px; }
.cart-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #EDEBE4; font-size: 1rem; cursor: pointer; }
.cart-qty button:hover { border-color: #E8B856; color: #E8B856; }
.cart-qty span { min-width: 20px; text-align: center; font-weight: 700; color: #fff; }
.cart-item-total { color: #E8B856; font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.cart-remove { background: transparent; border: none; color: #9AA39C; font-size: 1rem; cursor: pointer; padding: 4px; }
.cart-remove:hover { color: #E57373; }
.cart-empty { color: #C9CDC9; line-height: 1.7; }
.cart-field { margin-bottom: 16px; }
.cart-field label { display: block; color: #EDEBE4; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.cart-field input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
    background: #12140F; border: 1px solid rgba(255, 255, 255, 0.12);
    color: #EDEBE4; font-size: 0.95rem; font-family: inherit; outline: none;
}
.cart-field input:focus { border-color: #E8B856; }
.cart-error { color: #E57373; font-size: 0.82rem; margin-top: 6px; }
.cart-radio {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 12px; cursor: pointer; color: #EDEBE4;
}
.cart-radio input[type="radio"] { accent-color: #E8B856; margin-top: 3px; }
.cart-note { color: #9AA39C; font-size: 0.85rem; line-height: 1.6; }
.cart-aside .cart-summary { position: sticky; top: 110px; }
.cart-line { display: flex; justify-content: space-between; color: #C9CDC9; font-size: 0.92rem; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cart-line-total { color: #fff; font-size: 1.05rem; border-bottom: none; padding-top: 14px; }
.cart-line-total strong { color: #E8B856; }
.btn-block { width: 100%; text-align: center; margin-top: 16px; }
#placeOrder:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.cart-success-check {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
    background: rgba(232, 184, 86, 0.18); color: #E8B856;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800;
}
@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-aside .cart-summary { position: static; }
    .cart-item { grid-template-columns: 64px 1fr auto; }
    .cart-item img { width: 64px; height: 64px; }
    .cart-item-total { grid-column: 2; }
    .cart-remove { grid-column: 3; grid-row: 1; }
}

/* =========================================
   NÚT HOTLINE NỔI + ẢNH TRANG CHỦ LẤY PHẦN TRÊN — v17 (Bo yêu cầu 2026-10-24).
========================================= */
/* Ảnh sản phẩm TRANG CHỦ phủ kín khung nhưng lấy PHẦN TRÊN của ảnh
   (object-position: top) thay cho canh giữa — để đầu gói/nhãn hiệu không bị cắt.
   Chỉ áp dụng cho #san-pham (trang chủ); trang shop giữ nguyên contain trọn vẹn. */
#san-pham .product-img { object-position: top center; transform-origin: top center; }
/* Nút hotline luôn hiển thị góc dưới bên phải, vòng lan tỏa nhấp nháy. */
.hotline-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 999;
    display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.hotline-label {
    background: #1D201B; border: 1px solid rgba(232, 184, 86, 0.55); color: #EFC26B;
    padding: 11px 16px; border-radius: 999px; font-weight: 800; font-size: 0.85rem;
    letter-spacing: 0.4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.hotline-ring {
    position: relative; width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #EFC26B 0%, #DFA83F 100%);
    display: flex; align-items: center; justify-content: center; color: #1A1A1A;
    box-shadow: 0 12px 30px rgba(232, 184, 86, 0.35);
    animation: hotlineGlow 2s ease-in-out infinite;
}
.hotline-ring::before, .hotline-ring::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(232, 184, 86, 0.65);
    animation: hotlinePulse 2s ease-out infinite; pointer-events: none;
}
.hotline-ring::after { animation-delay: 1s; }
@keyframes hotlinePulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
}
@keyframes hotlineGlow {
    0%, 100% { box-shadow: 0 12px 30px rgba(232, 184, 86, 0.35); }
    50% { box-shadow: 0 12px 38px rgba(232, 184, 86, 0.65); }
}
@media (max-width: 640px) {
    .hotline-label { display: none; }
    .hotline-float { right: 16px; bottom: 16px; }
    .hotline-ring { width: 54px; height: 54px; }
}
/* =========================================
   SMART MENU — BẢN EJS (fix 2026-10-30)
   Vì sao phải có block này:
   - Layout main.ejs đặt menu trong <section id="header-section">, KHÔNG có
     thẻ <header> làm con trực tiếp của <body> như bản web tĩnh.
   - Class sticky-top của Bootstrap trên section đã chết vì Bootstrap bị
     comment out khỏi layout, nên section không tự dính được.
   - Header là con trong section cao đúng bằng chính nó: nếu đặt sticky ở
     header thì nó không có khoảng trượt, cuộn tới đâu menu trôi tới đó
     (đúng lỗi "menu chết 1 chỗ, không chạy theo").
   Cách sửa: đặt sticky + ẩn/hiện + kính lỏng ở CHÍNH section, còn header
   bên trong chỉ thu gọn padding khi đã cuộn.
   Cách dùng: chép toàn bộ block này vào CUỐI file public/css/style.css
   của project EJS (không cần sửa rule nào có sẵn).
========================================= */
#header-section {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.35s ease,
                box-shadow 0.35s ease;
    will-change: transform;
}

#header-section.is-hidden {
    transform: translateY(calc(-100% - 2px));
}

#header-section.is-scrolled {
    background: linear-gradient(135deg,
        rgba(38, 40, 34, 0.78) 0%,
        rgba(24, 26, 22, 0.72) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 36px rgba(0, 0, 0, 0.28);
}

/* Thu gọn chiều cao menu khi đã cuộn (hiệu ứng "gọn lại" của bản gốc) */
#header-section header {
    transition: padding 0.35s ease;
}

#header-section.is-scrolled header {
    padding: 12px 0;
}

/* FIX: bỏ gạch ngang ở đầu footer.
   Cái "gạch đầu" này KHÔNG phải bullet của list (footer thật không có
   <ul><li> nào — link là thẻ <a> trần trong .footer-col, xem ảnh DevTools
   của anh). Nó là 2 đường border-top chồng nhau ở đầu footer:
     1. footer { border-top: 1px solid rgba(255,255,255,0.05); } — full-width
     2. .footer-grid2 { border-top: 1px solid rgba(255,255,255,0.08); } — theo
        chiều rộng container, cách đường 1 một khoảng bằng padding-top 50px
   nên nhìn như 2 gạch song song ở đầu footer.
   Cách dùng: chèn khối này vào CUỐI file public/css/style.css của project
   EJS (bản localhost:3009 đang chạy), rồi Ctrl+Shift+R (đổi CSS nên không
   cần restart Node). Chỉ bỏ 2 đường kẻ, khoảng cách/bố cục footer giữ nguyên.
   Các file footer-list-fix.css / footer-list-fix-v2.css trước đó nhắm vào
   bullet của list nên KHÔNG có tác dụng với footer này — không cần dùng nữa. */
footer, .site-footer {
  border-top: none !important;
}
.footer-grid2 {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}
/* =========================================
   GIỎ HÀNG — BỚT KHOẢNG TRỐNG TRÊN/DƯỚI (2026-10-31)
   Nguyên nhân: trang /cart bị chồng 3 khoảng cùng lúc —
   (1) thẻ <main> ngoài của layout có margin 60px trên/dưới,
   (2) .cart-wrap có padding-top 150px (vốn để chừa cho header
   FIXED của bản tĩnh, còn layout EJS dùng header STICKY nằm
   trong luồng nên không cần chừa), (3) footer margin-top 60px.
   Cách sửa: chỉ thu hẹp đúng trang giỏ (nhận diện qua .cart-wrap
   bên trong), các trang khác giữ nguyên.
   Cách dùng: chép toàn bộ block này vào CUỐI file public/css/style.css
   của project EJS (không cần sửa rule nào có sẵn, không cần restart).
   ========================================= */
main:has(.cart-wrap) { margin-top: 0; margin-bottom: 0; }
main .cart-wrap { margin: 0 auto; padding: 24px 20px 24px; }
body:has(.cart-wrap) .site-footer { margin-top: 32px; }
/* ===== [deploy-fix 2026-11-01] Noi dung bai viet: list-group/table cua editor ===== */
/* Editor (nut Bang/Muc luc trong article-editor.js + file Mau bai) chen class
   list-group/table vao noi dung bai. Trang khach KHONG nap Bootstrap CSS nen
   cac class nay hien khong co kieu gi (danh sach chay lien, bang khong vien).
   Khoi nay dinh nghia lai chung theo theme toi cua site, ap cho ca bai post
   (.at-body) va bai dich vu (article.prose). Chen o CUOI file style.css. */
.at-body .list-group, article.prose .list-group { display: flex; flex-direction: column; padding-left: 0; margin: 0 0 16px; }
.at-body .list-group-item, article.prose .list-group-item { position: relative; display: block; padding: 10px 14px; color: #EDEBE4; background: #21221C; border: 1px solid #3A3C30; text-decoration: none; }
.at-body .list-group-item + .list-group-item, article.prose .list-group-item + .list-group-item { border-top: none; }
.at-body .list-group-item:first-child, article.prose .list-group-item:first-child { border-radius: 12px 12px 0 0; }
.at-body .list-group-item:last-child, article.prose .list-group-item:last-child { border-radius: 0 0 12px 12px; }
.at-body a.list-group-item:hover, article.prose a.list-group-item:hover { background: #26281F; color: #E8B856; }
.at-body .table, article.prose .table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; color: #EDEBE4; }
.at-body .table th, .at-body .table td, article.prose .table th, article.prose .table td { padding: 10px 12px; border: 1px solid #2E3027; text-align: left; }
.at-body .table th, article.prose .table th { color: #E8B856; }
.at-body .table-striped tbody tr:nth-child(odd), article.prose .table-striped tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }