/* ==========================================================================
   BigDoor Vietnam - Cửa Gỗ Chịu Nước Composite (cuagocomposite.vn)
   Luxury Walnut Brown & Warm Gold Showroom Stylesheet
   ========================================================================== */

:root {
  --navy: #3b2314;         /* Nâu gỗ óc chó chủ đạo (Walnut Brown) */
  --navy-dark: #24140b;    /* Nâu Espresso trầm sang trọng */
  --navy-light: #54331e;   /* Nâu gỗ trung tính */
  --accent: #c88a32;       /* Vàng đồng / Hổ phách ấm (Warm Bronze Gold) */
  --accent-hover: #ad7221; /* Vàng đồng đậm khi hover */
  --price-color: #b91c1c;  /* Đỏ trầm sang trọng cho giá */
  --bg-body: #faf7f2;      /* Nền kem ngà ấm áp (Warm Ivory) */
  --bg-alt: #f3ede4;       /* Nền kem gỗ nhạt phân tách section */
  --bg-white: #ffffff;
  --text-dark: #291a10;
  --text-body: #574538;
  --text-muted: #847062;
  --border: #e6ddd3;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(59, 35, 20, 0.06);
  --shadow-md: 0 10px 25px rgba(59, 35, 20, 0.1);
  --shadow-lg: 0 18px 40px rgba(59, 35, 20, 0.16);
  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100vw;
  background-color: var(--bg-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Be Vietnam Pro', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--bg-body);
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
}

button,
input,
select,
textarea {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a,
button,
[onclick],
.product-card,
.project-card,
.filter-pill {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(a, a:visited, a:active) {
  color: inherit;
  text-decoration: none;
}

a {
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(200, 138, 50, 0.75);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   1. TOPBAR & HEADER
   ========================================================================== */
.topbar {
  background: #1a0e07;
  color: rgba(255, 245, 235, 0.88);
  font-size: 12.5px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(200, 138, 50, 0.25);
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.topbar-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-info span,
.topbar-right span {
  display: inline-flex;
  align-items: center;
}

.topbar-info span:not(:last-child)::after,
.topbar-right span:not(:last-child)::after {
  content: '|';
  margin-left: 20px;
  color: rgba(255, 255, 255, 0.2);
}

.topbar-info span i,
.topbar-right i {
  color: var(--accent);
  margin-right: 6px;
}

.topbar-right {
  display: flex;
  gap: 20px;
  align-items: center;
}

.site-header {
  background: linear-gradient(90deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-dark) 100%);
  box-shadow: 0 6px 24px rgba(24, 12, 5, 0.22);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-main {
  padding: 15px 0;
  border-bottom: 1px solid rgba(200, 138, 50, 0.22);
}

.header-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Search Bar */
.header-search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid rgba(200, 138, 50, 0.55);
  border-radius: 50px;
  padding: 4px 5px 4px 16px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all var(--transition);
}

.header-search:focus-within {
  background: #ffffff;
  border-color: #ffd89b;
  box-shadow: 0 0 0 3px rgba(200, 138, 50, 0.25);
}

.search-lead-icon {
  color: var(--accent);
  font-size: 14px;
  margin-right: 10px;
  flex-shrink: 0;
}

.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  padding-right: 8px;
}

.header-search input::placeholder {
  color: #8c7b6e;
}

.header-search button {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #ffffff;
  border: none;
  height: 34px;
  padding: 0 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(200, 138, 50, 0.35);
  transition: transform var(--transition), background var(--transition);
}

.header-search button:hover {
  transform: translateY(-1px);
  background: var(--navy);
}

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hotline-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 6px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(200, 138, 50, 0.45);
}

.hotline-badge:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hotline-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hotline-text small {
  display: block;
  font-size: 11px;
  color: rgba(255, 240, 220, 0.78);
  line-height: 1.1;
}

.hotline-text strong {
  font-size: 15px;
  color: #ffd89b;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.btn-quote {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(200, 138, 50, 0.35);
  transition: all var(--transition);
}

.btn-quote:hover {
  background: #ffd89b;
  color: var(--navy-dark);
  transform: translateY(-1px);
}

/* Mobile Menu Button & Drawer (Hidden on Desktop) */
.mobile-menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(200, 138, 50, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: #ffd89b;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 12, 5, 0.72);
  backdrop-filter: blur(4px);
  z-index: 2500;
  display: none;
  justify-content: flex-end;
}

.mobile-drawer-overlay.open {
  display: flex;
}

.mobile-drawer-box {
  width: 290px;
  max-width: 84vw;
  height: 100%;
  background: var(--navy-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  animation: slideDrawerLeft 0.25s ease;
}

@keyframes slideDrawerLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.mobile-drawer-head {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(200, 138, 50, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.mobile-drawer-links {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.mobile-drawer-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  color: rgba(255, 248, 240, 0.92);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-drawer-links li a i {
  color: var(--accent);
  width: 18px;
  text-align: center;
}

.mobile-drawer-links li a:hover {
  background: rgba(200, 138, 50, 0.15);
  color: #ffd89b;
}

.mobile-drawer-footer {
  padding: 16px 18px;
  border-top: 1px solid rgba(200, 138, 50, 0.25);
}

/* Navigation Bar (Chuẩn màu nâu hổ phách #804000 của cuacomposite.vn) */
.header-nav {
  background: #804000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1050;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.nav-item {
  position: relative;
}

.nav-list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 11px;
  color: #ffffff;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  position: relative;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.nav-lbl-mob {
  display: none;
}

.nav-list > li > a .nav-caret {
  font-size: 11px;
  opacity: 0.88;
  transition: transform 0.2s ease;
}

.nav-item:hover > a .nav-caret {
  transform: rotate(180deg);
}

/* Nhãn HOT màu xanh lá nổi phía trên MẪU SẢN PHẨM giống hệt cuacomposite.vn */
.nav-hot-badge {
  position: absolute;
  top: -2px;
  right: 0px;
  background: #009e54;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  padding: 2.5px 5px 2px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 5;
}

.nav-hot-badge::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 5px;
  border-width: 4px 4px 0 0;
  border-style: solid;
  border-color: #009e54 transparent transparent transparent;
}

.nav-247-badge {
  background: #e11d48 !important;
}

.nav-247-badge::after {
  border-color: #e11d48 transparent transparent transparent !important;
}

.nav-list > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  background: #ffd89b;
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav-list > li:hover > a,
.nav-list > li > a.active {
  background: rgba(0, 0, 0, 0.14);
  color: #ffd89b;
}

.nav-list > li > a.active::after {
  transform: scaleX(1);
}

/* Dropdown Submenu trên thanh Menu chính (Gọn gàng, đồng bộ tông Nâu Gỗ & Vàng Kim BigDoor) */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 222px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(36, 18, 6, 0.16), 0 2px 6px rgba(36, 18, 6, 0.06);
  border: 1px solid #eadfce;
  border-top: 2.5px solid #c88a32;
  padding: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 1200;
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-dropdown::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 9px;
  height: 9px;
  background: #c88a32;
  transform: rotate(45deg);
  border-radius: 1.5px 0 0 0;
  pointer-events: none;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li {
  margin-bottom: 1px;
}

.nav-dropdown li:last-child {
  margin-bottom: 0;
}

.nav-dropdown li.nav-dd-hotline {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed #eee3d3;
}

.nav-dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  color: #2b1d12;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  border-bottom: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dd-left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.nav-dd-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #fcf4e7;
  color: #8b4500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dd-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.nav-dropdown li.nav-dd-hotline .nav-dd-icon {
  background: #eefaf3;
  color: #0d8a47;
}

.nav-dropdown li.nav-dd-hotline .nav-dd-text strong {
  color: #b45309;
  font-weight: 700;
}

.nav-dd-text {
  white-space: nowrap;
  line-height: 1.4;
  padding-top: 0;
  overflow: visible !important;
}

.nav-dd-arrow {
  font-size: 12px;
  color: #b5a18c;
  margin: 0;
  width: auto;
  transition: color 0.15s ease, transform 0.15s ease;
}

.nav-dropdown li a:hover {
  background: linear-gradient(90deg, #fdf4e5 0%, #faecd6 100%);
  color: #7a3b00;
  font-weight: 600;
}

.nav-dropdown li a:hover .nav-dd-icon {
  background: linear-gradient(135deg, #c88a32 0%, #804000 100%);
  color: #ffffff;
}

.nav-dropdown li a:hover .nav-dd-arrow {
  color: #804000;
  transform: translateX(2px);
}

/* ==========================================================================
   2. HERO SECTION & CORE ADVANTAGES
   ========================================================================== */
.hero-section {
  padding: 28px 0 20px;
}

.hero-layout {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 20px;
}

.hero-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 430px;
  background: var(--navy-dark);
  box-shadow: var(--shadow-md);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(36, 20, 11, 0.9) 0%, rgba(59, 35, 20, 0.52) 55%, rgba(36, 20, 11, 0.08) 100%);
  display: flex;
  align-items: center;
  padding: 40px 48px;
}

.slide-content {
  max-width: 520px;
  color: #fff;
}

.slide-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
  letter-spacing: 0.6px;
}

.slide-content h1,
.slide-content h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 14px;
  color: #ffffff;
}

.slide-content p {
  font-size: 15.5px;
  color: rgba(255, 248, 240, 0.9);
  margin-bottom: 24px;
}

.slide-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 50px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(200, 138, 50, 0.4);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1.5px solid rgba(255, 240, 220, 0.65);
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 50px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--navy);
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  right: 24px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.slider-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(36, 20, 11, 0.7);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition);
}

.slider-nav button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.hero-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  height: 430px;
}

.hero-side-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hero-side-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hero-side-card:hover img {
  transform: scale(1.06);
}

.hero-side-label {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(36, 20, 11, 0.92), transparent);
  color: #fff;
  padding: 24px 18px 14px;
}

.hero-side-label strong {
  display: block;
  font-size: 15px;
  color: #ffd89b;
}

.hero-side-label span {
  font-size: 13px;
  opacity: 0.92;
}

/* 6 Advantages Strip */
.features-strip {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.feature-pill {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.feature-pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.feature-pill-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fbf3e4;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.feature-pill-text strong {
  display: block;
  font-size: 12.5px;
  color: var(--navy);
  font-weight: 700;
}

.feature-pill-text span {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   3. SECTIONS & PRODUCT CATALOG
   ========================================================================== */
.section-block {
  padding: 36px 0;
}

.section-block.alt-bg {
  background: var(--bg-alt);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.section-head-left {
  position: relative;
}

.section-sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-hover);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.section-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
}

/* Category Filter Pills */
.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  background: var(--bg-white);
  border: 1px solid var(--border);
  color: var(--text-body);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Product Grid (5 columns on desktop) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.product-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.product-media {
  position: relative;
  padding-top: 118%;
  background: #f9f6f1;
  overflow: hidden;
  cursor: pointer;
}

.product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.product-card:hover .product-media img {
  transform: scale(1.06);
}

.badge-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(36, 20, 11, 0.25);
}

.product-info {
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.product-code {
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.product-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
  cursor: pointer;
}

.product-name:hover {
  color: var(--accent-hover);
}

.product-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
  line-height: 1.25;
}

.product-price .price-ref-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #7a6856;
  letter-spacing: 0.1px;
}

.product-price .price-ref-value {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--price-color);
  letter-spacing: -0.1px;
}

.btn-detail {
  width: 100%;
  background: #f5efe8;
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
}

.product-card:hover .btn-detail {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ==========================================================================
   4. TECHNOLOGY VIDEO & CTA BANNER
   ========================================================================== */
.tech-showcase {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 36px;
  align-items: center;
  box-shadow: var(--shadow-lg);
  margin: 20px 0;
  border: 1px solid rgba(200, 138, 50, 0.3);
}

.tech-info .section-sub {
  color: #ffd89b;
}

.tech-info h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.3;
}

.tech-info p {
  color: rgba(255, 248, 240, 0.88);
  margin-bottom: 20px;
  font-size: 15px;
}

.tech-checklist {
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tech-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.tech-checklist i {
  color: #ffd89b;
  font-size: 16px;
}

.tech-video {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(200, 138, 50, 0.45);
  background: #000;
}

.tech-video video {
  width: 100%;
  display: block;
  max-height: 360px;
}

/* ==========================================================================
   5. PROJECTS, TESTIMONIALS & PARTNERS
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.project-thumb {
  height: 250px;
  overflow: hidden;
  position: relative;
  background: #23150c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-thumb-blur-bg {
  position: absolute;
  inset: -18px;
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(0.68) saturate(1.18);
  transform: scale(1.12);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.project-thumb img,
.project-thumb .project-main-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Chế độ 4:3 Chuẩn (Ngang) */
.project-thumb-smart[data-ratio="ratio-4-3"] {
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Chế độ 9:16 / 3:4 Dọc (Tôn dáng trọn bộ cửa đứng) */
.project-thumb-smart[data-ratio="ratio-9-16"] {
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: 390px;
}

.project-thumb-smart[data-ratio="ratio-9-16"] .project-thumb-blur-bg {
  opacity: 0.92;
}

.project-thumb-smart[data-ratio="ratio-9-16"] .project-main-img {
  object-fit: contain;
  padding: 6px 0;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.38));
}

/* Chế độ Tự động hoặc Không cắt xén (Fit 100% ảnh dọc trên nền mờ sang trọng) */
.project-thumb-smart.is-portrait-unclipped,
.project-thumb-smart[data-ratio="fit-unclipped"] {
  height: auto;
  aspect-ratio: 4 / 3;
}

.project-thumb-smart.is-portrait-unclipped .project-thumb-blur-bg,
.project-thumb-smart[data-ratio="fit-unclipped"] .project-thumb-blur-bg {
  opacity: 0.92;
}

.project-thumb-smart.is-portrait-unclipped .project-main-img,
.project-thumb-smart[data-ratio="fit-unclipped"] .project-main-img {
  object-fit: contain;
  padding: 4px 0;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.42));
}

.project-card:hover .project-thumb img {
  transform: scale(1.04);
}

.project-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-body h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.4;
}

.project-body p {
  font-size: 14px;
  color: var(--text-body);
  margin-bottom: 16px;
}

.project-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   BLOG SEO & CMS STUDIO STYLES
   ========================================================================== */
.blog-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-write-post {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 12px rgba(200, 138, 50, 0.35);
  transition: all var(--transition);
}

.btn-write-post:hover {
  background: var(--navy);
  transform: translateY(-2px);
}

.blog-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.blog-cat-badge {
  background: #fbf3e4;
  color: var(--accent-hover);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid rgba(200, 138, 50, 0.3);
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}

/* Chỉ hiển thị nút Đăng Bài Mới / Thêm SP và Sửa/Xóa khi Admin đã đăng nhập (body.is-admin) */
body:not(.is-admin) .btn-write-post,
body:not(.is-admin) .admin-only-actions,
body:not(.is-admin) #admin-floating-toolbar {
  display: none !important;
}

.admin-only-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.product-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2d5c4;
}

.prod-edit-btn,
.prod-delete-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prod-edit-btn {
  background: #fbf3e4;
  color: #7c3f09;
  border: 1px solid rgba(200, 138, 50, 0.45);
}

.prod-edit-btn:hover {
  background: #c88a32;
  color: #ffffff;
}

.prod-delete-btn {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.3);
}

.prod-delete-btn:hover {
  background: #dc2626;
  color: #ffffff;
}

/* Bảng điều khiển Admin dọc có thể kéo thả di chuyển tự do */
#admin-floating-toolbar {
  position: fixed;
  top: 210px;
  left: 16px;
  width: 184px;
  z-index: 2500;
  background: linear-gradient(165deg, #1d0f07 0%, #33190b 100%);
  color: #ffffff;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(229, 178, 93, 0.55);
  box-shadow: 0 16px 36px rgba(18, 9, 4, 0.42);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  user-select: none;
}

#admin-floating-toolbar.dragging {
  cursor: grabbing !important;
  opacity: 0.92;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
}

#admin-floating-toolbar .admin-bar-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #4ade80;
  padding: 2px 4px 9px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  cursor: move;
}

#admin-floating-toolbar.collapsed .admin-bar-badge {
  padding-bottom: 2px;
  margin-bottom: 0;
  border-bottom: none;
}

#admin-floating-toolbar .admin-collapse-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffd89b;
  border: 1px solid rgba(255, 216, 155, 0.35);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#admin-floating-toolbar .admin-bar-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#admin-floating-toolbar.collapsed .admin-bar-body {
  display: none;
}

#admin-floating-toolbar .admin-bar-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff6e8;
  border: 1px solid rgba(229, 178, 93, 0.32);
  padding: 9px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transition: all 0.2s ease;
  text-align: left;
}

#admin-floating-toolbar .admin-bar-btn i {
  width: 16px;
  text-align: center;
  font-size: 13.5px;
}

#admin-floating-toolbar .admin-bar-btn.primary {
  background: linear-gradient(135deg, #d89632 0%, #a86414 100%);
  color: #ffffff;
  border-color: #f3c476;
  box-shadow: 0 4px 12px rgba(216, 150, 50, 0.28);
}

#admin-floating-toolbar .admin-bar-btn:hover {
  transform: translateX(3px);
  background: rgba(200, 138, 50, 0.35);
  border-color: #ffd89b;
}

#admin-floating-toolbar .admin-bar-btn.danger {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
  margin-top: 4px;
}

#admin-floating-toolbar .admin-bar-btn.danger:hover {
  background: #b91c1c;
  color: #ffffff;
  border-color: #f87171;
}

.prod-cms-preview-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #faf6f0;
  border: 1px dashed #d6c5b0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 6px;
}

.prod-cms-preview-wrap img {
  width: 68px;
  height: 82px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2d5c4;
  background: #ffffff;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  #admin-floating-toolbar {
    top: 140px;
    left: 8px;
    right: auto;
    bottom: auto;
    width: 148px;
    padding: 10px 8px;
    gap: 6px;
  }
  #admin-floating-toolbar .admin-bar-btn {
    font-size: 11px;
    padding: 7px 8px;
  }
}

.blog-edit-btn {
  background: none;
  border: none;
  color: #804000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.blog-edit-btn:hover {
  text-decoration: underline;
}

.blog-delete-btn {
  background: none;
  border: none;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.85;
}

.blog-delete-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

.seo-tags-bar {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.seo-tags-bar strong {
  color: var(--navy);
}

.seo-tags-bar a {
  background: #f5efe8;
  color: var(--text-body);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 500;
}

.seo-tags-bar a:hover {
  background: var(--accent);
  color: #fff;
}

/* Article Reader Modal */
.article-modal-card {
  max-width: 820px;
}

.article-modal-body {
  padding: 32px 36px;
}

.article-breadcrumb {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.article-breadcrumb span {
  color: var(--accent-hover);
  font-weight: 600;
}

.article-header h1 {
  font-size: 26px;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 12px;
}

.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--text-muted);
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.article-meta-bar i {
  color: var(--accent);
  margin-right: 5px;
}

.article-cover {
  width: 100%;
  max-height: 390px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.article-toc {
  background: #faf7f2;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
}

.article-toc strong {
  display: block;
  color: var(--navy);
  margin-bottom: 8px;
  font-size: 14px;
}

.article-toc ul li {
  margin-bottom: 5px;
  font-size: 13.5px;
}

.article-toc ul li a {
  color: var(--text-body);
}

.article-toc ul li a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.article-content {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-dark);
}

.article-content h2 {
  font-size: 20px;
  color: var(--navy);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.article-content p {
  margin-bottom: 14px;
}

.article-cta-box {
  margin-top: 26px;
  padding: 20px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* CMS Post Editor Modal */
.write-modal-card {
  max-width: 640px;
}

.cms-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}

.cms-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cms-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  background: #fff;
  color: var(--text-dark);
  outline: none;
  text-overflow: ellipsis;
}

/* ==========================================================================
   MULTI-PAGE ARCHITECTURE STYLES (BANNER, FILTER SIDEBAR, CALCULATOR, GALLERY)
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page-hero {
  display: none !important;
}

#mobile-drawer + main.section-block,
#mobile-drawer + section.section-block,
.catalog-section-main.section-block {
  padding-top: 24px;
}

@media (max-width: 768px) {
  #mobile-drawer + main.section-block,
  #mobile-drawer + section.section-block,
  .catalog-section-main.section-block {
    padding-top: 12px;
  }
}

.breadcrumb-nav {
  display: none !important;
}

/* Nút DANH MỤC SẢN PHẨM bên lề trái (Trang chủ & Mẫu SP: Bấm vào mới xổ ra danh sách) */
.main-flow {
  position: relative;
}

.catalog-sidebar {
  position: fixed;
  top: 172px;
  left: max(12px, calc((100vw - 1260px) / 2 - 302px));
  width: 288px;
  z-index: 990;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-sidebar.is-footer-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
}

.catalog-sidebar.animating-toggle {
  transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-cat-sidebar {
  top: 28px;
}

.sidebar-menu-card {
  background: transparent;
  border-radius: 12px;
}

.sidebar-card-head {
  width: 100%;
  font-family: inherit;
  background: linear-gradient(135deg, #2b1608 0%, #5e2f0d 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.45px;
  padding: 13px 16px;
  border: 1px solid rgba(200, 138, 50, 0.45);
  border-bottom: 2px solid #c88a32;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  box-shadow: 0 6px 20px rgba(36, 20, 11, 0.18);
  transition: all 0.2s ease;
}

.sidebar-card-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.sidebar-card-head span i {
  color: #ffd89b;
  font-size: 14px;
}

.sidebar-card-head:hover {
  background: linear-gradient(135deg, #3a1e0b 0%, #733a10 100%);
  transform: translateY(-1px);
}

.sidebar-toggle-caret {
  font-size: 15px;
  color: #ffd89b;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-menu-card.open .sidebar-card-head {
  border-radius: 12px 12px 0 0;
}

.sidebar-menu-card.open .sidebar-toggle-caret {
  transform: rotate(180deg);
}

.sidebar-card-body {
  display: block;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  border: 1px solid transparent;
  border-top: none;
  padding-bottom: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  scrollbar-width: thin;
  box-shadow: 0 0 0 rgba(36, 20, 11, 0);
  transform-origin: top center;
  transition:
    max-height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    padding-bottom 0.45s ease,
    border-color 0.35s ease,
    box-shadow 0.5s ease;
  pointer-events: none;
}

.sidebar-menu-card.open .sidebar-card-body {
  max-height: calc(100vh - 190px);
  opacity: 1;
  padding-bottom: 10px;
  border-color: #eadfd2;
  overflow-y: auto;
  box-shadow: 0 14px 32px rgba(36, 20, 11, 0.16);
  pointer-events: auto;
}

.sidebar-cat-list li,
.sidebar-divider,
.sidebar-subhead,
.sidebar-price-list {
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.42s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-menu-card.open .sidebar-cat-list li,
.sidebar-menu-card.open .sidebar-divider,
.sidebar-menu-card.open .sidebar-subhead,
.sidebar-menu-card.open .sidebar-price-list {
  opacity: 1;
  transform: translateY(0);
}

.sidebar-menu-card.open .sidebar-cat-list li:nth-child(1) { transition-delay: 0.03s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(2) { transition-delay: 0.06s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(3) { transition-delay: 0.09s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(4) { transition-delay: 0.12s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(5) { transition-delay: 0.15s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(6) { transition-delay: 0.18s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(7) { transition-delay: 0.21s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(8) { transition-delay: 0.24s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(9) { transition-delay: 0.27s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(10) { transition-delay: 0.30s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(11) { transition-delay: 0.33s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(12) { transition-delay: 0.36s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(13) { transition-delay: 0.39s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(14) { transition-delay: 0.42s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(15) { transition-delay: 0.45s; }
.sidebar-menu-card.open .sidebar-cat-list li:nth-child(16) { transition-delay: 0.48s; }
.sidebar-menu-card.open .sidebar-divider { transition-delay: 0.50s; }
.sidebar-menu-card.open .sidebar-subhead { transition-delay: 0.52s; }
.sidebar-menu-card.open .sidebar-price-list { transition-delay: 0.54s; }

.sidebar-menu-card.auto-reveal-pulse {
  animation: catGoldPulse 1.4s ease;
}

@keyframes catGoldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 138, 50, 0.55);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(200, 138, 50, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 138, 50, 0);
  }
}

@keyframes catDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-cat-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px 4px;
}

.sidebar-cat-list li {
  margin-bottom: 2px;
}

.sidebar-cat-list li:last-child {
  margin-bottom: 0;
}

.sidebar-cat-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7.5px 10px;
  border-radius: 9px;
  color: #2b180a;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  line-height: 1.45;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.sidebar-cat-list li a .nav-dd-left {
  flex: 1;
  gap: 9px;
}

.sidebar-cat-list li a .nav-dd-icon {
  width: 26px;
  height: 26px;
  background: #fcf4e7;
  color: #8b4500;
}

.sidebar-cat-list li a .nav-dd-text {
  overflow: visible !important;
  text-overflow: clip;
  line-height: 1.55;
  padding-top: 2px;
}

.sidebar-count-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #8a735c;
  background: #f6efe6;
  padding: 2px 7px;
  border-radius: 50px;
  transition: all 0.16s ease;
}

.sidebar-cat-list li a:hover,
.sidebar-cat-list li a.active {
  background: linear-gradient(90deg, #fdf3e4 0%, #faebd4 100%);
  color: #804000;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #c88a32;
}

.sidebar-cat-list li a:hover .nav-dd-icon,
.sidebar-cat-list li a.active .nav-dd-icon {
  background: linear-gradient(135deg, #c88a32 0%, #804000 100%);
  color: #ffffff;
}

.sidebar-cat-list li a:hover .sidebar-count-badge,
.sidebar-cat-list li a.active .sidebar-count-badge {
  background: #804000;
  color: #ffd89b;
}

.sidebar-divider {
  height: 1px;
  background: #efe6da;
  margin: 8px 14px;
}

.sidebar-subhead {
  font-size: 11.5px;
  font-weight: 700;
  color: #7c6550;
  padding: 4px 16px 6px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-subhead i {
  color: #c88a32;
}

.sidebar-price-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 8px;
}

.sidebar-price-list button {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15px;
  color: #3d2817;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-price-list button i {
  opacity: 0;
  font-size: 11px;
  color: #804000;
  transition: opacity 0.15s ease;
}

.sidebar-price-list button:hover {
  background: #faf4ec;
  color: #804000;
}

.sidebar-price-list button.active {
  background: #fdf3e4;
  color: #804000;
  font-weight: 700;
}

.sidebar-price-list button.active i {
  opacity: 1;
}

/* Thanh Tiêu Đề & Sắp Xếp Hiện Đại Phía Trên Lưới Sản Phẩm (.catalog-topbar) */
.catalog-topbar {
  background: #ffffff;
  border: 1px solid #eadfd2;
  border-radius: 14px;
  padding: 13px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(36, 20, 11, 0.05);
}

.catalog-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-topbar-left h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}

.catalog-count-pill {
  background: #fdf3e4;
  color: #804000;
  border: 1px solid rgba(200, 138, 50, 0.35);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
}

.catalog-sort-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.catalog-sort-pills .sort-lbl {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-right: 2px;
}

.catalog-sort-pills button {
  border: 1px solid #e6dacb;
  background: #faf7f2;
  color: #4a3525;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.catalog-sort-pills button:hover {
  border-color: #c88a32;
  color: #804000;
}

.catalog-sort-pills button.active {
  background: linear-gradient(135deg, #804000 0%, #52290e 100%);
  border-color: #804000;
  color: #ffd89b;
}

.catalog-main #full-catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1101px) and (max-width: 1850px) {
  .catalog-sidebar {
    left: 16px;
  }
  .main-flow > section > .container,
  .catalog-section-main > .container {
    margin-left: 312px;
    margin-right: 20px;
    max-width: calc(100% - 332px);
  }
}

@media (max-width: 1100px) {
  .catalog-sidebar {
    display: none !important;
  }
  .catalog-main #full-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .catalog-main #full-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Catalog Filter Bar (san-pham.html) */
.catalog-toolbar {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar-select {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: #faf7f2;
  color: var(--text-dark);
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.toolbar-select:focus {
  border-color: var(--accent);
}

.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--navy-dark);
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  border: 2px solid var(--accent);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  z-index: 1400;
  display: none;
  align-items: center;
  gap: 16px;
}

.compare-bar.active {
  display: flex;
}

/* Price Calculator & Lo Ban Tool (bao-gia.html) */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.calc-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-md);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.calc-card h2 {
  font-size: 18.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.35;
}

.calc-card h2 i {
  color: var(--accent);
}

.calc-form-group {
  margin-bottom: 14px;
  min-width: 0;
}

.calc-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.calc-row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.calc-row-wall {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: 12px;
}

.calc-row-2 .cms-select,
.calc-row-wall .cms-select {
  font-size: 12.5px;
  padding: 9px 10px;
}

.calc-result-box {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  border: 1px solid var(--accent);
  margin-top: 8px;
}

.calc-total-price {
  font-size: 26px;
  font-weight: 800;
  color: #ffd89b;
  margin: 6px 0 10px;
}

.calc-breakdown {
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 10px;
  margin-top: 10px;
}

.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* Lo Ban Feng Shui Badge */
.loban-status {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: #faf7f2;
}

.loban-good {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #14532d;
}

.loban-bad {
  background: #fef2f2;
  border-color: #ef4444;
  color: #7f1d1d;
}

/* Blog Magazine Layout (blog.html) */
.blog-page-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.blog-sidebar-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.blog-sidebar-card h3 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  text-transform: uppercase;
}

/* ==========================================================================
   TẤM COMPOSITE DÁN FILM PVC PAGE (tam-composite.html)
   ========================================================================== */
.pvc-layer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.pvc-layer-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.pvc-layer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.layer-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.pvc-layer-card h3 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 8px;
}

.pvc-layer-card p {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.55;
}

.pvc-color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pvc-color-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.pvc-color-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.pvc-color-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.pvc-color-card span {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 10px;
}

.pvc-vertical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

/* Hợp tác thi công & Promo Banners từ cuacomposite.vn */
.promo-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.promo-dual-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.promo-dual-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.promo-dual-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.partner-logos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 22px;
  align-items: center;
}

.partner-logo-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.partner-logo-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.partner-logo-card img {
  max-height: 54px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .pvc-layer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pvc-vertical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partner-logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .pvc-layer-grid,
  .pvc-color-grid,
  .promo-dual-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .promo-dual-card img {
    height: 165px;
  }
  .partner-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .partner-logo-card {
    height: 70px;
    padding: 10px 12px;
  }
  .pvc-vertical-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .pvc-layer-card {
    padding: 14px;
  }
}

@media (max-width: 900px) {
  .calc-grid,
  .blog-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding: 16px 0;
  }
  .breadcrumb-nav {
    font-size: 11.5px;
    gap: 5px;
  }
  .page-hero h1 {
    font-size: 18px;
    line-height: 1.3;
  }
  .page-hero p {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .catalog-toolbar {
    padding: 12px;
    gap: 10px;
    margin-bottom: 16px;
  }
  .toolbar-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .toolbar-select {
    width: 100%;
    font-size: 16px !important; /* Ngăn iPhone auto-zoom khi chọn bộ lọc */
    padding: 9px 12px;
    border-radius: 8px;
  }
  .cms-select,
  .calc-row-2 .cms-select,
  .calc-row-wall .cms-select,
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important; /* Bắt buộc >= 16px để iOS/Zalo không tự động zoom to màn hình khi bấm vào ô nhập */
  }
  .cms-select {
    padding: 10px 10px;
    max-width: 100%;
    min-width: 0;
  }
  .calc-card .filter-pills {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .calc-card {
    padding: 16px 12px;
    border-radius: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .calc-card h2 {
    font-size: 16.5px;
    line-height: 1.35;
  }
  .calc-row-2,
  .calc-row-wall {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .calc-result-box {
    padding: 16px 14px;
  }
  .calc-total-price {
    font-size: 22px;
  }
  .calc-breakdown {
    font-size: 12.5px;
  }
}

/* Testimonials + Partners Split */
.trust-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.testimonial-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.review-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-stars {
  color: var(--accent);
  margin-bottom: 12px;
  font-size: 14px;
}

.review-text {
  font-size: 14px;
  color: var(--text-body);
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.55;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.review-author strong {
  display: block;
  font-size: 14px;
  color: var(--navy);
}

.review-author span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.partners-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.partners-card h3 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.partner-logo-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfbf9;
}

.partner-logo-box img {
  max-height: 50px;
  object-fit: contain;
}

/* ==========================================================================
   6. FOOTER & FLOATING CONTACT
   ========================================================================== */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255, 248, 240, 0.82);
  margin-top: 40px;
  padding-top: 56px;
  border-top: 3px solid var(--accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 1fr 0.9fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 248, 240, 0.1);
}

.footer-col h4 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2.5px;
  background: var(--accent);
}

.footer-contact li {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
}

.footer-contact i {
  color: var(--accent);
  margin-top: 4px;
  width: 16px;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 14px;
  color: rgba(255, 248, 240, 0.78);
}

.footer-links a:hover {
  color: #ffd89b;
  padding-left: 4px;
}

.footer-bottom {
  padding: 20px 0;
  font-size: 13px;
  color: rgba(255, 248, 240, 0.6);
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   FLOATING STACK (Nút LIVE trên -> Robot Chatbot ở giữa -> Nút Zalo dưới)
   ========================================================================== */
.floating-stack {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.stack-circle-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}

.stack-circle-btn:hover {
  transform: scale(1.07);
}

/* 1. Nút tròn LIVE màu đỏ ở trên */
.live-call-btn {
  position: relative;
  background: radial-gradient(circle at 30% 30%, #ff3b4e, #d6001c 75%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.4px;
  gap: 5px;
  animation: btnRingShake 2.2s ease-in-out infinite, livePulseShadow 2.2s infinite;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulseLive 1.2s infinite;
}

@keyframes pulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

@keyframes btnRingShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  6%  { transform: rotate(-14deg) scale(1.06); }
  12% { transform: rotate(14deg) scale(1.06); }
  18% { transform: rotate(-12deg) scale(1.06); }
  24% { transform: rotate(12deg) scale(1.06); }
  30% { transform: rotate(-7deg) scale(1.03); }
  36% { transform: rotate(7deg) scale(1.03); }
  42% { transform: rotate(0deg) scale(1); }
}

@keyframes livePulseShadow {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 0, 35, 0.55), 0 8px 22px rgba(0, 0, 0, 0.22);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(230, 0, 35, 0), 0 8px 22px rgba(0, 0, 0, 0.22);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(230, 0, 35, 0), 0 8px 22px rgba(0, 0, 0, 0.22);
  }
}

@keyframes zaloPulseShadow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.45), 0 8px 22px rgba(0, 0, 0, 0.22);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(0, 104, 255, 0), 0 8px 22px rgba(0, 0, 0, 0.22);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0), 0 8px 22px rgba(0, 0, 0, 0.22);
  }
}

/* 2. Hàng giữa: Bong bóng "Bạn cần hỗ trợ gì?" + Robot */
.chatbot-widget {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatbot-greeting {
  position: relative;
  background: linear-gradient(135deg, #e60023, #b9051b);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 50px;
  box-shadow: 0 8px 22px rgba(214, 0, 28, 0.35);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: transform var(--transition), opacity var(--transition);
  animation: floatGreet 3s ease-in-out infinite;
}

.chatbot-greeting:hover {
  transform: scale(1.03);
}

.chatbot-greeting.hidden {
  display: none;
}

.chatbot-greeting-close {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #6b7280;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background var(--transition);
}

.chatbot-greeting-close:hover {
  background: #374151;
}

@keyframes floatGreet {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  10% { transform: translateY(-2px) rotate(-1.5deg); }
  20% { transform: translateY(-2px) rotate(1.5deg); }
  30% { transform: translateY(-2px) rotate(-1deg); }
  40% { transform: translateY(0) rotate(0deg); }
  70% { transform: translateY(-4px) rotate(0deg); }
}

.chatbot-launcher {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fbcfe8;
  background: radial-gradient(circle, #fde2e4 0%, #f8bbd0 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
  animation: btnRingShake 2.4s ease-in-out 0.35s infinite;
}

.chatbot-launcher:hover {
  transform: scale(1.07);
}

.chatbot-launcher svg {
  width: 58px;
  height: 58px;
}

/* 3. Nút Zalo tròn ở dưới cùng */
.zalo-circle-btn {
  background: #ffffff;
  overflow: hidden;
  padding: 0;
  animation: btnRingShake 2.3s ease-in-out 0.7s infinite, zaloPulseShadow 2.3s 0.7s infinite;
}

.zalo-circle-btn svg {
  width: 64px;
  height: 64px;
}

/* Chatbot Window */
.chatbot-window {
  position: fixed;
  right: 22px;
  bottom: 102px;
  width: 365px;
  max-width: calc(100vw - 32px);
  height: 490px;
  max-height: calc(100vh - 140px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(36, 20, 11, 0.35);
  border: 1px solid var(--border);
  z-index: 1600;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: modalFadeUp 0.25s ease;
}

.chatbot-window.open {
  display: flex;
}

.chatbot-header {
  background: linear-gradient(135deg, #9e0e1c 0%, var(--navy) 100%);
  color: #ffffff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatbot-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5c6c6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}

.chatbot-header-info strong {
  display: block;
  font-size: 14.5px;
}

.chatbot-header-info span {
  font-size: 11.5px;
  color: #ffd89b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

.chatbot-close-win {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-close-win:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chatbot-messages {
  flex: 1;
  padding: 16px;
  background: #faf7f2;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
}

.chat-msg.bot {
  background: #ffffff;
  color: var(--text-dark);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.chat-msg.user {
  background: #b91020;
  color: #ffffff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.chat-chip {
  background: #fff4e4;
  border: 1px solid rgba(200, 138, 50, 0.45);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition);
}

.chat-chip:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.chatbot-input-area {
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.chatbot-input-area input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 9px 14px;
  font-size: 13.5px;
  outline: none;
}

.chatbot-input-area input:focus {
  border-color: #b91020;
}

.chatbot-input-area button {
  background: #b91020;
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.chatbot-input-area button:hover {
  background: var(--navy);
}

.float-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(36, 20, 11, 0.28);
  transition: transform var(--transition);
}

.float-pill:hover {
  transform: translateY(-2px) scale(1.03);
}

.float-pill .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-pill.zalo {
  background: #ffffff;
  color: #0068ff;
}

.float-pill.zalo .icon-wrap {
  background: #0068ff;
}

.float-pill.phone {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #ffffff;
  border: 1px solid var(--accent);
}

.float-pill.phone.icon-only {
  padding: 6px;
  border-radius: 50%;
}

.float-pill.phone .icon-wrap {
  background: var(--accent);
}

.float-pill img {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   7. MODALS (PRODUCT DETAIL & CONSULTATION FORM)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 20, 11, 0.75);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 24px 60px rgba(36, 20, 11, 0.4);
  position: relative;
  animation: modalFadeUp 0.25s ease;
}

@keyframes modalFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #f5efe8;
  color: var(--text-dark);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--transition);
}

.modal-close-btn:hover {
  background: var(--navy);
  color: #fff;
}

/* Luxury Quote Consultation Modal (Centered on PC & Mobile) */
#quote-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(20, 10, 4, 0.78);
  backdrop-filter: blur(6px);
}

.quote-modal-card {
  max-width: 495px;
  width: 100%;
  border-radius: 20px !important;
  overflow: hidden;
  border: 1.5px solid rgba(212, 148, 58, 0.55);
  box-shadow: 0 28px 70px rgba(15, 7, 2, 0.55), 0 0 0 1px rgba(255, 216, 155, 0.16);
  background: #ffffff;
  margin: auto;
  animation: quoteModalPop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes quoteModalPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.quote-close-btn {
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 216, 155, 0.38);
  color: #ffd89b;
  font-size: 21px;
  backdrop-filter: blur(4px);
}

.quote-close-btn:hover {
  background: #e60023;
  border-color: #e60023;
  color: #ffffff;
  transform: rotate(90deg);
}

.quote-modal-hero {
  background:
    radial-gradient(circle at 88% 14%, rgba(232, 168, 72, 0.32) 0%, transparent 55%),
    linear-gradient(135deg, #211006 0%, #46220c 52%, #6e3611 100%);
  padding: 24px 24px 18px;
  color: #ffffff;
  border-bottom: 2px solid #d4943a;
  position: relative;
  text-align: center;
}

.quote-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd89b 0%, #dfa042 100%);
  color: #241004;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.quote-modal-hero .quote-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  padding-right: 0;
  line-height: 1.32;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.quote-modal-sub {
  font-size: 13px;
  color: rgba(255, 245, 232, 0.88);
  line-height: 1.48;
  margin-bottom: 14px;
}

.quote-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quote-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 216, 155, 0.28);
  color: #ffe4b5;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
}

.quote-trust-strip span i {
  color: #ffd07b;
}

.quote-modal-body {
  padding: 20px 24px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fcf7f0 100%);
}

.quote-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.quote-input-group > i {
  position: absolute;
  left: 14px;
  color: #b5731e;
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
}

.quote-input-group.textarea-group > i {
  top: 13px;
}

.quote-input-group input,
.quote-input-group textarea {
  padding-left: 38px !important;
  background: #ffffff;
  border: 1.5px solid #e4d8c8 !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  color: #24140b;
  transition: all 0.2s ease;
}

.quote-input-group input:focus,
.quote-input-group textarea:focus {
  border-color: #c88a32 !important;
  box-shadow: 0 0 0 3px rgba(200, 138, 50, 0.18);
}

.quote-submit-btn {
  width: 100%;
  border: none;
  border-radius: 50px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #d88924 0%, #9e5208 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(180, 96, 14, 0.35);
  transition: all 0.22s ease;
  margin-top: 2px;
}

.quote-submit-btn:hover {
  background: linear-gradient(135deg, #e59a32 0%, #b5610d 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(180, 96, 14, 0.45);
}

.quote-modal-direct {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5d8c7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-modal-direct > span {
  font-size: 12px;
  font-weight: 600;
  color: #6e5a49;
}

.quote-direct-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-direct-call,
.quote-direct-zalo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
}

.quote-direct-call {
  background: #fef2f2;
  color: #c81e1e;
  border: 1px solid rgba(200, 30, 30, 0.25);
}

.quote-direct-zalo {
  background: #eff6ff;
  color: #0068ff;
  border: 1px solid rgba(0, 104, 255, 0.25);
}

.quote-modal-inner {
  padding: 28px 24px 24px;
}

.quote-modal-title {
  font-size: 21px;
  color: var(--navy);
  margin-bottom: 8px;
  padding-right: 40px;
  line-height: 1.3;
}

#product-modal .modal-card {
  max-width: 890px;
}

.detail-modal-grid {
  display: grid;
  grid-template-columns: 1.08fr 1.12fr;
  gap: 28px;
  padding: 28px 30px;
  align-items: start;
}

.detail-media-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #faf7f2;
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid var(--border);
}

.detail-img-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 10px;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ebe2d5;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.detail-img-box img {
  width: 100%;
  height: 395px;
  max-height: 395px;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-img-box:hover img {
  transform: scale(1.03);
}

.detail-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  background: rgba(36, 20, 11, 0.84);
  backdrop-filter: blur(4px);
  color: #ffd89b;
  border: 1px solid rgba(212, 148, 58, 0.55);
  border-radius: 50px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.22s ease;
}

.detail-zoom-btn:hover {
  background: #c88a32;
  color: #ffffff;
  border-color: #ffd89b;
  transform: translateY(-2px) scale(1.03);
}

/* Hàng 3 ảnh chi tiết nhỏ phía dưới ảnh chính */
.detail-subthumbs-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.detail-thumb-item {
  position: relative;
  height: 78px;
  border-radius: 8px;
  background: #ffffff;
  border: 2px solid #e4d8c8;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.detail-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px 4px 16px;
  transition: transform 0.25s ease;
}

.detail-thumb-item:hover {
  border-color: #c88a32;
  transform: translateY(-2px);
}

.detail-thumb-item.active {
  border-color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.2);
}

.detail-thumb-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(36, 20, 11, 0.75);
  color: #ffd89b;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  pointer-events: none;
}

/* Ô trống cho Admin bấm thêm nhanh 3 ảnh phụ ngay trong cửa sổ Xem chi tiết */
.detail-thumb-item.admin-add-slot {
  border: 1.5px dashed #c88a32;
  background: #fff9f0;
  flex-direction: column;
  gap: 3px;
  color: #8c4f08;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 4px;
}

.detail-thumb-item.admin-add-slot i {
  font-size: 15px;
  color: #c88a32;
}

.detail-thumb-item.admin-add-slot:hover {
  background: #fbf0dc;
  border-color: #9e5208;
}

.detail-thumb-admin-actions {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  gap: 3px;
  z-index: 4;
}

.detail-thumb-mini-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.detail-thumb-mini-btn.edit {
  background: rgba(200, 138, 50, 0.92);
}

.detail-thumb-mini-btn.del {
  background: rgba(220, 38, 38, 0.92);
}

/* Khung chọn 3 ảnh chi tiết phụ trong Modal Admin Thêm/Sửa SP */
.cms-subimages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.cms-subimg-box {
  background: #faf6f0;
  border: 1px dashed #d6c5b0;
  border-radius: 9px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.cms-subimg-preview {
  width: 100%;
  height: 76px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #e2d5c4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.cms-subimg-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-subimg-empty {
  font-size: 11px;
  color: #8c7b6e;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cms-subimg-btns {
  display: flex;
  gap: 5px;
  width: 100%;
}

.cms-subimg-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(200, 138, 50, 0.45);
  background: #fbf3e4;
  color: #7c3f09;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cms-subimg-btn:hover {
  background: #c88a32;
  color: #ffffff;
}

.cms-subimg-btn.clear {
  flex: 0 0 26px;
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.3);
}

/* Lightbox Zoom Phóng To Ảnh Sản Phẩm Toàn Màn Hình */
.prod-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: rgba(12, 6, 2, 0.92);
  backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  user-select: none;
}

.prod-zoom-overlay.open {
  display: flex;
  animation: modalFadeUp 0.22s ease;
}

.prod-zoom-topbar {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #ffffff;
  z-index: 5;
  background: rgba(28, 15, 7, 0.78);
  border: 1px solid rgba(255, 216, 155, 0.25);
  border-radius: 14px;
  padding: 8px 14px;
  backdrop-filter: blur(8px);
}

.prod-zoom-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffd89b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prod-zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.prod-zoom-ctrl-btn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 216, 155, 0.35);
  color: #ffffff;
  width: auto !important;
  height: 36px;
  padding: 0 13px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.prod-zoom-ctrl-btn.icon-btn {
  width: 36px !important;
  padding: 0;
}

.prod-zoom-ctrl-btn:hover {
  background: #c88a32;
  border-color: #ffd89b;
}

.prod-zoom-ctrl-btn.close {
  background: rgba(220, 38, 38, 0.9);
  border-color: #f87171;
}

.detail-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-cta-actions .detail-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50px;
  white-space: nowrap;
}

.prod-zoom-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
  my: 10px;
}

.prod-zoom-stage.dragging {
  cursor: grabbing;
}

.prod-zoom-stage img {
  max-width: 90vw;
  max-height: 74vh;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  background: #ffffff;
  padding: 6px;
}

.prod-zoom-stage.dragging img {
  transition: none;
}

.prod-zoom-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
  z-index: 5;
}

.prod-zoom-thumb {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: #ffffff;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.prod-zoom-thumb.active,
.prod-zoom-thumb:hover {
  opacity: 1;
  border-color: #ffd89b;
  transform: scale(1.06);
}

.prod-zoom-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info h2 {
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 8px;
}

.detail-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-price-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #6e5c4b;
}

.detail-price-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--price-color);
}

.detail-specs {
  background: #faf7f2;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.detail-specs li {
  font-size: 13.5px;
  color: var(--text-body);
  margin-bottom: 10px;
  line-height: 1.5;
  display: block;
}

.detail-specs li:last-child {
  margin-bottom: 0;
}

.detail-specs i {
  color: var(--accent);
  margin-right: 6px;
}

.detail-specs strong {
  color: var(--navy);
}

/* Quote Form inside Modal */
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-form input,
.quote-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.quote-form input:focus,
.quote-form textarea:focus {
  border-color: var(--accent);
}

/* ==========================================================================
   8. RESPONSIVE DESIGN & MOBILE-FIRST FEATURED PRODUCTS
   ========================================================================== */
.main-flow {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1140px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .features-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Nút Xem thêm cuối mỗi danh mục trên Trang chủ */
.section-more-wrap {
  display: none;
  justify-content: center;
  margin-top: 14px;
}

.btn-section-more,
a.btn-section-more,
a.btn-section-more:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #df9b3b 0%, #bb7519 100%);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 2px rgba(68, 36, 5, 0.22);
  border: 1px solid #e7b261;
  box-shadow: 0 6px 16px rgba(187, 117, 25, 0.26);
  transition: all 0.2s ease;
}

.btn-section-more:hover,
a.btn-section-more:hover {
  background: linear-gradient(135deg, #e8a748 0%, #c88020 100%);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(187, 117, 25, 0.34);
}

@media (max-width: 900px) {
  /* Sắp xếp lại luồng hiển thị trên Mobile & Tablet hợp lý, chuẩn Showroom chuyên nghiệp:
     1. Banner chính & 6 Ưu điểm cốt lõi (flow-hero)
     2. Dòng sản phẩm nổi bật - Cửa Composite Cao Cấp (flow-featured)
     3. Bộ sưu tập các kiểu mẫu cửa thông dụng (flow-models)
     4. Công nghệ đúc nguyên tấm & Video nhà máy (flow-tech)
     5. Khóa cửa & Phụ kiện đồng bộ (flow-accessories)
     6. Blog tư vấn & Dự án thi công (flow-projects)
     7. Khách hàng đánh giá & Đối tác (flow-reviews)
  */
  .flow-hero        { order: 1; padding-top: 10px; padding-bottom: 14px; }
  .flow-featured    { order: 2; padding-top: 18px; padding-bottom: 20px; }
  .flow-models      { order: 3; padding-top: 20px; padding-bottom: 20px; }
  .flow-tech        { order: 4; padding-top: 18px; padding-bottom: 20px; }
  .flow-accessories { order: 5; padding-top: 20px; padding-bottom: 20px; }
  .flow-projects    { order: 6; padding-top: 20px; padding-bottom: 20px; }
  .flow-reviews     { order: 7; padding-top: 20px; padding-bottom: 24px; }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  /* Ẩn hoàn toàn thanh ngang Trang Chủ | Sản Phẩm... trên Mobile theo yêu cầu (khách dùng nút Menu ☰ gọn đẹp) */
  .header-nav {
    display: none !important;
  }
  .header-nav .container {
    padding: 0 6px;
  }
  .nav-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    width: 100%;
    overflow: visible;
  }
  /* Ẩn mục Giới thiệu, Tin tức, Công trình và Tính Giá trên thanh nhanh Mobile (đã có trong Menu ☰) để hiển thị: Trang Chủ | Sản Phẩm | Tấm PVC | Sửa Cửa | Liên Hệ */
  .nav-list > li.nav-item-about,
  .nav-list > li.nav-item-blog,
  .nav-list > li.nav-item-proj,
  .nav-list > li.nav-item-calc {
    display: none !important;
  }
  .nav-lbl-desk,
  .nav-dropdown,
  .nav-caret,
  .nav-hot-badge {
    display: none !important;
  }
  .nav-lbl-mob {
    display: inline !important;
  }
  .nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px;
    white-space: nowrap;
    border-radius: 50px;
    margin-left: 0 !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
    color: rgba(255, 248, 240, 0.92);
    background: transparent !important;
    border: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none;
  }
  .nav-list > li > a:active:not(.active) {
    background: rgba(255, 216, 155, 0.2) !important;
    color: #ffd89b !important;
    transform: scale(0.96);
  }
  .nav-list > li > a::after {
    display: none !important;
  }
  .nav-list > li > a.active {
    background: linear-gradient(135deg, #ffd89b 0%, #d4953a 100%) !important;
    color: #24140b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }

  .hero-layout,
  .tech-showcase,
  .trust-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 190px;
  }
  .product-grid,
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .header-main-inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .header-search {
    order: 3;
    max-width: 100%;
    width: 100%;
  }
  .topbar-inner {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 11.5px;
  }
  .topbar-info span:not(:last-child)::after,
  .topbar-right span:not(:last-child)::after {
    margin-left: 10px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 12px;
  }
  .topbar {
    display: none;
  }
  /* Header siêu gọn trên Mobile (chỉ ~95px tổng chiều cao) để không che màn hình */
  .header-main {
    padding: 6px 0;
  }
  .header-main-inner {
    gap: 6px;
  }
  .brand-logo img {
    height: 30px;
  }
  .hotline-badge {
    display: none;
  }
  .btn-quote {
    padding: 6px 11px;
    font-size: 11.5px;
  }
  .mobile-menu-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .header-search {
    padding: 2px 4px 2px 12px;
  }
  /* Font-size >= 16px ngăn iOS Safari / Zalo tự động phóng to (Auto-zoom) khi bấm vào ô nhập & chọn */
  .header-search input,
  .quote-form input,
  .quote-form textarea,
  .chatbot-input-area input,
  .cms-select,
  .calc-card input,
  .calc-card select,
  input[type="number"],
  input[type="text"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
  .header-search input::placeholder {
    font-size: 12.5px;
  }
  .header-search button {
    height: 29px;
    padding: 0 12px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* Tiêu đề từng khu vực cực gọn & sang trên Mobile */
  .section-block {
    padding: 20px 0;
  }
  .section-head {
    margin-bottom: 10px;
    gap: 6px;
  }
  .section-sub {
    font-size: 10px;
    margin-bottom: 2px;
    letter-spacing: 0.4px;
  }
  .section-title {
    font-size: 15.5px;
    line-height: 1.3;
  }
  .filter-pills {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar {
    display: none;
  }
  .filter-pill {
    white-space: nowrap;
    padding: 5px 11px;
    font-size: 11.5px;
  }

  /* Thẻ sản phẩm Mobile siêu gọn (Compact Luxury Card) & Giới hạn 4 mẫu tiêu biểu/mục để không bị Spam */
  .head-more-desk {
    display: none !important;
  }
  .section-more-wrap {
    display: flex;
  }
  .btn-section-more {
    width: 100%;
    padding: 10px 16px;
    font-size: 12.5px;
  }
  #grid-high-tech > .product-card:nth-child(n+5),
  #grid-models > .product-card:nth-child(n+5),
  #grid-accessories > .product-card:nth-child(n+5) {
    display: none !important;
  }
  .hero-side {
    display: none !important;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .product-card {
    border-radius: 10px;
  }
  .product-media {
    padding-top: 95%;
  }
  .badge-tag {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 2px 7px;
  }
  .product-info {
    padding: 8px 8px 9px;
  }
  .product-code {
    display: none;
  }
  .product-name {
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.32;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 33px;
  }
  .product-price {
    gap: 4px;
    margin-bottom: 7px;
  }
  .product-price .price-ref-label {
    font-size: 10.5px;
  }
  .product-price .price-ref-value {
    font-size: 13px;
  }
  .btn-detail {
    padding: 6px 6px;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;
  }

  /* Tối ưu Bài viết / Dự án trên Mobile: Thẻ ngang gọn gàng, hiện đại */
  #blog-posts-grid .project-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    border-radius: 12px;
  }
  #blog-posts-grid .project-thumb {
    height: 100%;
    min-height: 108px;
  }
  #blog-posts-grid .project-body {
    padding: 10px 12px;
    justify-content: center;
  }
  #blog-posts-grid .project-body h3 {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #blog-posts-grid .project-body p {
    display: none;
  }
  #blog-posts-grid .blog-meta-top span:last-child {
    display: none;
  }
  #blog-posts-grid .blog-card-footer {
    padding-top: 4px;
    border-top: none;
  }
  #blog-posts-grid .project-link {
    font-size: 11.5px;
  }
  .project-thumb {
    height: 165px;
  }
  .project-body {
    padding: 14px;
  }
  .project-body h3 {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .project-body p {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .seo-tags-bar {
    padding: 10px 12px;
    gap: 6px;
    font-size: 12px;
  }
  .seo-tags-bar a {
    font-size: 11.5px;
    padding: 3px 9px;
  }

  /* Tối ưu Modal Chi tiết sản phẩm & Popup Báo giá trên điện thoại */
  .modal-overlay {
    padding: 12px;
    align-items: center;
  }
  .modal-card {
    max-height: 90vh;
    border-radius: 16px;
  }
  .quote-modal-hero {
    padding: 20px 14px 14px;
  }
  .quote-close-btn {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .quote-vip-badge {
    font-size: 9.5px;
    padding: 3.5px 10px;
    margin-bottom: 8px;
  }
  .quote-modal-hero .quote-modal-title {
    font-size: 16.5px;
    padding: 0 8px;
  }
  .quote-modal-sub {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .quote-trust-strip {
    gap: 5px;
  }
  .quote-trust-strip span {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .quote-modal-body {
    padding: 14px 14px 16px;
  }
  .quote-form {
    gap: 9px;
  }
  .quote-input-group input::placeholder,
  .quote-input-group textarea::placeholder {
    font-size: 12.5px;
  }
  .quote-submit-btn {
    padding: 11px 12px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .quote-modal-direct {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-top: 11px;
    padding-top: 10px;
  }
  #product-modal .modal-card {
    max-height: 92vh;
    border-radius: 18px;
  }
  #product-modal .modal-close-btn {
    position: sticky;
    top: 10px;
    float: right;
    margin: 10px 10px -42px 0;
    width: 32px;
    height: 32px;
    font-size: 20px;
    background: rgba(36, 20, 11, 0.88);
    color: #ffd89b;
    border: 1px solid rgba(255, 216, 155, 0.48);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    z-index: 45;
  }
  .detail-modal-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 12px 16px;
    clear: none;
  }
  .detail-media-col {
    padding: 8px;
    gap: 8px;
  }
  .detail-img-box {
    padding: 8px 10px;
    min-height: 225px;
    height: 225px;
  }
  .detail-img-box img {
    width: 100%;
    height: 208px;
    max-height: 208px;
    object-fit: contain !important;
    margin: 0 auto;
  }
  .detail-zoom-btn {
    bottom: 8px;
    right: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
  }
  .detail-thumb-item {
    height: 58px;
  }
  .cms-subimages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .detail-info .section-sub {
    font-size: 11px;
    margin-bottom: 2px;
    display: block;
  }
  .detail-info h2 {
    font-size: 17px;
    margin-bottom: 4px;
    padding-right: 0;
  }
  .detail-price {
    font-size: 18.5px;
    margin-bottom: 8px;
  }
  .detail-specs {
    padding: 9px 11px;
    margin-bottom: 10px;
  }
  .detail-specs li {
    font-size: 12px;
    line-height: 1.42;
    margin-bottom: 4px;
  }
  .detail-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }
  .detail-cta-actions .detail-cta-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    font-size: 13.5px;
    justify-content: center;
  }
  .prod-zoom-overlay {
    padding: 12px 10px 16px;
  }
  .prod-zoom-topbar {
    padding: 8px 10px;
    gap: 6px;
    border-radius: 12px;
  }
  .prod-zoom-title {
    font-size: 13px;
  }
  .prod-zoom-controls {
    gap: 5px;
  }
  .prod-zoom-ctrl-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    gap: 4px;
  }
  .prod-zoom-ctrl-btn.icon-btn,
  .prod-zoom-ctrl-btn.zoom-in-btn {
    width: 32px !important;
    padding: 0;
  }
  .prod-zoom-ctrl-btn .zoom-btn-lbl {
    display: none;
  }
  .prod-zoom-stage img {
    max-width: 94vw;
    max-height: 72vh;
  }

  .features-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }
  .feature-pill {
    padding: 8px 8px;
    gap: 7px;
    border-radius: 10px;
  }
  .feature-pill-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .feature-pill-text strong {
    font-size: 10.5px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .feature-pill-text span {
    font-size: 9.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .projects-grid,
  .testimonial-row,
  .hero-side,
  .tech-checklist,
  .cms-row-2 {
    grid-template-columns: 1fr;
  }
  .article-modal-body {
    padding: 18px 14px;
  }
  .article-header h1 {
    font-size: 18px;
    padding-right: 32px;
  }
  .article-content {
    font-size: 14px;
  }
  .article-content h2 {
    font-size: 16.5px;
  }
  .btn-write-post {
    width: 100%;
    justify-content: center;
  }
  .hero-side {
    height: auto;
    gap: 10px;
  }
  .hero-side-card {
    height: 125px;
  }
  .hero-slider {
    height: 240px;
  }
  .slide-overlay {
    padding: 16px;
  }
  .slide-badge {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 8px;
  }
  .slide-content h1,
  .slide-content h2 {
    font-size: 17.5px;
    margin-bottom: 6px;
  }
  .slide-content p {
    font-size: 12.5px;
    margin-bottom: 12px;
  }
  .slide-actions .btn-primary,
  .slide-actions .btn-outline-light {
    padding: 8px 14px;
    font-size: 12px;
  }
  .tech-showcase {
    padding: 18px 14px;
    gap: 16px;
  }
  .tech-info h2 {
    font-size: 18px;
  }
  .tech-info p {
    font-size: 13.5px;
  }

  /* Thu gọn cụm nút nổi LIVE / Chatbot / Zalo sát mép phải dưới để không che màn hình */
  .floating-stack {
    right: 8px;
    bottom: 12px;
    gap: 7px;
  }
  .stack-circle-btn,
  .chatbot-launcher,
  .zalo-circle-btn svg,
  .back-to-top-btn {
    width: 42px;
    height: 42px;
  }
  .back-to-top-btn.show {
    height: 42px;
  }
}

/* Trên Mobile & Tablet (<= 900px): Khi lướt xuống cụm nút nổi (.floating-stack) ẩn sang trái và mờ đi, lướt lên hiện lại */
@media (max-width: 900px) {
  .floating-stack {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.26s ease,
      visibility 0.32s ease;
    will-change: transform, opacity;
  }
  .floating-stack.float-mob-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(-44px, 0, 0) scale(0.85) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 640px) {
  .chatbot-launcher svg {
    width: 38px;
    height: 38px;
  }
  .live-call-btn {
    font-size: 9.5px;
    gap: 3px;
  }
  .live-dot {
    width: 5px;
    height: 5px;
  }
  .chatbot-greeting {
    display: none !important;
  }
  .chatbot-window {
    right: 8px;
    bottom: 64px;
    width: calc(100vw - 16px);
    height: 400px;
  }
}

/* Nút Lướt Lên Đầu Trang (Back to Top) tròn trắng + mũi tên đỏ giống hệt ảnh mẫu */
.back-to-top-btn {
  width: 52px;
  height: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.85);
  margin-top: -12px;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.back-to-top-btn.show {
  height: 52px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  margin-top: 0;
}

.back-to-top-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  border-color: #ef4444;
}

.back-to-top-btn svg.btt-chevron {
  width: 20px;
  height: 20px;
  display: block;
}

/* Lưới danh mục con trong Menu Drawer trên Mobile */
.drawer-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 16px 12px 24px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-sub-grid a {
  padding: 7px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  border-bottom: none !important;
  color: #ffd89b !important;
}

@media (max-width: 640px) {
  .back-to-top-btn {
    width: 42px;
    margin-top: -7px;
  }
  .back-to-top-btn.show {
    height: 42px;
    margin-top: 0;
  }
  .back-to-top-btn svg.btt-chevron {
    width: 17px;
    height: 17px;
  }

  /* Tối ưu Đánh giá khách hàng, Logo Đối tác & Footer gọn sang trên Mobile */
  .trust-grid {
    gap: 16px;
  }
  .testimonial-row {
    gap: 12px;
  }
  .review-card,
  .partners-card {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .review-text {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .review-author img {
    width: 42px;
    height: 42px;
  }
  .partners-card h3 {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .partner-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .partner-logo-box {
    height: 56px;
    padding: 6px;
  }
  .partner-logo-box img {
    max-height: 38px;
  }
  .calc-card {
    padding: 16px 14px !important;
  }
  .calc-card p {
    text-align: left !important;
    font-size: 13.5px;
  }
  .site-footer {
    margin-top: 24px;
    padding-top: 28px;
  }
  .footer-grid {
    gap: 22px;
    padding-bottom: 24px;
  }
  .footer-col h4 {
    font-size: 13.5px;
    margin-bottom: 12px;
    padding-bottom: 7px;
  }
  .footer-contact li,
  .footer-links a {
    font-size: 13px;
  }
  .footer-bottom {
    padding: 14px 0 22px;
    font-size: 11.5px;
    text-align: center;
  }
  .footer-bottom-inner {
    justify-content: center;
    gap: 6px;
  }
}

@media (max-width: 375px) {
  .product-grid {
    gap: 8px;
  }
  .product-name {
    font-size: 12.5px;
  }
  .btn-detail {
    font-size: 11px;
  }
}

/* ==========================================================================
   PROJECT LIGHTBOX MODAL & ADMIN PROJECT CMS STYLES
   ========================================================================== */
.project-thumb {
  position: relative;
}

.project-photo-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(24, 15, 9, 0.78);
  color: #ffd89b;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.project-card:hover .project-photo-count {
  background: var(--accent);
  color: #ffffff;
}

.project-lightbox-card {
  max-width: 860px;
  width: 94%;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.project-lb-layout {
  display: flex;
  flex-direction: column;
}

.project-lb-stage {
  position: relative;
  background: #140b06;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-lb-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.project-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 4;
}

.project-lb-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.project-lb-nav.prev {
  left: 14px;
}

.project-lb-nav.next {
  right: 14px;
}

.project-lb-counter {
  position: absolute;
  bottom: 12px;
  right: 14px;
  background: rgba(0, 0, 0, 0.68);
  color: #ffd89b;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
}

.project-lb-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  background: #f9f4ec;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.proj-lb-thumb-btn {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.65;
  transition: all 0.2s ease;
}

.proj-lb-thumb-btn.active,
.proj-lb-thumb-btn:hover {
  border-color: var(--accent);
  opacity: 1;
}

.proj-lb-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-lb-info {
  padding: 20px 24px 22px;
  background: #ffffff;
}

.proj-cms-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  padding: 12px;
  background: #fdf9f3;
  border: 1.5px dashed #dccbb5;
  border-radius: 12px;
  min-height: 96px;
  align-items: stretch;
}

.proj-cms-thumb-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #d5c1a7;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(36, 20, 11, 0.07);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: grab;
}

.proj-cms-thumb-item:hover {
  transform: translateY(-2px);
  border-color: #b56c1b;
  box-shadow: 0 6px 15px rgba(36, 20, 11, 0.14);
}

.proj-cms-thumb-item.is-cover {
  border: 2px solid #d88924;
  box-shadow: 0 0 0 2px rgba(216, 137, 36, 0.22), 0 6px 16px rgba(181, 108, 27, 0.2);
}

.proj-cms-thumb-media {
  position: relative;
  width: 100%;
  height: 96px;
  background: #24140b;
  overflow: hidden;
}

.proj-cms-thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #24140b;
}

.proj-cms-idx-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(25, 13, 6, 0.82);
  color: #ffd89b;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.proj-cms-del-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(185, 28, 28, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}

.proj-cms-del-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.proj-cms-thumb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 5px 6px;
  background: #fffcf7;
  border-top: 1px solid #ede0cf;
}

.proj-cms-order-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #dccbb5;
  background: #fff;
  color: #4a2c16;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.proj-cms-order-btn:hover:not(:disabled) {
  background: #4a2c16;
  color: #ffd89b;
  border-color: #4a2c16;
}

.proj-cms-order-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.proj-cms-cover-pill {
  flex: 1;
  text-align: center;
  background: linear-gradient(135deg, #d88924, #9c5512);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 4px;
  border-radius: 5px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.proj-cms-make-cover-btn {
  flex: 1;
  border: 1px solid #d5b895;
  background: #fdf6ec;
  color: #7c4a15;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.proj-cms-make-cover-btn:hover {
  background: #d88924;
  color: #fff;
  border-color: #d88924;
}

@media (max-width: 640px) {
  .project-lb-stage {
    height: 290px;
  }
  .project-lb-info {
    padding: 16px;
  }
  .project-lb-info h2 {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   19. 3D ISOMETRIC ANIMATION EFFECTS (SCROLL-REVEAL & EXTRUDED 3D DEPTH)
   ========================================================================== */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #ffd89b 0%, #d88924 55%, #b91c1c 100%);
  z-index: 9999;
  transition: width 0.08s linear;
  box-shadow: 0 1px 6px rgba(216, 137, 36, 0.55);
  pointer-events: none;
}

html,
body {
  overflow-x: clip;
}

.sr-item {
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.74s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
  transition-delay: var(--sr-delay, 0ms);
}

.inline-quote-card.sr-item:not(.sr-done) {
  animation: none !important;
}

/* Góc nghiêng Isometric 3D & Hướng trượt (Trái sang, Phải sang, Dưới lên) khi cuộn tới */
.sr-iso-card {
  transform: perspective(1100px) translate3d(-24px, 48px, -70px) rotateX(22deg) rotateY(-15deg) rotateZ(-2.5deg) scale(0.91);
}

.sr-iso-left {
  transform: perspective(1100px) translate3d(-68px, 24px, -55px) rotateX(12deg) rotateY(18deg) rotateZ(-2deg) scale(0.92);
}

.sr-iso-right {
  transform: perspective(1100px) translate3d(68px, 24px, -55px) rotateX(12deg) rotateY(-18deg) rotateZ(2deg) scale(0.92);
}

.sr-iso-flip {
  transform: perspective(1100px) translate3d(0, 54px, -60px) rotateX(24deg) rotateY(6deg) scale(0.91);
}

.sr-up {
  transform: perspective(1000px) translate3d(0, 44px, -35px) rotateX(14deg) scale(0.94);
}

@media (max-width: 900px) {
  .sr-item {
    transition:
      opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--sr-delay, 0ms);
  }
  .sr-iso-left {
    transform: perspective(900px) translate3d(-58px, 18px, -35px) rotateX(10deg) rotateY(15deg) scale(0.91);
  }
  .sr-iso-right {
    transform: perspective(900px) translate3d(58px, 18px, -35px) rotateX(10deg) rotateY(-15deg) scale(0.91);
  }
  .sr-iso-card,
  .sr-iso-flip {
    transform: perspective(900px) translate3d(0, 48px, -40px) rotateX(18deg) scale(0.91);
  }
  .sr-up {
    transform: perspective(900px) translate3d(0, 38px, -25px) rotateX(12deg) scale(0.94);
  }
}

.sr-item.sr-visible {
  opacity: 1;
  transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
}

/* Sau khi hiệu ứng Isometric vào vị trí hoàn tất, trả delay về 0ms để hiệu ứng 3D Hover phản hồi tức thì */
.sr-item.sr-done {
  transition-delay: 0ms !important;
  will-change: transform, box-shadow;
}

/* Hiệu ứng Khối Kiến Trúc 3D Isometric Extruded Layers khi rê chuột */
.product-card,
.project-card,
.usp-item,
.review-card {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.36s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}

/* Lớp ánh sáng chéo Isometric lướt qua mặt thẻ */
.product-card::after,
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0) 25%, rgba(255, 232, 185, 0.28) 50%, rgba(255, 255, 255, 0) 75%);
  transform: translateX(-120%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 3;
}

.product-card:hover::after,
.project-card:hover::after {
  transform: translateX(120%);
}

.product-card:hover,
.project-card:hover {
  transform: perspective(1000px) translate3d(5px, -8px, 16px) rotateX(4deg) rotateY(-5deg);
  border-color: #d89632;
  /* Đổ bóng phân tầng 3D Isometric tạo chiều sâu như cánh cửa thật */
  box-shadow:
    -5px 5px 0 #ead7ba,
    -10px 10px 0 rgba(216, 150, 50, 0.28),
    -16px 22px 34px rgba(36, 20, 11, 0.2);
}

.usp-item:hover,
.review-card:hover {
  transform: perspective(1000px) translate3d(4px, -6px, 12px) rotateX(3.5deg) rotateY(-4deg);
  border-color: #d89632;
  box-shadow:
    -4px 4px 0 #ead7ba,
    -8px 8px 0 rgba(216, 150, 50, 0.22),
    -14px 18px 28px rgba(36, 20, 11, 0.14);
}

@media (max-width: 768px) {
  .sr-iso-card,
  .sr-iso-left,
  .sr-iso-right,
  .sr-iso-flip {
    transform: perspective(900px) translate3d(0, 32px, -40px) rotateX(16deg) rotateY(-8deg) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   HIỆU ỨNG RUNG NHẸ CHO POPUP BÁO GIÁ & RUNG NỔI BẬT NÚT HOTLINE / ZALO
   ========================================================================== */
@keyframes quotePopupGentleShake {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  6% {
    transform: translate3d(-2.5px, -2px, 0) rotate(-0.55deg);
  }
  12% {
    transform: translate3d(2.5px, -2px, 0) rotate(0.55deg);
  }
  18% {
    transform: translate3d(-2px, -1px, 0) rotate(-0.35deg);
  }
  24% {
    transform: translate3d(2px, -1px, 0) rotate(0.35deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  65% {
    transform: translate3d(0, -3px, 0) rotate(0deg);
  }
}

@keyframes hotlineZaloRingShake {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  8% {
    transform: scale(1.06) rotate(-6deg);
  }
  16% {
    transform: scale(1.06) rotate(6deg);
  }
  24% {
    transform: scale(1.06) rotate(-6deg);
  }
  32% {
    transform: scale(1.06) rotate(6deg);
  }
  40% {
    transform: scale(1.03) rotate(-3deg);
  }
  48% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes callBtnPulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

@keyframes zaloBtnPulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(0, 104, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);
  }
}

@keyframes iconPhoneWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-18deg) scale(1.15); }
  30% { transform: rotate(18deg) scale(1.15); }
  45% { transform: rotate(-14deg) scale(1.1); }
  60% { transform: rotate(14deg) scale(1.1); }
  75% { transform: rotate(0deg) scale(1); }
}

/* Popup Báo Giá: Hiệu ứng rung nhẹ thu hút sự chú ý (tự tạm dừng khi khách đang gõ chữ) */
.quote-modal-overlay.open .quote-modal-card {
  animation:
    modalFadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    quotePopupGentleShake 3.4s ease-in-out 0.5s infinite;
}

.quote-modal-overlay.open .quote-modal-card:focus-within {
  animation: none;
}

/* Nút Hotline (08777 13 111) & Chat Zalo Ngay trong Popup rung lên nổi bật */
.quote-direct-call {
  animation:
    hotlineZaloRingShake 1.9s ease-in-out infinite,
    callBtnPulseRing 1.9s infinite;
  transform-origin: center center;
}

.quote-direct-zalo {
  animation:
    hotlineZaloRingShake 1.9s ease-in-out 0.45s infinite,
    zaloBtnPulseRing 1.9s 0.45s infinite;
  transform-origin: center center;
}

.quote-direct-call i,
.quote-direct-zalo i,
.hotline-badge .hotline-icon i {
  display: inline-block;
  animation: iconPhoneWiggle 1.4s ease-in-out infinite;
}

/* Nhãn VIP & Nút Gửi Báo Giá trong Popup cũng có nhịp thở ánh kim */
.quote-vip-badge {
  animation: hotlineZaloRingShake 2.8s ease-in-out 0.8s infinite;
}

/* ==========================================================================
   INLINE QUOTE CARD TRÊN TRANG LIÊN HỆ (ĐỒNG BỘ 100% VỚI POPUP BÁO GIÁ)
   ========================================================================== */
.inline-quote-card {
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 18px 45px rgba(36, 20, 11, 0.16), 0 0 0 1px rgba(212, 148, 58, 0.25) !important;
  animation: quotePopupGentleShake 4.2s ease-in-out 0.6s infinite;
}

.inline-quote-card:focus-within {
  animation: none !important;
}

/* ==========================================================================
   HIỆU ỨNG CẢM ƠN & TAN VỠ 3D (3D SHATTER / FRAGMENT DISINTEGRATION)
   ========================================================================== */
.thankyou-shatter-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(18, 9, 3, 0.76);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  perspective: 1200px;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.thankyou-shatter-overlay.active {
  opacity: 1;
}

.thankyou-shatter-overlay.fade-out {
  background: rgba(18, 9, 3, 0);
  backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background 0.65s ease, backdrop-filter 0.65s ease;
}

.thankyou-shatter-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #241106 0%, #3d1d0a 48%, #ffffff 48.2%, #fdf8f2 100%);
  border: 2px solid #d4943a;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6), 0 0 35px rgba(212, 148, 58, 0.35);
  text-align: center;
  transform-style: preserve-3d;
  animation: thankYouPopIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes thankYouPopIn {
  0% {
    opacity: 0;
    transform: perspective(1000px) scale(0.78) rotateX(18deg) translateY(24px);
  }
  65% {
    opacity: 1;
    transform: perspective(1000px) scale(1.03) rotateX(-3deg) translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) scale(1) rotateX(0deg) translateY(0);
  }
}

.thankyou-shatter-card.is-cracking {
  animation: thankYouCrackShake 0.26s ease-in-out forwards;
}

@keyframes thankYouCrackShake {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  25% { transform: scale(1.03) rotate(-1.2deg); filter: brightness(1.18); }
  50% { transform: scale(1.04) rotate(1.2deg); filter: brightness(1.3); }
  75% { transform: scale(1.02) rotate(-0.8deg); filter: brightness(1.45); }
  100% { transform: scale(0.96); opacity: 0; }
}

.thankyou-hero-top {
  padding: 28px 24px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 216, 155, 0.35) 0%, transparent 65%),
    linear-gradient(135deg, #211006 0%, #4b240c 55%, #733812 100%);
  color: #ffffff;
  border-bottom: 2px solid #d4943a;
  position: relative;
}

.thankyou-check-orb {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #ffd89b 0%, #d4882a 100%);
  color: #241004;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(255, 216, 155, 0.16), 0 10px 24px rgba(0, 0, 0, 0.35);
  animation: hotlineZaloRingShake 1.8s ease-in-out infinite;
}

.thankyou-hero-top h3 {
  font-size: 21px;
  font-weight: 800;
  color: #ffd89b;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.thankyou-hero-top p {
  font-size: 13px;
  color: rgba(255, 248, 240, 0.9);
  margin: 0;
}

.thankyou-body-content {
  padding: 22px 24px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fcf6ee 100%);
  color: #24140b;
}

.thankyou-msg-box {
  background: #fbf3e4;
  border: 1px dashed #d4943a;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #2c180a;
  margin-bottom: 16px;
}

.thankyou-msg-box strong {
  color: #9e5208;
  font-weight: 800;
}

.thankyou-close-shatter-btn {
  width: 100%;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #d88924 0%, #9e5208 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(180, 96, 14, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.thankyou-close-shatter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(180, 96, 14, 0.45);
}

.thankyou-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #ffd89b, #d88924, #9e5208);
  transform-origin: left center;
  animation: thankYouProgressCountdown 3.2s linear forwards;
}

@keyframes thankYouProgressCountdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Mảnh vỡ 3D (Shatter Shards & Golden Sparkles) */
.shatter-fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  perspective: 1100px;
  overflow: hidden;
}

.shatter-shard {
  position: absolute;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: visible;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 216, 155, 0.55);
  transition:
    transform 0.95s cubic-bezier(0.16, 0.84, 0.32, 1),
    opacity 0.92s ease-out;
}

.shatter-sparkle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e7 0%, #ffd07b 55%, #d88924 100%);
  box-shadow: 0 0 12px 2px rgba(255, 208, 123, 0.85);
  will-change: transform, opacity;
  transition:
    transform 0.88s cubic-bezier(0.15, 0.85, 0.35, 1),
    opacity 0.88s ease-out;
}

/* ==========================================================================
   TỐI ƯU HIỂN THỊ ẢNH SẮC NÉT HD (CRISP IMAGE RENDERING & MICRO-CONTRAST)
   ========================================================================== */
.product-media img,
.detail-img-box img,
.detail-thumb-item img,
.prod-zoom-stage img,
.project-thumb img,
.project-lb-stage img,
.hero-slider .slide img,
.hero-side-card img,
.pvc-color-card img,
.promo-dual-card img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: contrast(1.03) saturate(1.04);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ==========================================================================
   DỊCH VỤ SỬA CHỮA & THAY THẾ CỬA COMPOSITE CHUYÊN NGHIỆP 24/7
   ========================================================================== */
.repair-service-section {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px dashed #dfceb8;
}

.repair-service-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: stretch;
}

.repair-col-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.repair-col-card h3 {
  font-size: 18.5px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.repair-issues-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.repair-issue-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fdf9f4;
  border: 1px solid #eadbc8;
  cursor: pointer;
  transition: all 0.22s ease;
}

.repair-issue-item:hover {
  border-color: #d88924;
  background: #fffdf9;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(36, 20, 11, 0.08);
}

.repair-issue-item .repair-issue-icon,
.repair-issue-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3c1f0d, #6b3714);
  color: #ffd89b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

.repair-issue-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
  line-height: 1.3;
}

.repair-issue-item span:not(.repair-issue-icon) {
  display: block;
  font-size: 11.8px;
  color: var(--text-muted);
  line-height: 1.4;
}

.repair-replace-banner {
  background: linear-gradient(135deg, #241207 0%, #3d200d 100%);
  color: #ffffff;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(212, 148, 58, 0.48);
}

.repair-replace-banner h4 {
  font-size: 15px;
  font-weight: 800;
  color: #ffd89b;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.repair-replace-banner p {
  font-size: 12.8px;
  color: rgba(255, 245, 232, 0.9);
  margin-bottom: 10px;
  line-height: 1.5;
}

.repair-replace-banner ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.repair-replace-banner ul li {
  font-size: 12.5px;
  color: #fff6ea;
  display: flex;
  align-items: center;
  gap: 7px;
}

.repair-replace-banner ul li i {
  color: #4ade80;
}

.repair-price-table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5d5c0;
  margin-bottom: 10px;
}

.repair-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #ffffff;
}

.repair-price-table thead th {
  background: #2b1609;
  color: #ffd89b;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  font-size: 12.5px;
}

.repair-price-table tbody tr {
  border-bottom: 1px solid #f0e6d8;
  transition: background 0.15s ease;
}

.repair-price-table tbody tr:last-child {
  border-bottom: none;
}

.repair-price-table tbody tr:hover {
  background: #fdf8f1;
}

.repair-price-table td {
  padding: 10px 12px;
  color: var(--text-dark);
  vertical-align: middle;
}

.repair-price-table td.rp-price {
  color: #b91c1c;
  font-weight: 800;
  white-space: nowrap;
}

.rp-book-btn {
  background: #fbf2e3;
  border: 1px solid #d88924;
  color: #7c4008;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.rp-book-btn:hover {
  background: #d88924;
  color: #ffffff;
}

.repair-price-note {
  font-size: 12px;
  color: #6e5c4b;
  background: #faf5ed;
  border-left: 3px solid #d88924;
  padding: 8px 11px;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 1.45;
}

.repair-steps-box {
  background: #fdf9f3;
  border: 1px solid #eadbc8;
  border-radius: 12px;
  padding: 12px 14px;
}

.repair-steps-box h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.repair-steps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.repair-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2d1ba;
  border-radius: 50px;
  padding: 4px 10px 4px 5px;
  font-size: 11.8px;
  font-weight: 600;
  color: #3a210f;
}

.repair-step-pill span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d88924;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Banner nổi bật Dịch vụ Sửa chữa trên Trang Chủ & Trang Liên Hệ */
.repair-highlight-banner {
  background:
    radial-gradient(circle at 88% 20%, rgba(216, 137, 36, 0.25) 0%, transparent 55%),
    linear-gradient(135deg, #211006 0%, #3d1e0b 55%, #5c2d10 100%);
  border: 1.5px solid rgba(212, 148, 58, 0.55);
  border-radius: 18px;
  padding: 24px 28px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 16px 40px rgba(36, 20, 11, 0.18);
}

.repair-hb-left {
  flex: 1;
  min-width: 0;
}

.repair-hb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd89b 0%, #d88924 100%);
  color: #241004;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
  letter-spacing: 0.4px;
}

.repair-hb-left h2 {
  font-size: 21px;
  font-weight: 800;
  color: #ffd89b;
  margin-bottom: 8px;
  line-height: 1.3;
}

.repair-hb-left p {
  font-size: 13.5px;
  color: rgba(255, 246, 235, 0.92);
  margin-bottom: 14px;
  line-height: 1.55;
}

.repair-hb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.repair-hb-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 216, 155, 0.3);
  color: #fff3df;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.repair-hb-tags span:hover {
  background: rgba(216, 137, 36, 0.35);
  border-color: #ffd89b;
  transform: translateY(-1px);
}

.repair-hb-tags span i {
  color: #4ade80;
}

.repair-hb-tags span strong {
  color: #ffd89b;
}

.repair-hb-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  min-width: 235px;
}

.repair-hb-right .btn-primary,
.repair-hb-right .btn-outline-light {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .repair-service-grid {
    grid-template-columns: 1fr;
  }
  .repair-highlight-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 16px;
  }
  .repair-hb-right {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .repair-issues-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .repair-hb-left h2 {
    font-size: 17.5px;
  }
  .repair-hb-left p {
    font-size: 12.5px;
  }
  .repair-hb-tags span {
    font-size: 11.2px;
    padding: 4px 9px;
  }
  .repair-price-table th,
  .repair-price-table td {
    padding: 8px 8px;
    font-size: 12px;
  }
}

/* ================= TRANG CHUYÊN BIỆT: DỊCH VỤ SỬA CHỮA & THAY THẾ CỬA (sua-chua-cua.html) ================= */
.repair-hero-banner {
  background:
    radial-gradient(circle at 85% 20%, rgba(216, 137, 36, 0.28) 0%, transparent 50%),
    linear-gradient(135deg, #1d0e05 0%, #371a09 55%, #54280e 100%);
  padding: 34px 0 42px;
  color: #ffffff;
  border-bottom: 3px solid rgba(212, 148, 58, 0.45);
}

.repair-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 32px;
  align-items: center;
}

.repair-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 216, 155, 0.14);
  border: 1px solid rgba(255, 216, 155, 0.4);
  color: #ffd89b;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
  letter-spacing: 0.4px;
}

.repair-hero-content h1 {
  font-size: 31px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 12px;
}

.repair-hero-content h1 span {
  color: #ffd89b;
}

.repair-hero-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 246, 235, 0.92);
  margin-bottom: 20px;
}

.repair-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.rh-badge-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 216, 155, 0.26);
  border-radius: 13px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rh-badge-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 216, 155, 0.55);
}

.rh-badge-card .rh-badge-icon,
.rh-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffd89b 0%, #d88924 100%);
  color: #241004 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  line-height: 1 !important;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(216, 137, 36, 0.32);
}

.rh-badge-icon i {
  display: block;
  line-height: 1;
  color: #241004 !important;
}

.rh-badge-card strong {
  display: block;
  font-size: 13.8px;
  color: #ffd89b;
  margin-bottom: 3px;
}

.rh-badge-card span:not(.rh-badge-icon) {
  display: block;
  font-size: 12px;
  color: rgba(255, 245, 232, 0.88);
  line-height: 1.38;
}

.repair-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.repair-hero-img-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(255, 216, 155, 0.48);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #261206 0%, #1c0d04 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.repair-hero-img-stage {
  background: #ffffff;
  border-radius: 13px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(216, 137, 36, 0.18);
}

.repair-hero-img-card img {
  width: 100%;
  height: auto !important;
  max-height: 400px;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

.repair-hero-floating-tag {
  position: static;
  background: rgba(34, 17, 7, 0.95);
  border: 1px solid rgba(255, 216, 155, 0.4);
  color: #ffffff;
  border-radius: 11px;
  padding: 9px 14px;
  font-size: 12.5px;
}

.repair-hero-floating-tag.top-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}

.repair-hero-floating-tag.top-tag i {
  color: #4ade80;
  font-size: 15px;
}

.repair-hero-floating-tag.top-tag strong {
  color: #ffd89b;
}

.repair-hero-floating-tag.bottom-tag {
  text-align: center;
}

.repair-hero-floating-tag.bottom-tag small {
  display: block;
  font-size: 11px;
  color: #ffd89b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.repair-hero-floating-tag.bottom-tag strong {
  font-size: 13.5px;
  color: #ffffff;
}

/* Lưới 6 Thẻ Sự cố & Giải pháp sửa chữa cửa Composite */
.repair-6cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.repair-problem-card {
  background: #ffffff;
  border: 1px solid #eadbc8;
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(36, 20, 11, 0.05);
  transition: all 0.24s ease;
}

.repair-problem-card:hover {
  transform: translateY(-4px);
  border-color: #d88924;
  box-shadow: 0 14px 32px rgba(216, 137, 36, 0.14);
}

.rpc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.rpc-num {
  font-size: 12px;
  font-weight: 800;
  color: #9c7a56;
  background: #f8efe2;
  padding: 3px 9px;
  border-radius: 50px;
}

.rpc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbf1e1 0%, #f3dec0 100%);
  color: #b86b11;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.rpc-price-pill {
  margin-left: auto;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 50px;
}

.repair-problem-card h3 {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
}

.rpc-symptom {
  font-size: 13px;
  color: #5c4b3b;
  line-height: 1.5;
  margin-bottom: 10px;
}

.rpc-solution {
  font-size: 13px;
  color: #2f2013;
  background: #fdf8f0;
  border-left: 3px solid #16a34a;
  padding: 9px 11px;
  border-radius: 8px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.rpc-solution i {
  color: #16a34a;
}

.rpc-action-btn {
  width: 100%;
  background: #faf3e8;
  border: 1px solid #dec7aa;
  color: #4a2810;
  font-size: 12.8px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.rpc-action-btn:hover {
  background: linear-gradient(135deg, #d88924 0%, #b86b11 100%);
  border-color: #b86b11;
  color: #ffffff;
}

/* Công cụ Ước tính nhanh chi phí sửa cửa */
.repair-calc-checklist {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rc-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf9f3;
  border: 1px solid #e6d5be;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.rc-check-item:hover {
  border-color: #d88924;
  background: #fbf3e6;
}

.rc-check-item input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #d88924;
  flex-shrink: 0;
  cursor: pointer;
}

.rc-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  flex: 1;
}

.rc-item-price {
  font-size: 12.5px;
  font-weight: 800;
  color: #b91c1c;
  white-space: nowrap;
}

.calc-result-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calc-result-actions .btn-primary,
.calc-result-actions .btn-outline-light {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px !important;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.calc-result-actions .btn-primary {
  flex: 1 1 220px;
}

.calc-result-actions .btn-outline-light {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .repair-hero-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .repair-hero-content h1 {
    font-size: 23px;
  }
  .repair-hero-img-card img {
    height: auto !important;
    max-height: 320px;
    object-fit: contain !important;
  }
  .repair-6cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .repair-hero-banner {
    padding: 20px 0 26px;
  }
  .repair-hero-badges {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .repair-hero-actions .btn-primary,
  .repair-hero-actions .btn-outline-light {
    width: 100%;
    justify-content: center;
  }
  .calc-result-box {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  #repair-est-range {
    font-size: 20px !important;
  }
  .calc-result-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }
  .calc-result-actions .btn-primary,
  .calc-result-actions .btn-outline-light {
    width: 100% !important;
    flex: none !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    border-radius: 11px !important;
  }
}

/* ==========================================================================
   MOBILE COMPACT NAV, AUTO-HIDE FULL HEADER, GPU CRASH PROTECTION & ZOOM FIX
   (Chỉ áp dụng trên Mobile/Tablet, giữ nguyên 100% giao diện Desktop)
   ========================================================================== */
.prod-zoom-stage.interacting img {
  transition: none !important;
}

.sr-item.sr-done {
  will-change: auto !important;
}

@media (max-width: 900px) {
  /* Khi lướt xuống trên Mobile: Ẩn mượt toàn bộ cụm Header (Logo + Nhận Báo Giá + Tìm kiếm + Menu) để xem sản phẩm toàn màn hình */
  .site-header {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
    will-change: transform;
  }
  .site-header.header-mob-hidden {
    transform: translate3d(0, -104%, 0) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  /* Triệt tiêu hoàn toàn tràn bộ nhớ GPU (iOS Safari WebKit Jetsam Crash) khi mở nhiều ảnh & phóng to ảnh */
  .product-media img,
  .detail-img-box img,
  .detail-thumb-item img,
  .prod-zoom-stage img,
  .project-thumb img,
  .project-lb-stage img {
    filter: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  .modal-overlay,
  .prod-zoom-overlay,
  .prod-zoom-topbar,
  .quote-modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .prod-zoom-overlay {
    background: rgba(12, 6, 2, 0.96) !important;
    touch-action: none;
    overscroll-behavior: none;
  }

  .prod-zoom-topbar {
    background: rgba(28, 15, 7, 0.95) !important;
  }

  .prod-zoom-stage {
    touch-action: none;
    overscroll-behavior: none;
  }

  .prod-zoom-stage img {
    box-shadow: none !important;
    touch-action: none;
    -webkit-user-drag: none;
    will-change: transform;
  }

  .prod-zoom-thumbs {
    touch-action: pan-x;
  }

  .product-card,
  .project-card,
  .usp-item,
  .review-card {
    transform-style: flat !important;
    will-change: auto !important;
  }

  .product-card::after,
  .project-card::after {
    display: none !important;
  }

  .sr-iso-card,
  .sr-iso-left,
  .sr-iso-right,
  .sr-iso-flip,
  .sr-up {
    transform: translateY(16px) !important;
  }

  .sr-item.sr-visible {
    transform: translateY(0) !important;
  }
}

@media (max-width: 768px) {
  /* 1. Ẩn hoàn toàn thanh menu Trang Chủ | Sản Phẩm... trên Mobile */
  .header-nav {
    display: none !important;
  }

  /* 2. Thu gọn khu vực tiêu đề giới thiệu & thanh sắp xếp phía trên danh sách sản phẩm */
  .page-hero {
    padding: 10px 0 9px;
  }
  .page-hero-inner {
    gap: 3px;
  }
  .page-hero h1 {
    font-size: 14.5px;
    line-height: 1.28;
  }
  .page-hero p {
    font-size: 11px;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .catalog-section-main.section-block {
    padding-top: 10px;
  }
  .catalog-topbar {
    padding: 8px 10px;
    margin-bottom: 10px;
    gap: 6px;
    border-radius: 10px;
  }
  .catalog-topbar-left {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .catalog-topbar-left h2 {
    font-size: 12.8px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
  }
  .catalog-count-pill {
    font-size: 10.5px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .catalog-sort-pills {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .catalog-sort-pills::-webkit-scrollbar {
    display: none;
  }
  .catalog-sort-pills .sort-lbl {
    font-size: 10.5px;
    white-space: nowrap;
  }
  .catalog-sort-pills button {
    font-size: 10.5px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 3. Chia danh mục Tất Cả Sản Phẩm & 12 dòng Cửa thành 2 dòng dễ nhìn trên Mobile */
  .catalog-cat-pills,
  #section-models .filter-pills {
    display: grid !important;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .catalog-cat-pills {
    margin-bottom: 12px !important;
  }
  .catalog-cat-pills::-webkit-scrollbar,
  #section-models .filter-pills::-webkit-scrollbar {
    display: none;
  }
  .catalog-cat-pills .filter-pill,
  #section-models .filter-pills .filter-pill {
    padding: 5.5px 10.5px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 375px) {
  .nav-list > li > a {
    font-size: 9.2px !important;
    padding: 3px 2px !important;
  }
  .catalog-cat-pills .filter-pill,
  #section-models .filter-pills .filter-pill {
    padding: 5px 9px;
    font-size: 10.5px;
  }
}

/* ==========================================================================
   NÂNG CẤP GIAO DIỆN SHOWROOM MOBILE THAM KHẢO PHONG CÁCH VIETDUCHOME.VN:
   1. Khung ảnh cửa tỷ lệ dọc 4:5 nguyên cánh trên nền trắng (không cắt xén)
   2. Thanh trượt ngang sản phẩm (Swipe Carousel) trên Trang chủ Mobile
   3. Bảng Thông số kỹ thuật kẻ ô & Nút "Nhận Báo Giá Mẫu Này" gắn sẵn Mã SP
   4. Thanh cố định đáy màn hình Mobile 4 ô (Nhận báo giá | Hotline | Zalo | Tư vấn)
   ========================================================================== */

/* Hàng 2 nút Chi tiết & Báo giá dưới mỗi thẻ sản phẩm */
.product-card-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.btn-card-quote {
  border: 1px solid #d92632;
  background: linear-gradient(135deg, #d92632 0%, #b91020 100%);
  color: #ffffff;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn-card-quote:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(185, 16, 32, 0.28);
}

/* Khung ảnh cửa hiển thị nguyên cánh 100% trên nền trắng sang trọng */
.product-media {
  background: #ffffff !important;
  border-bottom: 1px solid #f2ebe1;
}

.product-media img {
  object-fit: contain !important;
  padding: 10px 8px;
  background: #ffffff;
}

/* Mũi tên lướt ngang trên Trang chủ (chỉ hiện trên Mobile) */
.mob-swipe-carousel-wrap {
  position: relative;
}

.mob-carousel-arrow {
  display: none;
}

/* Nâng cấp Modal Chi tiết sản phẩm: Mũi tên chuyển mẫu + Bảng thông số kẻ ô + Nút Báo giá đỏ */
.detail-img-box {
  position: relative;
  background: #ffffff !important;
}

.detail-step-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(128, 64, 0, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: #52290e;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: all 0.18s ease;
}

.detail-step-arrow.prev {
  left: 8px;
}

.detail-step-arrow.next {
  right: 8px;
}

.detail-step-arrow:hover {
  background: #804000;
  color: #ffd89b;
}

.detail-meta-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.detail-sku-pill {
  font-size: 11.5px;
  background: #fdf3e4;
  color: #6e3600;
  border: 1px solid rgba(200, 138, 50, 0.35);
  padding: 3px 9px;
  border-radius: 50px;
}

.detail-cat-pill {
  font-size: 11.5px;
  background: #f5f2ed;
  color: #5a4636;
  padding: 3px 9px;
  border-radius: 50px;
  font-weight: 600;
}

.detail-specs-heading {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-specs-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eadfd2;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #ffffff;
  font-size: 12.8px;
}

.detail-specs-table tr + tr {
  border-top: 1px dashed #eadfd2;
}

.detail-specs-table th {
  width: 34%;
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  background: #faf6f0;
  color: #3d2817;
  font-weight: 700;
  border-right: 1px solid #efe6da;
  line-height: 1.4;
}

.detail-specs-table td {
  padding: 8px 10px;
  color: #44382e;
  line-height: 1.45;
}

.detail-cta-actions {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.btn-detail-quote-red {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, #dc2527 0%, #b91020 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(220, 37, 39, 0.28);
  cursor: pointer;
}

.btn-detail-quote-red:hover {
  filter: brightness(1.05);
}

.detail-cta-subrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

/* Thẻ xem trước mẫu cửa được chọn trong Popup Báo giá & Cam kết bảo mật */
.quote-selected-product-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  margin-bottom: 11px;
  background: #fdf8f1;
  border: 1px solid #e6d2b5;
  border-radius: 12px;
}

.quote-selected-product-card img {
  width: 50px;
  height: 62px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 7px;
  border: 1px solid #eee2d3;
  padding: 3px;
  flex-shrink: 0;
}

.quote-selected-product-card .qsp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.quote-selected-product-card .qsp-sku {
  font-size: 11px;
  color: #7c5836;
}

.quote-selected-product-card .qsp-title {
  font-size: 13px;
  color: #24140b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-selected-product-card .qsp-price {
  font-size: 12.5px;
  font-weight: 800;
  color: #c81e2b;
}

.quote-privacy-note {
  font-size: 11.5px;
  color: #6b5b4d;
  text-align: center;
  margin: 2px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.quote-privacy-note i {
  color: #16a34a;
}

/* Thanh cố định đáy màn hình Mobile 4 ô (.mob-bottom-cta-bar) - ẩn trên Desktop */
.mob-bottom-cta-bar {
  display: none;
}

@keyframes mobPhoneSwing {
  0% { transform: rotate(14deg); }
  100% { transform: rotate(-14deg); }
}

@keyframes mobPhonePulse {
  0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0; }
}

@media (max-width: 768px) {
  /* Chừa khoảng đệm chân trang cho thanh cố định đáy Mobile */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* 1. Thanh cố định đáy màn hình Mobile 4 ô (chuẩn phong cách vietduchome.vn) */
  .mob-bottom-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    display: grid;
    grid-template-columns: 1.18fr 0.94fr 0.94fr 0.94fr;
    background: #ffffff;
    border-top: 1px solid #e6ddd2;
    box-shadow: 0 -4px 18px rgba(24, 12, 5, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mob-bcta-item {
    height: 56px;
    border: none;
    background: #ffffff;
    color: #24140b;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-bcta-item:not(:last-child) {
    border-right: 1px solid #eee6dc;
  }

  .mob-bcta-item.is-quote {
    background: linear-gradient(135deg, #dc2527 0%, #b91020 100%);
    color: #ffffff !important;
  }

  .mob-bcta-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .mob-bcta-item.is-call .mob-bcta-icon {
    color: #dc2527;
  }

  .mob-bcta-item.is-call .mob-bcta-icon i {
    animation: mobPhoneSwing 0.36s ease-in-out infinite alternate;
  }

  .mob-bcta-icon.has-pulse::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    border: 1.5px solid #dc2527;
    border-radius: 50%;
    animation: mobPhonePulse 1.25s ease-out infinite;
    pointer-events: none;
  }

  .mob-bcta-item.is-chat .mob-bcta-icon {
    color: #804000;
  }

  .mob-bcta-online {
    position: absolute;
    top: 0;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    border: 1.5px solid #ffffff;
  }

  .mob-bcta-lbl {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Ẩn 3 nút tròn cũ đè lên ảnh sản phẩm trên Mobile, chỉ giữ nút Lướt lên đầu trang phía trên thanh đáy */
  .floating-stack .live-call-btn,
  .floating-stack .chatbot-launcher-wrap,
  .floating-stack .zalo-circle-btn {
    display: none !important;
  }

  .floating-stack {
    right: 10px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chatbot-window {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 140px);
  }

  /* 2. Khung ảnh cửa Mobile chuẩn tỷ lệ dọc 4:5 (122%) hiển thị trọn vẹn nguyên cánh */
  .product-media {
    padding-top: 122% !important;
    background: #ffffff !important;
  }

  .product-media img {
    object-fit: contain !important;
    padding: 8px 6px !important;
  }

  .product-code {
    display: block !important;
    font-size: 9.8px !important;
    color: #8a735c;
    margin-bottom: 2px;
  }

  .product-card-cta-row {
    gap: 5px;
  }

  .product-card-cta-row .btn-detail,
  .product-card-cta-row .btn-card-quote {
    padding: 6px 4px !important;
    font-size: 10.8px !important;
    border-radius: 6px;
  }

  /* 3. Thanh trượt ngang sản phẩm (Swipe Carousel) trên Trang chủ Mobile giống vietduchome.vn */
  #grid-high-tech > .product-card:nth-child(n+5),
  #grid-models > .product-card:nth-child(n+5),
  #grid-accessories > .product-card:nth-child(n+5) {
    display: flex !important;
  }

  #grid-high-tech,
  #grid-models,
  #grid-accessories {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc(46.5% - 4px);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 8px;
  }

  #grid-high-tech::-webkit-scrollbar,
  #grid-models::-webkit-scrollbar,
  #grid-accessories::-webkit-scrollbar {
    display: none;
  }

  #grid-high-tech > .product-card,
  #grid-models > .product-card,
  #grid-accessories > .product-card {
    scroll-snap-align: start;
  }

  .mob-carousel-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(128, 64, 0, 0.24);
    background: rgba(255, 255, 255, 0.94);
    color: #52290e;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    cursor: pointer;
  }

  .mob-carousel-arrow.prev {
    left: -4px;
  }

  .mob-carousel-arrow.next {
    right: -4px;
  }

  /* 4. Khung ảnh Chi tiết sản phẩm lớn & Bảng thông số gọn đẹp trên Mobile */
  .detail-img-box {
    height: 280px !important;
    min-height: 280px !important;
  }

  .detail-img-box img {
    height: 262px !important;
    max-height: 262px !important;
  }

  .detail-specs-table {
    font-size: 11.8px;
    margin-bottom: 10px;
  }

  .detail-specs-table th {
    width: 36%;
    padding: 6.5px 8px;
  }

  .detail-specs-table td {
    padding: 6.5px 8px;
  }

  .btn-detail-quote-red.detail-cta-btn {
    font-size: 12.8px !important;
    padding: 10px 10px !important;
  }

  .detail-cta-subrow .detail-cta-btn {
    font-size: 12.2px !important;
    padding: 9px 8px !important;
  }
}