/* =========================================================
   DUCULABA V2 — Design System (Bootstrap 5.3 theme layer)
   Theo "Design Guideline Final v1.0" + S01/S02 sheets.
   - Màu, bo góc, shadow, typography khai báo 1 lần ở :root
   - Light / Dark dùng data-bs-theme của Bootstrap
   - Layout & responsive: ưu tiên class Bootstrap trong HTML;
     file này chỉ bổ sung phần nhận diện thương hiệu.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root,
[data-bs-theme="light"] {
  /* Palette gốc (không đổi giữa 2 mode) */
  --dcl-brown: #4E342E;
  --dcl-brown-dark: #3E2723;
  --dcl-beige: #D7B58A;
  --dcl-cream: #F5EFE6;
  --dcl-orange: #E67E22;
  --dcl-green: #2E7D32;
  --dcl-blue: #1976D2;
  --dcl-red: #EF5350;
  --dcl-gray: #6B7280;
  --dcl-star: #F2A900;

  /* Token theo mode */
  --dcl-primary: #4E342E;          /* nền nút chính */
  --dcl-primary-hover: #3E2723;
  --dcl-primary-active: #2E1C18;
  --dcl-on-primary: #FFFFFF;       /* chữ trên nút chính */
  --dcl-primary-text: #4E342E;     /* chữ/link nhấn */
  --dcl-surface: #FFFFFF;          /* nền card */
  --dcl-soft: #F8F2EA;             /* nền nhạt: icon, chip hover */
  --dcl-section: #FBF8F4;          /* nền section xen kẽ */
  --dcl-border: #ECE3D9;
  --dcl-price: #D32F2F;
  --dcl-hero-fade: 245, 239, 230;  /* rgb của cream để phủ hero */
  --dcl-footer-bg: #F5EFE6;

  --dcl-radius-sm: 4px;
  --dcl-radius: 8px;
  --dcl-radius-lg: 12px;
  --dcl-radius-xl: 16px;
  --dcl-shadow-1: 0 1px 3px rgba(62, 39, 35, .08), 0 1px 2px rgba(62, 39, 35, .04);
  --dcl-shadow-2: 0 10px 28px rgba(62, 39, 35, .12);

  --dcl-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dcl-font-script: "Dancing Script", cursive;
  --dcl-font-logo: "Lobster", cursive;
  --dcl-header-h: 0px;

  /* Map vào biến Bootstrap */
  --bs-body-font-family: var(--dcl-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: #2B211E;
  --bs-body-color-rgb: 43, 33, 30;
  --bs-body-bg: #FFFFFF;
  --bs-emphasis-color: #1F1714;
  --bs-secondary-color: rgba(43, 33, 30, .68);
  --bs-tertiary-bg: #FBF8F4;
  --bs-secondary-bg: #F5EFE6;
  --bs-border-color: #ECE3D9;
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
  --bs-primary: #4E342E;
  --bs-primary-rgb: 78, 52, 46;
  --bs-primary-bg-subtle: #F3E9DE;
  --bs-primary-border-subtle: #E3CFBA;
  --bs-primary-text-emphasis: #4E342E;
  --bs-success-rgb: 46, 125, 50;
  --bs-warning-rgb: 230, 126, 34;
  --bs-danger-rgb: 239, 83, 80;
  --bs-info-rgb: 25, 118, 210;
  --bs-link-color: #4E342E;
  --bs-link-color-rgb: 78, 52, 46;
  --bs-link-hover-color: #2E1C18;
  --bs-link-hover-color-rgb: 46, 28, 24;
  --bs-focus-ring-color: rgba(215, 181, 138, .45);
  --bs-heading-color: #1F1714;
}

[data-bs-theme="dark"] {
  --dcl-primary: #E3BD8F;
  --dcl-primary-hover: #EDCBA2;
  --dcl-primary-active: #D4AA78;
  --dcl-on-primary: #2A1C16;
  --dcl-primary-text: #E3BD8F;
  --dcl-surface: #1F1814;
  --dcl-soft: #2A211C;
  --dcl-section: #1A1411;
  --dcl-border: #3A2E27;
  --dcl-price: #FF7465;
  --dcl-hero-fade: 22, 17, 14;
  --dcl-footer-bg: #1A1411;
  --dcl-shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
  --dcl-shadow-2: 0 12px 30px rgba(0, 0, 0, .45);

  --bs-body-color: #EDE4DC;
  --bs-body-color-rgb: 237, 228, 220;
  --bs-body-bg: #16110E;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: rgba(237, 228, 220, .66);
  --bs-tertiary-bg: #1A1411;
  --bs-secondary-bg: #221A16;
  --bs-border-color: #3A2E27;
  --bs-primary: #E3BD8F;
  --bs-primary-rgb: 227, 189, 143;
  --bs-primary-bg-subtle: #3A2B21;
  --bs-primary-border-subtle: #5A4432;
  --bs-primary-text-emphasis: #E9C9A0;
  --bs-link-color: #E3BD8F;
  --bs-link-color-rgb: 227, 189, 143;
  --bs-link-hover-color: #F2D6B3;
  --bs-link-hover-color-rgb: 242, 214, 179;
  --bs-heading-color: #FFFFFF;
}

/* ---------- 2. Base & typography ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.18; font-weight: 700; }
h2, .h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.25; font-weight: 700; }
h3, .h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.33; font-weight: 600; }
h4, .h4 { font-size: 1.125rem; font-weight: 600; }
h5, .h5, h6, .h6 { font-weight: 600; }
.text-caption { font-size: .875rem; line-height: 1.43; }
.fw-semibold { font-weight: 600 !important; }
.text-primary-brand { color: var(--dcl-primary-text) !important; }
.text-price { color: var(--dcl-price) !important; }
.font-script { font-family: var(--dcl-font-script); }
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
a { text-decoration: none; }
img { max-width: 100%; }
::selection { background: rgba(215, 181, 138, .45); }

/* Container: nội dung 1200px (Guideline: Desktop container 1200 / gutter 24) */
@media (min-width: 1200px) { .container, .container-xl { max-width: 1248px; } }

.bg-cream { background-color: var(--dcl-cream) !important; }
[data-bs-theme="dark"] .bg-cream { background-color: var(--dcl-section) !important; }
.bg-section { background-color: var(--dcl-section) !important; }
.bg-soft { background-color: var(--dcl-soft) !important; }
.bg-surface { background-color: var(--dcl-surface) !important; }
.border-brand { border-color: var(--dcl-border) !important; }
.rounded-4 { border-radius: var(--dcl-radius-xl) !important; }
.shadow-1 { box-shadow: var(--dcl-shadow-1) !important; }
.shadow-2 { box-shadow: var(--dcl-shadow-2) !important; }

/* ---------- 3. Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .625rem;
  --bs-btn-border-radius: var(--dcl-radius);
  --bs-btn-font-size: .9375rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-sm { --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .375rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: var(--dcl-radius); }
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: .8125rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: var(--dcl-radius); }
.btn-primary {
  --bs-btn-color: var(--dcl-on-primary);
  --bs-btn-bg: var(--dcl-primary);
  --bs-btn-border-color: var(--dcl-primary);
  --bs-btn-hover-color: var(--dcl-on-primary);
  --bs-btn-hover-bg: var(--dcl-primary-hover);
  --bs-btn-hover-border-color: var(--dcl-primary-hover);
  --bs-btn-active-color: var(--dcl-on-primary);
  --bs-btn-active-bg: var(--dcl-primary-active);
  --bs-btn-active-border-color: var(--dcl-primary-active);
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: #BDB5AE;
  --bs-btn-disabled-border-color: #BDB5AE;
  --bs-btn-focus-shadow-rgb: 215, 181, 138;
}
.btn-outline-primary {
  --bs-btn-color: var(--dcl-primary-text);
  --bs-btn-border-color: var(--dcl-primary-text);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--dcl-on-primary);
  --bs-btn-hover-bg: var(--dcl-primary);
  --bs-btn-hover-border-color: var(--dcl-primary);
  --bs-btn-active-color: var(--dcl-on-primary);
  --bs-btn-active-bg: var(--dcl-primary-active);
  --bs-btn-active-border-color: var(--dcl-primary-active);
  --bs-btn-disabled-color: #9E958E;
  --bs-btn-disabled-border-color: #CFC7C0;
  --bs-btn-focus-shadow-rgb: 215, 181, 138;
}
/* Nút sáng dùng trên nền tối/ảnh (hero, CTA banner) */
.btn-light {
  --bs-btn-color: #3E2723; --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #FFFFFF;
  --bs-btn-hover-color: #3E2723; --bs-btn-hover-bg: #F5EFE6; --bs-btn-hover-border-color: #F5EFE6;
  --bs-btn-active-bg: #EADFD2; --bs-btn-active-border-color: #EADFD2;
}
[data-bs-theme="dark"] .btn-light {
  --bs-btn-color: #2A1C16; --bs-btn-bg: #E3BD8F; --bs-btn-border-color: #E3BD8F;
  --bs-btn-hover-color: #2A1C16; --bs-btn-hover-bg: #EDCBA2; --bs-btn-hover-border-color: #EDCBA2;
}
.btn-outline-light { --bs-btn-hover-color: #3E2723; }
.btn-success { --bs-btn-bg: var(--dcl-green); --bs-btn-border-color: var(--dcl-green); --bs-btn-hover-bg: #256628; --bs-btn-hover-border-color: #256628; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--dcl-orange); --bs-btn-border-color: var(--dcl-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #CF6D17; --bs-btn-hover-border-color: #CF6D17; }
/* Nút vuông chỉ có icon (giỏ hàng, yêu thích, mũi tên) */
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 2.5rem; height: 2.5rem; flex-shrink: 0; font-size: 1.125rem; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; font-size: .9375rem; }
.btn-icon.rounded-circle { border-radius: 50% !important; }
/* Chip / pill lọc nhanh */
.btn-chip {
  --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .4375rem; --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500;
  --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--dcl-surface); --bs-btn-border-color: var(--dcl-border);
  --bs-btn-hover-color: var(--dcl-primary-text); --bs-btn-hover-bg: var(--dcl-soft); --bs-btn-hover-border-color: var(--dcl-beige);
  --bs-btn-active-color: var(--dcl-on-primary); --bs-btn-active-bg: var(--dcl-primary); --bs-btn-active-border-color: var(--dcl-primary);
  --bs-btn-border-radius: 50rem;
  white-space: nowrap;
}
.btn-chip.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .25rem; --bs-btn-font-size: .8125rem; }
.btn-wishlist {
  position: absolute; top: .625rem; right: .625rem; z-index: 2;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: #4E342E; box-shadow: var(--dcl-shadow-1);
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s;
}
.btn-wishlist:hover { transform: scale(1.08); }
.btn-wishlist.active { color: var(--dcl-red); }
.btn-wishlist.active .bi::before { content: "\f415"; } /* bi-heart-fill */
.link-more { font-size: .875rem; font-weight: 500; color: var(--dcl-primary-text); white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.link-more:hover { text-decoration: underline; color: var(--dcl-primary-text); }

/* ---------- 4. Form ---------- */
.form-control, .form-select { border-color: var(--dcl-border); border-radius: var(--dcl-radius); padding: .625rem .875rem; font-size: .9375rem; background-color: var(--dcl-surface); }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .8; }
.form-control:focus, .form-select:focus { border-color: var(--dcl-beige); box-shadow: 0 0 0 .25rem rgba(215, 181, 138, .35); background-color: var(--dcl-surface); }
.form-label { font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.form-check-input { border-color: #CDBFB1; }
.form-check-input:checked { background-color: var(--dcl-primary); border-color: var(--dcl-primary); }
[data-bs-theme="dark"] .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232A1C16' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:focus { border-color: var(--dcl-beige); box-shadow: 0 0 0 .25rem rgba(215, 181, 138, .35); }
.form-range::-webkit-slider-thumb { background: var(--dcl-primary); }
.form-range::-moz-range-thumb { background: var(--dcl-primary); }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.5rem; }
.required::after { content: " *"; color: var(--dcl-red); }

/* Ô tìm kiếm chung (header, hero, trang tìm kiếm) */
.search-box .form-control { height: 2.75rem; padding-left: 2.5rem; border-right: 0; }
.search-box .btn { width: 3rem; border-top-right-radius: var(--dcl-radius) !important; border-bottom-right-radius: var(--dcl-radius) !important; }
.search-box .search-icon { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); z-index: 6; color: var(--bs-secondary-color); pointer-events: none; }
.search-box-lg .form-control { height: 3.25rem; font-size: 1rem; }
.search-box-lg .btn { width: 3.5rem; }

/* ---------- 5. Nav: tabs gạch chân, breadcrumb, pagination ---------- */
.nav-underline {
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--dcl-primary-text);
  --bs-nav-underline-link-active-color: var(--dcl-primary-text);
  --bs-nav-underline-gap: 1.75rem;
  --bs-nav-link-font-size: .9375rem;
  border-bottom: 1px solid var(--dcl-border);
}
.nav-underline .nav-link { padding-block: .75rem; font-weight: 500; }
.nav-underline .nav-link.active { font-weight: 600; }
.nav-scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.chip-scroll { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-scroll::-webkit-scrollbar { display: none; }
.breadcrumb { --bs-breadcrumb-divider: "›"; --bs-breadcrumb-font-size: .8125rem; --bs-breadcrumb-margin-bottom: 0; --bs-breadcrumb-item-active-color: var(--dcl-primary-text); }
.breadcrumb a { color: var(--bs-secondary-color); }
.breadcrumb a:hover { color: var(--dcl-primary-text); }
.pagination {
  --bs-pagination-color: var(--bs-body-color); --bs-pagination-bg: var(--dcl-surface); --bs-pagination-border-color: var(--dcl-border);
  --bs-pagination-hover-color: var(--dcl-primary-text); --bs-pagination-hover-bg: var(--dcl-soft); --bs-pagination-hover-border-color: var(--dcl-beige);
  --bs-pagination-active-color: var(--dcl-on-primary); --bs-pagination-active-bg: var(--dcl-primary); --bs-pagination-active-border-color: var(--dcl-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(215, 181, 138, .35);
  --bs-pagination-disabled-bg: var(--dcl-surface);
  gap: .375rem;
}
.pagination .page-link { border-radius: var(--dcl-radius) !important; min-width: 2.25rem; text-align: center; font-size: .875rem; font-weight: 500; }

/* ---------- 6. Badge / tag / alert ---------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge-soft { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border: 1px solid var(--bs-primary-border-subtle); font-weight: 500; }
.badge-sale { background: var(--dcl-red); color: #fff; }
.badge-hot { background: var(--dcl-orange); color: #fff; }
.badge-new { background: var(--dcl-green); color: #fff; }
.badge-best { background: var(--dcl-brown); color: #fff; }
[data-bs-theme="dark"] .badge-best { background: var(--dcl-beige); color: #2A1C16; }
.card-badges { position: absolute; top: .625rem; left: .625rem; z-index: 2; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.alert { border-radius: var(--dcl-radius-lg); }
.alert-brand { background: var(--dcl-soft); border: 1px solid var(--dcl-border); border-left: 4px solid var(--dcl-beige); color: var(--bs-body-color); }

/* ---------- 7. Header (dùng chung) ---------- */
.site-header { background: var(--dcl-surface); border-bottom: 1px solid var(--dcl-border); z-index: 1030; }
.site-header.is-scrolled { box-shadow: var(--dcl-shadow-1); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--dcl-primary-text); line-height: 1; }
.brand:hover { color: var(--dcl-primary-text); }
.brand-mark { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.brand-name { font-family: var(--dcl-font-logo); font-size: 1.75rem; display: block; letter-spacing: .01em; }
.brand-sub { display: block; font-size: .625rem; letter-spacing: .22em; text-transform: lowercase; color: var(--bs-secondary-color); margin-top: .125rem; padding-left: .25rem; }
.header-action { display: inline-flex; flex-direction: column; align-items: center; gap: .125rem; color: var(--bs-body-color); font-size: .75rem; font-weight: 500; position: relative; background: none; border: 0; padding: .25rem .5rem; border-radius: var(--dcl-radius); }
.header-action .bi { font-size: 1.375rem; line-height: 1; }
.header-action:hover { color: var(--dcl-primary-text); background: var(--dcl-soft); }
.header-action .cart-badge { position: absolute; top: -.125rem; right: .125rem; font-size: .625rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .25rem; border-radius: 50rem; background: var(--dcl-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.header-b2b { display: inline-flex; align-items: center; gap: .5rem; color: var(--dcl-primary-text); font-weight: 600; font-size: .875rem; padding: .5rem .875rem; border-radius: 50rem; background: var(--dcl-soft); border: 1px solid var(--dcl-border); }
.header-b2b:hover { color: var(--dcl-primary-text); border-color: var(--dcl-beige); }
.main-nav .nav-link { color: var(--bs-body-color); font-weight: 500; font-size: .9375rem; padding: .75rem 0; position: relative; display: inline-flex; align-items: center; gap: .25rem; }
.main-nav .nav-link:hover, .main-nav .nav-link.show { color: var(--dcl-primary-text); }
.main-nav .nav-link.active { color: var(--dcl-primary-text); font-weight: 600; }
.main-nav .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; }
.main-nav .dropdown-toggle::after { display: none; }
.dropdown-menu { --bs-dropdown-bg: var(--dcl-surface); --bs-dropdown-border-color: var(--dcl-border); --bs-dropdown-border-radius: var(--dcl-radius-lg); --bs-dropdown-link-hover-bg: var(--dcl-soft); --bs-dropdown-link-active-bg: var(--dcl-primary); --bs-dropdown-link-active-color: var(--dcl-on-primary); --bs-dropdown-font-size: .9375rem; --bs-dropdown-item-padding-y: .5rem; box-shadow: var(--dcl-shadow-2); }
.dropdown-item .bi { width: 1.25rem; color: var(--dcl-primary-text); }
.mega-menu { min-width: 36rem; padding: 1rem; }
.offcanvas { --bs-offcanvas-bg: var(--dcl-surface); --bs-offcanvas-border-color: var(--dcl-border); }
.mobile-menu .nav-link { color: var(--bs-body-color); font-weight: 500; padding: .75rem 0; border-bottom: 1px solid var(--dcl-border); display: flex; align-items: center; gap: .75rem; }
.mobile-menu .nav-link .bi { color: var(--dcl-primary-text); font-size: 1.125rem; }
.mobile-menu .nav-link.active { color: var(--dcl-primary-text); font-weight: 600; }
.theme-toggle .bi-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }

/* Thanh điều hướng đáy (mobile) */
.bottom-nav { background: var(--dcl-surface); border-top: 1px solid var(--dcl-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .5rem 0 .4375rem; font-size: .6875rem; font-weight: 500; color: var(--bs-secondary-color); background: none; border: 0; position: relative; }
.bottom-nav .bi { font-size: 1.25rem; line-height: 1; }
.bottom-nav .active { color: var(--dcl-primary-text); font-weight: 600; }
.bottom-nav .cart-badge { position: absolute; top: .25rem; left: calc(50% + .375rem); font-size: .5625rem; min-width: 1rem; height: 1rem; border-radius: 50rem; background: var(--dcl-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0 .25rem; }
@media (max-width: 991.98px) { body { padding-bottom: 4rem; } }

/* ---------- 8. Hero / page header ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--dcl-cream); isolation: isolate; }
[data-bs-theme="dark"] .page-hero { background: #1A1411; }
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -2; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--dcl-hero-fade), 1) 0%, rgba(var(--dcl-hero-fade), .94) 38%, rgba(var(--dcl-hero-fade), .35) 68%, rgba(var(--dcl-hero-fade), 0) 100%); }
@media (max-width: 767.98px) {
  .page-hero::before { background: linear-gradient(180deg, rgba(var(--dcl-hero-fade), .9) 0%, rgba(var(--dcl-hero-fade), .82) 100%); }
}
.page-hero .lead { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); color: var(--bs-body-color); }
.hero-home { min-height: 28rem; }
.hero-script { position: absolute; right: 3%; bottom: 12%; font-family: var(--dcl-font-script); font-weight: 600; font-size: 2.25rem; line-height: 1.05; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); transform: rotate(-8deg); text-align: center; pointer-events: none; }

/* Dải cam kết / tiện ích */
.feature-item { display: flex; align-items: center; gap: .75rem; }
.feature-item__title { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.feature-item__desc { font-size: .8125rem; color: var(--bs-secondary-color); }
.icon-circle { width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; background: var(--dcl-soft); color: var(--dcl-primary-text); border: 1px solid var(--dcl-border); }
.icon-circle-sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.icon-circle-lg { width: 4rem; height: 4rem; font-size: 1.75rem; }
.icon-circle-solid { background: var(--dcl-primary); color: var(--dcl-on-primary); border-color: var(--dcl-primary); }
.hero-features { background: var(--dcl-surface); border: 1px solid var(--dcl-border); border-radius: var(--dcl-radius-lg); box-shadow: var(--dcl-shadow-1); }

/* ---------- 9. Section ---------- */
.section-title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); font-weight: 700; margin-bottom: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dcl-orange); }

/* ---------- 10. Card chung ---------- */
.card { --bs-card-bg: var(--dcl-surface); --bs-card-border-color: var(--dcl-border); --bs-card-border-radius: var(--dcl-radius-lg); --bs-card-inner-border-radius: calc(var(--dcl-radius-lg) - 1px); --bs-card-cap-bg: transparent; }
.card-hover { transition: box-shadow .2s, transform .2s, border-color .2s; }
.card-hover:hover { box-shadow: var(--dcl-shadow-2); transform: translateY(-2px); border-color: var(--dcl-beige); }
.card-media { position: relative; display: block; overflow: hidden; border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); background: var(--dcl-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.card-hover:hover .card-media img { transform: scale(1.04); }
.card-title a, a.card-title { color: var(--bs-heading-color); }
.card-title a:hover, a.card-title:hover { color: var(--dcl-primary-text); }
.card-meta { font-size: .8125rem; color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; align-items: center; column-gap: .875rem; row-gap: .25rem; }
.card-meta .bi { margin-right: .25rem; }
.rating { font-size: .8125rem; color: var(--bs-secondary-color); white-space: nowrap; }
.rating .bi { color: var(--dcl-star); }
.price { color: var(--dcl-price); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.price-old { color: var(--bs-secondary-color); text-decoration: line-through; font-size: .8125rem; font-weight: 400; }
.price-lg { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 2px solid rgba(255, 255, 255, .85); backdrop-filter: blur(2px); }
.play-btn-lg { width: 4.5rem; height: 4.5rem; font-size: 2.25rem; }
.media-duration { position: absolute; right: .5rem; bottom: .5rem; top: auto !important; left: auto !important; width: auto !important; height: auto !important; background: rgba(0, 0, 0, .7); color: #fff; font-size: .75rem; font-weight: 600; padding: .125rem .4375rem; border-radius: var(--dcl-radius-sm); }
.media-tag { position: absolute; left: .625rem; bottom: .625rem; z-index: 2; }

/* Product card */
.card-product .card-body { padding: .875rem; }
.card-product .card-title { font-size: .9375rem; font-weight: 600; line-height: 1.35; min-height: 2.7em; margin-bottom: .25rem; }
.card-product .product-spec { font-size: .8125rem; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.card-product.is-out .card-media img { filter: grayscale(.8) opacity(.6); }
.card-product .out-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .65); color: #fff; font-size: .8125rem; font-weight: 600; padding: .375rem .75rem; border-radius: var(--dcl-radius); z-index: 2; }
/* Product list item (hàng ngang – mobile search, giỏ hàng) */
.product-row { display: flex; gap: .75rem; align-items: center; }
.product-row__img { width: 4.5rem; height: 4.5rem; border-radius: var(--dcl-radius); object-fit: cover; flex-shrink: 0; background: var(--dcl-soft); }

/* Recipe / article / problem / video card */
.card-recipe .card-body, .card-article .card-body, .card-problem .card-body, .card-video .card-body { padding: .875rem; }
.card-recipe .card-title, .card-article .card-title, .card-problem .card-title, .card-video .card-title { font-size: .9375rem; font-weight: 600; line-height: 1.35; margin-bottom: .375rem; }

/* Danh mục tròn (loại bánh) */
.cat-circle { flex: 0 0 auto; min-width: 4.75rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--bs-body-color); font-size: .875rem; font-weight: 500; }
.cat-circle__img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--dcl-surface); box-shadow: 0 0 0 1px var(--dcl-border), var(--dcl-shadow-1); transition: box-shadow .2s, transform .2s; }
.cat-circle:hover { color: var(--dcl-primary-text); }
.cat-circle:hover .cat-circle__img, .cat-circle.active .cat-circle__img { box-shadow: 0 0 0 2px var(--dcl-beige), var(--dcl-shadow-2); transform: translateY(-2px); }
.cat-circle.active { color: var(--dcl-primary-text); font-weight: 600; }
@media (min-width: 992px) { .cat-circle__img { width: 5rem; height: 5rem; } }

/* Thẻ ý định (Tôi muốn làm / gặp lỗi / cần mua) */
.intent-card { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; color: var(--bs-body-color); }
.intent-card .intent-icon { font-size: 2.25rem; color: var(--dcl-primary-text); line-height: 1; }
.intent-card:hover { color: var(--bs-body-color); }

/* ---------- 11. Sidebar lọc ---------- */
.filter-group { padding-block: 1rem; border-bottom: 1px solid var(--dcl-border); }
.filter-group:first-child { padding-top: 0; }
.filter-group:last-child { border-bottom: 0; }
.filter-title { font-size: .9375rem; font-weight: 600; margin-bottom: .625rem; }
.filter-group .form-check { font-size: .875rem; margin-bottom: .375rem; }
.filter-group .count { color: var(--bs-secondary-color); }
.cat-tree .nav-link { padding: .375rem .5rem; font-size: .875rem; color: var(--bs-body-color); border-radius: var(--dcl-radius); display: flex; align-items: center; gap: .5rem; }
.cat-tree .nav-link:hover { background: var(--dcl-soft); color: var(--dcl-primary-text); }
.cat-tree .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--dcl-primary-text); font-weight: 600; }
@media (min-width: 992px) { .sticky-lg-side { position: sticky; top: calc(var(--dcl-header-h) + 1rem); } }

/* ---------- 12. Khối nội dung ---------- */
.cta-banner { position: relative; overflow: hidden; border-radius: var(--dcl-radius-xl); background: linear-gradient(100deg, #4E342E 0%, #6D4C41 55%, #8D6E63 100%); color: #fff; isolation: isolate; }
[data-bs-theme="dark"] .cta-banner { background: linear-gradient(100deg, #2A1E18 0%, #3A2A21 60%, #4A3629 100%); border: 1px solid var(--dcl-border); }
.cta-banner__img { position: absolute; top: 0; bottom: 0; width: 45%; height: 100%; object-fit: cover; z-index: -1; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.cta-banner__img--end { right: 0; }
.cta-banner__img--start { left: 0; -webkit-mask-image: linear-gradient(270deg, transparent, #000 60%); mask-image: linear-gradient(270deg, transparent, #000 60%); }
.cta-banner h2, .cta-banner h3, .cta-banner .h3 { color: #fff; }
.cta-banner .text-white-75 { color: rgba(255, 255, 255, .8); }
.cta-soft { border-radius: var(--dcl-radius-xl); background: var(--dcl-cream); border: 1px solid var(--dcl-border); position: relative; overflow: hidden; isolation: isolate; }
[data-bs-theme="dark"] .cta-soft { background: var(--dcl-soft); }
.quote-card { border-radius: var(--dcl-radius-lg); background: var(--dcl-soft); border: 1px solid var(--dcl-border); padding: 1.5rem; position: relative; }
.quote-card .quote-mark { font-family: Georgia, serif; font-size: 3.5rem; line-height: .5; color: var(--dcl-beige); }
.step-num { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; background: var(--dcl-primary); color: var(--dcl-on-primary); }
.step-num-outline { background: var(--dcl-surface); color: var(--dcl-primary-text); border: 2px solid var(--dcl-primary-text); }
.list-check { list-style: none; padding-left: 0; }
.list-check li { position: relative; padding-left: 1.75rem; margin-bottom: .5rem; }
.list-check li::before { content: "\f26a"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: var(--dcl-green); }
.list-dot { list-style: none; padding-left: 0; }
.list-dot li { position: relative; padding-left: 1.25rem; margin-bottom: .5rem; }
.list-dot li::before { content: ""; position: absolute; left: .25rem; top: .6em; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--dcl-beige); }
.list-warn li::before { content: "\f33a"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: var(--dcl-orange); }
.list-warn { list-style: none; padding-left: 0; }
.list-warn li { position: relative; padding-left: 1.75rem; margin-bottom: .5rem; }
.rank-num { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; background: var(--dcl-primary); color: var(--dcl-on-primary); }
.spec-table th { width: 38%; font-weight: 500; color: var(--bs-secondary-color); background: var(--dcl-section); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--dcl-border); }
.table > thead th { font-size: .8125rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--dcl-section); }
.accordion { --bs-accordion-bg: var(--dcl-surface); --bs-accordion-border-color: var(--dcl-border); --bs-accordion-border-radius: var(--dcl-radius-lg); --bs-accordion-inner-border-radius: calc(var(--dcl-radius-lg) - 1px); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(215, 181, 138, .35); --bs-accordion-active-bg: var(--dcl-soft); --bs-accordion-active-color: var(--dcl-primary-text); --bs-accordion-btn-font-size: .9375rem; }
.accordion-button { font-weight: 600; font-size: .9375rem; }
.toc .nav-link { color: var(--bs-body-color); font-size: .875rem; padding: .375rem 0; display: flex; gap: .625rem; align-items: center; }
.toc .nav-link .toc-num { width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .75rem; font-weight: 700; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--dcl-soft); border: 1px solid var(--dcl-border); color: var(--dcl-primary-text); }
.toc .nav-link.active, .toc .nav-link:hover { color: var(--dcl-primary-text); font-weight: 600; }
.toc .nav-link.active .toc-num { background: var(--dcl-primary); color: var(--dcl-on-primary); border-color: var(--dcl-primary); }
.prose { font-size: 1rem; line-height: 1.7; }
.prose h2 { font-size: 1.375rem; margin-top: 2rem; margin-bottom: .75rem; scroll-margin-top: 8rem; }
.prose h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.prose img { border-radius: var(--dcl-radius-lg); }
.timeline { position: relative; display: flex; justify-content: space-between; gap: 1rem; }
.timeline::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: .5625rem; height: 2px; background: var(--dcl-border); }
.timeline-item { position: relative; flex: 1; text-align: center; font-size: .875rem; }
.timeline-dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; margin: 0 auto .75rem; background: var(--dcl-beige); border: 4px solid var(--dcl-surface); box-shadow: 0 0 0 1px var(--dcl-beige); position: relative; }
.process-step { text-align: center; position: relative; }
.process-step .step-num { width: 2.75rem; height: 2.75rem; font-size: 1rem; margin-bottom: .75rem; }
@media (min-width: 768px) {
  .process-step:not(:last-child)::after { content: ""; position: absolute; top: 1.375rem; left: calc(50% + 1.875rem); right: calc(-50% + 1.875rem); border-top: 2px dashed var(--dcl-beige); }
}
.gallery-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--dcl-radius); border: 2px solid transparent; cursor: pointer; opacity: .8; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--dcl-beige); opacity: 1; }
.qty-group { width: 8rem; }
.qty-group .form-control { text-align: center; padding-inline: .25rem; }
.map-placeholder { background: repeating-linear-gradient(45deg, var(--dcl-soft) 0 14px, var(--dcl-section) 14px 28px); border-radius: var(--dcl-radius-lg); min-height: 15rem; }
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state .bi { font-size: 3rem; color: var(--dcl-beige); }
.social-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dcl-soft); color: var(--dcl-primary-text); border: 1px solid var(--dcl-border); transition: .2s; }
.social-btn:hover { background: var(--dcl-primary); color: var(--dcl-on-primary); border-color: var(--dcl-primary); }
.swatch { width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--dcl-border); }

/* ---------- 13. Footer (dùng chung) ---------- */
.site-footer { background: var(--dcl-footer-bg); border-top: 1px solid var(--dcl-border); font-size: .875rem; }
.site-footer h3 { font-size: .9375rem; font-weight: 600; margin-bottom: .75rem; }
.site-footer a { color: var(--bs-secondary-color); }
.site-footer a:hover { color: var(--dcl-primary-text); }
.site-footer .footer-links li { margin-bottom: .4375rem; }
.footer-script { font-family: var(--dcl-font-script); font-weight: 600; font-size: 1.625rem; line-height: 1.1; color: var(--dcl-primary-text); transform: rotate(-6deg); display: inline-block; }
.trust-bar { border-top: 1px solid var(--dcl-border); border-bottom: 1px solid var(--dcl-border); background: var(--dcl-surface); }

/* ---------- 14. Tiện ích khác ---------- */
.toast-container { z-index: 1090; }
.scroll-mt { scroll-margin-top: 9rem; }
.object-fit-cover { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- page: chi-tiet-kien-thuc.html ---------- */
/* Bài viết liên quan dạng gọn (sidebar): dùng lại card-article từ renderer */
.article-compact .card-article { flex-direction: row; align-items: center; }
.article-compact .card-article > .position-relative { width: 5rem; flex-shrink: 0; align-self: stretch; }
.article-compact .card-article .card-media { height: 100%; --bs-aspect-ratio: 100%; border-radius: var(--bs-card-inner-border-radius) 0 0 var(--bs-card-inner-border-radius); }
.article-compact .card-article .card-body { padding: .5rem .75rem; min-width: 0; }
.article-compact .card-article .card-title { font-size: .875rem; margin-bottom: .25rem; }
.article-compact .media-tag, .article-compact .card-article p, .article-compact .card-article .btn-icon, .article-compact .card-meta > span + span { display: none; }

/* ---------- page: gioi-thieu.html ---------- */
/* Timeline: ngang từ md, dọc trên mobile (thêm class timeline-stack) */
@media (max-width: 767.98px) {
  .timeline-stack { flex-direction: column; gap: 1.25rem; }
  .timeline-stack::before { left: .5625rem; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; }
  .timeline-stack .timeline-item { display: flex; align-items: flex-start; gap: 1rem; text-align: left; }
  .timeline-stack .timeline-dot { margin: 0; flex-shrink: 0; }
}

/* ---------- fix: chừa chỗ cho mũi tên của select ---------- */
.form-select { padding-right: 2.25rem; }

/* ---------- page: style-guide.html ---------- */
/* Minh họa trạng thái focus tĩnh trong style guide */
.form-control.is-focus, .form-select.is-focus { border-color: var(--dcl-beige); box-shadow: 0 0 0 .25rem rgba(215, 181, 138, .35); }
.timeline-dot { display: block; }