/* ==========================================================================
   CARPLA SERVICE - REDESIGNED THEME (TRẮNG - ĐỎ - ĐEN - XÁM)
   Clean Vanilla CSS Architecture
   ========================================================================== */

/* --- CSS Variables / Design System Tokens --- */
:root {
  /* Brand Red Palette */
  --c-red: #D90429;
  --c-red-accent: #EF233C;
  --c-red-dark: #A0001E;
  --c-red-soft: #FFF1F2;
  --c-red-glow: rgba(239, 35, 60, 0.3);

  /* Deep Black & Dark Onyx */
  --c-black: #0B0D10;
  --c-black-surface: #14171D;
  --c-black-card: #1C2027;
  --c-black-border: #2B313D;

  /* White & Snow */
  --c-white: #FFFFFF;

  /* Grays Palette */
  --c-gray-50: #F8F9FA;
  --c-gray-100: #F1F3F5;
  --c-gray-200: #E5E7EB;
  --c-gray-300: #D1D5DB;
  --c-gray-400: #9CA3AF;
  --c-gray-500: #6B7280;
  --c-gray-600: #4B5563;
  --c-gray-700: #374151;
  --c-gray-800: #1F2937;
  --c-gray-900: #111827;

  /* Typography */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-title: 'Dosis', 'Inter', sans-serif;

  /* Spacing & Sizing */
  --container-max: 1240px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-red: 0 6px 20px rgba(239, 35, 60, 0.35);
  --shadow-dark: 0 12px 36px rgba(0, 0, 0, 0.35);
}

/* --- Base & Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
}

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

ul, ol {
  list-style: none;
}

/* --- Container Utilities --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --- Section Heading Utilities --- */
.section-header {
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}

.sub-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-red-accent);
  margin: 0 auto 10px;
}

.sub-tag::before, .sub-tag::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--c-red-accent);
}

.section-title,
.booking-title {
  font-family: var(--font-title);
  font-weight: 600;
}

.section-title {
  font-size: 32px;
  color: var(--c-black);
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.section-title.light-title {
  color: var(--c-white);
}

.laurel-bg {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* --- Button Styles --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background-color: var(--c-red-accent);
  color: var(--c-white);
  box-shadow: none;
}

.btn-primary:hover {
  background-color: var(--c-red-dark);
  transform: translateY(-2px);
  box-shadow: none;
}

.header-cta,
.hero-buttons .btn-primary {
  box-shadow: none !important;
}

.header-cta:hover,
.hero-buttons .btn-primary:hover {
  box-shadow: none !important;
}

.btn-dark {
  background-color: var(--c-black);
  color: var(--c-white);
}

.btn-dark:hover {
  background-color: var(--c-black-surface);
  color: var(--c-red-accent);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--c-black);
  border: 1.5px solid var(--c-gray-300);
}

.btn-outline:hover {
  border-color: var(--c-red-accent);
  color: var(--c-red-accent);
  background-color: var(--c-red-soft);
}

.btn-white {
  background-color: var(--c-white);
  color: var(--c-black);
  box-shadow: var(--shadow-sm);
}

.btn-white:hover {
  background-color: var(--c-red-accent);
  color: var(--c-white);
  box-shadow: var(--shadow-red);
}

/* ==========================================================================
   1. TOPBAR & HEADER
   ========================================================================== */
.topbar {
  background-color: var(--c-black);
  color: var(--c-gray-300);
  font-size: 13px;
  border-bottom: 1px solid var(--c-black-border);
  padding: 8px 0;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.topbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.topbar-item a:hover {
  color: var(--c-red-accent);
}

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

.search-box {
  display: flex;
  align-items: center;
  background-color: var(--c-black-surface);
  border: 1px solid var(--c-black-border);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  width: 240px;
  transition: var(--transition);
}

.search-box:focus-within {
  border-color: var(--c-red-accent);
  box-shadow: 0 0 0 2px var(--c-red-glow);
}

.search-box input {
  background: transparent;
  width: 100%;
  color: var(--c-white);
  font-size: 12px;
}

.search-box input::placeholder {
  color: var(--c-gray-500);
}

/* Ô tìm kiếm giờ là <form>, nút kính lúp là <button> thật để bấm được chứ không
   chỉ nhấn Enter. Nút trong suốt nên trông y như cái icon cũ. */
.search-box__submit {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* Nhãn cho trình đọc màn hình: không chiếm chỗ nhưng vẫn được đọc lên. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--c-gray-400);
  transition: var(--transition);
}

.social-links a:hover {
  color: var(--c-red-accent);
  transform: translateY(-2px);
}

/* Main Navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--c-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: var(--transition);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

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

.brand-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-gray-800);
  position: relative;
  padding: 8px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--c-red-accent);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--c-red-accent);
  border-radius: 2px;
}

/* Dropdown Menu */
.nav-item-has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--c-white);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  border: 1px solid var(--c-gray-200);
  z-index: 100;
}

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

.nav-dropdown li a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-gray-700);
}

.nav-dropdown li a:hover {
  background-color: var(--c-red-soft);
  color: var(--c-red-accent);
  padding-left: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  cursor: pointer;
  padding: 6px;
}

.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--c-black);
  transition: var(--transition);
}

/* ==========================================================================
/* ==========================================================================
   2. HERO SLIDER SECTION
   ========================================================================== */
.hero-slider-section {
  position: relative;
  background-color: #0B0E14;
  overflow: hidden;
  min-height: 600px;
  height: 72vh;
  max-height: 700px;
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active .hero-bg-img {
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 9, 12, 0.68) 0%, rgba(11, 14, 20, 0.48) 38%, rgba(11, 14, 20, 0.22) 70%, rgba(11, 14, 20, 0.04) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 40px 0;
}

/* Sub-tag Badge Pill */
.hero-badge-pill {
  display: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 30px;
  background: rgba(239, 35, 60, 0.12);
  border: 1px solid rgba(239, 35, 60, 0.35);
  color: #EF233C;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #EF233C;
  box-shadow: 0 0 8px #EF233C;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.hero-title {
  font-size: 46px;
  line-height: 1.22;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s;
}

.hero-title span {
  color: #EF233C;
}

.hero-subtitle {
  font-size: 15.5px;
  line-height: 1.65;
  color: #CBD5E1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  margin-bottom: 30px;
  max-width: 540px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease 0.45s, transform 0.6s ease 0.45s;
}

/* Active animations */
.hero-slide.active .hero-badge-pill,
.hero-slide.active .hero-title,
.hero-slide.active .hero-subtitle,
.hero-slide.active .hero-buttons {
  opacity: 1;
  transform: translateY(0);
}

.hero-btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--c-white);
  font-weight: 700;
  font-size: 15.5px;
  transition: var(--transition);
}

.hero-btn-phone:hover {
  background-color: var(--c-white);
  color: var(--c-black);
  transform: translateY(-2px);
}

/* Navigation Controls (Arrows) */
.hero-slider-nav {
  position: absolute;
  right: 50px;
  bottom: 38px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 14, 20, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.hero-nav-btn:hover {
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(239, 35, 60, 0.45);
  transform: scale(1.08);
}

/* Dots & Counter Indicator */
.hero-slider-dots {
  position: absolute;
  left: 50px;
  bottom: 38px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  transition: color 0.3s ease;
}

.hero-dot .dot-bar {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dot .dot-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hero-dot:hover {
  color: #FFFFFF;
}

.hero-dot:hover .dot-bar {
  background: rgba(255, 255, 255, 0.6);
}

.hero-dot.active {
  color: #FFFFFF;
}

.hero-dot.active .dot-bar {
  width: 48px;
  background: #EF233C;
  box-shadow: 0 0 10px rgba(239, 35, 60, 0.6);
}

/* ==========================================================================
   3. SERVICES OVERVIEW (3 CARDS)
   ========================================================================== */
.services-section {
  padding: 70px 0 50px;
  background-color: var(--c-gray-50);
}

.service-process {
  display: flex;
  align-items: stretch;
  padding: 0 36px;
}

.service-process-step {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 246px;
  padding: 30px 48px 28px 68px;
  color: var(--c-white);
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 50%, calc(100% - 48px) 100%, 0 100%, 48px 50%);
  transition: transform .25s ease, filter .25s ease;
}

.service-process-step:first-child {
  padding-left: 42px;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 50%, calc(100% - 48px) 100%, 0 100%, 0 0);
  background: #2c2c2c;
}

.service-process-step:nth-child(2) {
  z-index: 2;
  margin-left: -48px;
  background: #d90429;
}

.service-process-step:nth-child(3) {
  z-index: 3;
  margin-left: -48px;
  background: #ef233c;
}

.service-process-step:hover {
  z-index: 4;
  transform: translateY(-6px);
  filter: brightness(1.06);
}

.service-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.service-step-top img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.service-step-top span {
  color: rgba(255, 255, 255, .2);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
}

.service-process-step h3 {
  margin-bottom: 12px;
  color: var(--c-white);
  font-size: 22px;
  font-weight: 700;
}

.service-process-step p {
  max-width: 250px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================================
   4. ABOUT SECTION
   ========================================================================== */
.about-section {
  padding: 80px 0 120px;
  background-color: var(--c-white);
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-media {
  position: relative;
  padding: 14px 10px 24px 14px;
}

.about-collage {
  position: relative;
  width: 100%;
  max-width: 540px;
}

.about-img-main {
  width: 84%;
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-collage:hover .about-img-main {
  transform: scale(1.01);
}

.about-img-sub {
  position: absolute;
  bottom: -24px;
  right: 0;
  width: 58%;
  border-radius: 24px;
  border: 7px solid #FFFFFF;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  object-fit: cover;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-collage:hover .about-img-sub {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}

/* Badges */
.about-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top Badge: Red Pill */
.about-badge-top {
  top: -12px;
  left: -12px;
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  border-radius: 16px;
  padding: 12px 24px;
  box-shadow: 0 8px 24px rgba(229, 35, 59, 0.38);
  z-index: 4;
}

.about-badge-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(229, 35, 59, 0.5);
}

.about-badge-top .badge-icon {
  width: 28px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.about-badge-top .badge-title {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Bottom Badge: Dark Card */
.about-badge-bottom {
  bottom: 24px;
  left: 14px;
  background-color: #14171F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  z-index: 3;
  gap: 14px;
}

.about-badge-bottom:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 35, 60, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.about-badge-bottom .badge-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-badge-bottom .badge-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.about-badge-bottom .badge-text-group {
  display: flex;
  flex-direction: column;
}

.about-badge-bottom .badge-number {
  font-size: 24px;
  font-weight: 800;
  color: #EF233C;
  line-height: 1.1;
  margin-bottom: 2px;
}

.about-badge-bottom .badge-label {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}

.about-info {
  position: relative;
}

.about-desc {
  font-size: 15px;
  color: var(--c-gray-600);
  line-height: 1.7;
  margin-bottom: 28px;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feature-box {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background-color: var(--c-gray-50);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: var(--transition);
}

.feature-box:hover {
  border-color: var(--c-red-accent);
  background-color: var(--c-white);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.feature-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: none;
  box-shadow: 0 6px 16px rgba(239, 35, 60, 0.32);
}

.feature-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.feature-content h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-black);
  margin-bottom: 6px;
}

.feature-content p {
  font-size: 14px;
  color: var(--c-gray-600);
  line-height: 1.5;
}

.feature-content b {
  color: var(--c-red-accent);
}

/* ==========================================================================
   5. STATS BAR (KEY METRICS)
   ========================================================================== */
.stats-section {
  position: relative;
  margin-top: -60px;
  z-index: 10;
  padding: 0 20px;
}

.stats-bar {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: stretch;
}

.stat-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
  min-height: 128px;
  padding: 24px 42px 24px 56px;
  color: var(--c-white);
  background: #d90429;
  clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 36px 100%, 0 50%);
  transition: transform .25s ease, filter .25s ease;
}

.stat-item:first-child {
  z-index: 1;
  padding-left: 28px;
  background: #2c2c2c;
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%);
}

.stat-item:nth-child(2) {
  z-index: 2;
  margin-left: -72px;
  background: #d90429;
}

.stat-item:nth-child(3) {
  z-index: 3;
  margin-left: -72px;
  background: #ef233c;
}

.stat-item:nth-child(4) {
  z-index: 4;
  margin-left: -72px;
  background: #c9082a;
}

.stat-item::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: -80px;
  right: -56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.stat-item:hover {
  transform: translateY(-5px);
  filter: brightness(1.06);
}

.stat-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stat-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.stat-number {
  position: relative;
  z-index: 1;
  font-size: 34px;
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
  letter-spacing: -0.6px;
}

.stat-label {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   6. FACILITIES (CƠ SỞ VẬT CHẤT)
   ========================================================================== */
.facilities-section {
  padding: 100px 0 70px;
  background-color: var(--c-white);
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.facility-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 260px;
  box-shadow: var(--shadow-md);
}

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

.facility-card:hover img.facility-img {
  transform: scale(1.05);
}

.facility-overlay-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.badge-white {
  background-color: var(--c-white);
  color: var(--c-black);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  width: fit-content;
  box-shadow: var(--shadow-sm);
}

.badge-red {
  background-color: var(--c-red-accent);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  width: fit-content;
  box-shadow: var(--shadow-red);
}

.facility-arrow-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--c-red-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-red);
  transition: var(--transition);
}

.facility-arrow-btn:hover {
  transform: scale(1.1) rotate(45deg);
  background-color: var(--c-black);
}

.facility-arrow-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   7. PROCESS SECTION (QUY TRÌNH SỬA CHỮA - SCROLLING TEXT & STICKY CROSSFADE IMAGE)
   ========================================================================== */
.process-section {
  padding: 85px 0 110px;
  background-color: #F8F9FA;
  border-top: 1px solid var(--c-gray-200);
  position: relative;
}

.process-story-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: flex-start;
  margin-top: 55px;
  position: relative;
}

/* Left Column: Scrolling Text (No white bg, no box shadow) */
.process-text-column {
  display: flex;
  flex-direction: column;
}

.process-phase-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 40px 0 130px;
  opacity: 0.38;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.process-phase-item:first-child {
  padding-top: 10px;
}

.process-phase-item:last-child {
  padding-bottom: 50px;
}

.process-phase-item.active {
  opacity: 1;
  transform: translateY(0);
}

.phase-meta-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.phase-badge {
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.phase-sub {
  color: #64748B;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.phase-title {
  font-size: 26px;
  font-weight: 800;
  color: #0B0E14;
  margin: 0 0 32px 0;
  line-height: 1.35;
}

.process-steps-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.process-step-row {
  display: flex;
  gap: 20px;
  position: relative;
}

.step-badge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.step-circle-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0B0E14;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #EF233C;
  box-shadow: 0 4px 14px rgba(239, 35, 60, 0.25);
  z-index: 2;
  transition: transform 0.3s ease;
}

.process-phase-item.active .step-circle-num {
  transform: scale(1.05);
}

.step-connector-line {
  width: 2px;
  flex: 1;
  min-height: 46px;
  background: #CBD5E1;
  margin: 8px 0;
}

.step-info-col {
  flex: 1;
  padding-top: 4px;
}

.step-heading {
  font-size: 17px;
  font-weight: 700;
  color: #0B0E14;
  margin: 0 0 6px 0;
}

.step-desc {
  font-size: 14.5px;
  line-height: 1.68;
  color: #475569;
  margin: 0 0 12px 0;
}

.step-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step-chip {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 4px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EF233C;
  display: inline-block;
}

/* Right Column: Sticky Image with Crossfade */
.process-sticky-column {
  position: sticky;
  top: 105px;
  z-index: 10;
  height: 520px;
}

.process-visual-sticky-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0B0E14;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12);
}

.process-visual-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.03);
}

.process-visual-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  z-index: 2;
}

.process-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* ==========================================================================
   8. CAR SPA & BEAUTIFY (CHĂM SÓC & LÀM ĐẸP Ô TÔ)
   ========================================================================== */
.spa-section {
  padding: 90px 0;
  background-color: var(--c-black);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}

.spa-bg-mask {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}

.spa-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.spa-tab-btn {
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--c-black-surface);
  border: 1px solid var(--c-black-border);
  color: var(--c-gray-300);
  transition: var(--transition);
}

.spa-tab-btn:hover {
  border-color: var(--c-red-accent);
  color: var(--c-white);
}

.spa-tab-btn.active {
  background-color: var(--c-red-accent);
  border-color: var(--c-red-accent);
  color: var(--c-white);
  box-shadow: var(--shadow-red);
}

.spa-content-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.spa-main-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
  box-shadow: var(--shadow-dark);
}

.spa-main-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.spa-main-card:hover img {
  transform: scale(1.04);
}

.spa-card-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  color: var(--c-white);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-red);
}

.spa-card-badge .badge-sub {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.spa-card-badge .badge-title {
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
}

.spa-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.spa-sub-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 202px;
  position: relative;
  box-shadow: var(--shadow-md);
}

.spa-sub-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.spa-sub-item:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   9. BOOKING FORM SECTION (ĐẶT LỊCH NGAY)
   ========================================================================== */
.booking-section {
  padding: 330px 0 92px;
  background: #f3f5f8;
  position: relative;
  overflow: hidden;
}

.booking-map-backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: 550px;
  background-color: #dce5ed;
}

.booking-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  filter: saturate(.72) brightness(1.04);
}

.booking-map-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(232, 239, 244, .2);
  pointer-events: none;
}

.booking-contact-card {
  position: relative;
  z-index: 1;
  background-color: var(--c-white);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(31, 47, 61, .16);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr);
  border: none;
}

.booking-form-col {
  padding: 44px 48px;
  background-color: var(--c-white);
}

.booking-eyebrow {
  color: var(--c-red-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.booking-title {
  font-size: 30px;
  line-height: 1.2;
  color: var(--c-black);
  margin-bottom: 24px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.form-group {
  position: relative;
}

.booking-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background-color: #f1f3f5;
  color: var(--c-gray-900);
  font-size: 14px;
  transition: var(--transition);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
  padding-right: 42px;
}

.form-textarea {
  border-radius: 12px;
  resize: vertical;
  min-height: 92px;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--c-red-accent);
  background-color: var(--c-white);
  box-shadow: 0 0 0 3px var(--c-red-glow);
}

.form-submit-btn {
  width: fit-content;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: var(--shadow-red);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--transition);
  margin-top: 4px;
}

.form-submit-btn:hover {
  background: #be123c;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(217, 4, 41, 0.45);
}

.booking-visual-panel {
  position: relative;
  overflow: hidden;
  min-height: 570px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(135deg, #0B0D10 0%, #171A20 100%);
}

.booking-workshop-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  position: absolute;
  inset: 0;
  filter: none;
}

.booking-visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 15, 20, .05), rgba(9, 15, 20, .48));
}

.booking-support-card {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 28px;
  width: min(288px, calc(100% - 56px));
  padding: 20px;
  border-radius: 8px;
  background: #be123c;
  color: var(--c-white);
  box-shadow: 0 12px 24px rgba(165, 17, 36, .28);
}

.booking-support-card span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* Tiêu đề thẻ theo font tiêu đề của theme (Dosis), to hơn một chút cho cân
   với danh sách thông tin liên hệ bên dưới. */
.booking-support-card > span {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
}

.booking-support-card p {
  margin: 7px 0 13px;
  font-size: 12px;
  line-height: 1.45;
}

.booking-support-card a {
  color: var(--c-white);
  font-size: 18px;
  font-weight: 800;
}

.booking-support-card__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-support-card__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-support-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .78;
}

.booking-support-card__list a {
  font-size: 15px;
  font-weight: 700;
  word-break: break-word;
}

.booking-support-card__list p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

/* ==========================================================================
   10. TESTIMONIALS (CẢM NHẬN KHÁCH HÀNG - 3 CARDS WITH OVERHANGING FLOATING BADGE)
   ========================================================================== */
.testimonials-section {
  padding: 85px 0 95px;
  background-color: #F8F9FA;
  background-repeat: no-repeat;
  background-position: center 62%;
  background-size: 1100px auto;
  position: relative;
  overflow: hidden;
}

.testimonials-slider-wrapper {
  position: relative;
  margin-top: 60px;
}

.testimonials-slides-container {
  position: relative;
  width: 100%;
}

.testimonials-slide-group {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.testimonials-slide-group.active {
  display: grid;
  animation: testimonialsFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* --- Testimonial Card --- */
.testimonial-box {
  position: relative;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 56px 26px 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #EBEBEB;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.09);
}

/* --- Overhanging Floating Dark Badge --- */
.box-floating-header {
  position: absolute;
  top: -26px;
  left: 20px;
  right: 20px;
  background: #0B0E14;
  border-radius: 7px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-box:hover .box-floating-header {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

.box-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.box-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.box-user-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-user-role {
  font-size: 12.5px;
  color: #94A3B8;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Card Body & Stars --- */
.box-inner-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.box-quote-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #555555;
  margin: 0 0 22px 0;
  font-weight: 400;
}

.box-star-rating {
  color: #F59E0B;
  font-size: 16px;
  letter-spacing: 3px;
  line-height: 1;
}

/* --- Custom Pagination Dots (Red ring active, dark solid inactive) --- */
.custom-slider-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 45px;
}

.target-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.target-dot .target-dot-core {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #0D1017;
  transition: all 0.25s ease;
}

.target-dot.active {
  border-color: #EF233C;
}

.target-dot.active .target-dot-core {
  background: #EF233C;
  width: 6px;
  height: 6px;
}

/* ==========================================================================
   11. BLOG & NEWS SECTION (HỎI ĐÁP & CẨM NANG CHĂM SÓC XE)
   ========================================================================== */
.blog-section {
  padding: 85px 0 95px;
  background-color: #F8F9FA;
  position: relative;
}

.blog-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.blog-filter-btn {
  padding: 8px 22px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 700;
  background: #FFFFFF;
  color: #1E293B;
  border: 1.5px solid #E2E8F0;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.blog-filter-btn:hover {
  border-color: #EF233C;
  color: #EF233C;
  transform: translateY(-2px);
}

.blog-filter-btn.active {
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(239, 35, 60, 0.35);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 48px;
}

/* Featured Card (Left) */
.blog-featured-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
}

.featured-img-wrap {
  position: relative;
  width: 100%;
  height: 310px;
  overflow: hidden;
  background: #0B0E14;
}

.featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-featured-card:hover .featured-img-wrap img {
  transform: scale(1.05);
}

.featured-content {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 12px;
}

.meta-author {
  color: #0B0E14;
  font-weight: 700;
}

.meta-cat {
  color: #EF233C;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.featured-title {
  font-size: 21px;
  font-weight: 800;
  color: #0B0E14;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.featured-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #64748B;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #EF233C;
  font-weight: 700;
  font-size: 14px;
}

/* Secondary Blog List (Right) */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
}

.blog-list-item {
  display: grid;
  grid-template-columns: 175px 1fr;
  gap: 20px;
  background-color: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #E2E8F0;
  box-shadow: none;
  text-decoration: none;
  align-items: center;
}

.item-thumbnail {
  position: relative;
  width: 175px;
  height: 118px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0B0E14;
}

.item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-list-item:hover .item-thumbnail img {
  transform: scale(1.08);
}

.item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.item-title {
  font-size: 15px;
  font-weight: 700;
  color: #0B0E14;
  line-height: 1.4;
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-desc {
  font-size: 13px;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #EF233C;
  font-size: 13px;
  font-weight: 700;
}

/* Bottom Explore Button */
.blog-btn-wrap {
  text-align: center;
  margin-top: 10px;
}

.blog-explore-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 32px;
  border-radius: 30px;
  background: #0B0E14;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EF233C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.blog-explore-all-btn:hover {
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(239, 35, 60, 0.35);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.blog-explore-all-btn:hover .btn-arrow-circle {
  transform: translateX(4px);
  background: #0B0E14;
}

/* ==========================================================================
   12. NEWSLETTER BAR (ĐĂNG KÝ NHẬN TIN)
   ========================================================================== */
.newsletter-section {
  padding: 36px 0;
  background: linear-gradient(135deg, #EF233C 0%, #D90429 100%);
  box-shadow: var(--shadow-red);
}

.newsletter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.newsletter-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-white);
}

.newsletter-form {
  display: flex;
  align-items: center;
  background-color: var(--c-white);
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 20px;
  width: 440px;
  max-width: 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.newsletter-form input {
  background: transparent;
  width: 100%;
  font-size: 14px;
  color: var(--c-gray-900);
}

.newsletter-form input::placeholder {
  color: var(--c-gray-400);
}

.newsletter-submit-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--c-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.newsletter-submit-btn:hover {
  background-color: var(--c-red-accent);
  transform: scale(1.06);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--c-black);
  color: var(--c-gray-400);
  position: relative;
  overflow: hidden;
  padding-top: 70px;
}

.footer-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
  pointer-events: none;
}

.footer-top {
  position: relative;
  z-index: 2;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--c-black-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1fr 1fr;
  gap: 40px;
}

.footer-col-brand img {
  height: 52px;
  width: auto;
  margin-bottom: 18px;
}

.footer-brand-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--c-gray-400);
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--c-black-surface);
  border: 1px solid var(--c-black-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  transition: var(--transition);
}

.footer-social-links a:hover {
  background-color: var(--c-red-accent);
  border-color: var(--c-red-accent);
  transform: translateY(-3px);
}

.footer-col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background-color: var(--c-red-accent);
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-contact-item img {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
}

.footer-contact-item a:hover {
  color: var(--c-red-accent);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer-nav-list a {
  color: var(--c-gray-400);
  transition: var(--transition);
}

.footer-nav-list a:hover {
  color: var(--c-red-accent);
  padding-left: 6px;
}

.footer-bottom {
  position: relative;
  z-index: 2;
  padding: 24px 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-bottom-links a:hover {
  color: var(--c-red-accent);
}

/* ==========================================================================
   14. FLOATING ACTION BUTTONS & WIDGETS
   ========================================================================== */
.floating-widget {
  position: fixed;
  bottom: 30px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  /* Canh theo mép phải: hàng "số điện thoại + Zalo" rộng hơn nút tròn, để mặc
     định stretch/center thì nút cuộn lên đầu trang trôi ra giữa. */
  align-items: flex-end;
  gap: 12px;
}

.float-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.float-btn:hover {
  transform: translateY(-3px) scale(1.05);
}

.float-call {
  background: var(--c-red-accent);
  color: var(--c-white);
  box-shadow: var(--shadow-red);
}

.float-zalo {
  background: #0068FF;
  color: var(--c-white);
}

.float-scroll-top {
  background: var(--c-black-surface);
  border: 1px solid var(--c-black-border);
  color: var(--c-white);
  opacity: 0;
  visibility: hidden;
}

.float-scroll-top.show {
  opacity: 1;
  visibility: visible;
}

/* Toast notification */
.toast-msg {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--c-black-surface);
  color: var(--c-white);
  border-left: 4px solid var(--c-red-accent);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dark);
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: var(--transition);
}

.toast-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile Navigation Drawer */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background-color: var(--c-black);
  z-index: 1002;
  box-shadow: var(--shadow-dark);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(100%);
  transition: var(--transition);
}

.mobile-nav-backdrop.open, .mobile-nav-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-nav-close {
  align-self: flex-end;
  background: transparent;
  color: var(--c-white);
  font-size: 28px;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-links a {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-gray-300);
}

.mobile-nav-links a:hover {
  color: var(--c-red-accent);
}

/* ==========================================================================
   15. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px) {
  .topbar {
    display: none;
  }

  .main-nav, .header-cta {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .stats-bar .stat-item,
  .stats-bar .stat-item:first-child,
  .stats-bar .stat-item:nth-child(2),
  .stats-bar .stat-item:nth-child(3),
  .stats-bar .stat-item:nth-child(4) {
    margin-left: 0;
    padding: 20px;
    clip-path: none;
    border-radius: var(--radius-md);
  }

  .spa-content-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsletter-box {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-form {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .service-process {
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }

  .service-process-step,
  .service-process-step:first-child,
  .service-process-step:nth-child(2),
  .service-process-step:nth-child(3) {
    margin-left: 0;
    min-height: 0;
    padding: 26px 30px;
    clip-path: none;
    border-radius: var(--radius-md);
  }

  .booking-section {
    padding: 72px 0;
  }

  .booking-contact-card {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .booking-visual-panel {
    min-height: 320px;
    border-radius: 12px 12px 0 0;
  }

  .process-story-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 36px;
  }

  .process-sticky-column {
    position: relative;
    top: auto;
    height: 300px;
    order: -1;
  }

  .process-phase-item {
    padding: 24px 0 36px;
    opacity: 1;
    transform: none;
  }

  .phase-title {
    font-size: 21px;
    margin-bottom: 22px;
  }
}

@media (max-width: 768px) {
  .hero-slider-section {
    min-height: 540px;
    height: auto;
    max-height: none;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(7, 9, 12, 0.35) 0%, rgba(11, 14, 20, 0.62) 50%, rgba(11, 14, 20, 0.78) 100%);
  }

  .hero-content {
    padding: 65px 0 95px;
  }

  .hero-title {
    font-size: 30px;
  }

  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .hero-slider-nav {
    right: 20px;
    bottom: 24px;
  }

  .hero-nav-btn {
    width: 38px;
    height: 38px;
  }

  .hero-slider-dots {
    left: 20px;
    bottom: 26px;
    gap: 12px;
  }

  .hero-dot .dot-bar {
    width: 16px;
  }

  .hero-dot.active .dot-bar {
    width: 32px;
  }

  .about-media {
    padding: 10px 0 20px 0;
    margin-bottom: 20px;
  }

  .about-badge-top {
    top: -10px;
    left: -6px;
    padding: 9px 16px;
  }

  .about-badge-top .badge-icon {
    width: 22px;
  }

  .about-badge-top .badge-title {
    font-size: 13px;
  }

  .about-badge-bottom {
    bottom: 12px;
    left: 8px;
    padding: 10px 16px;
    gap: 10px;
  }

  .about-badge-bottom .badge-number {
    font-size: 20px;
  }

  .about-badge-bottom .badge-label {
    font-size: 11px;
  }

  .about-img-sub {
    border-width: 4px;
    bottom: -16px;
  }

  .facilities-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stats-bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stat-item {
    min-height: 96px;
    padding: 20px;
    clip-path: none;
    border-radius: var(--radius-md);
  }

  .stat-item:first-child {
    padding-left: 20px;
    clip-path: none;
  }

  .spa-sub-grid {
    grid-template-columns: 1fr;
  }

  .spa-sub-item {
    height: 180px;
  }

  .booking-section {
    padding: 54px 0;
  }

  .booking-map-backdrop {
    height: 250px;
  }

  .booking-form-col {
    padding: 32px 22px;
  }

  .booking-title {
    font-size: 26px;
  }

  .booking-fields-grid {
    grid-template-columns: 1fr;
  }

  .booking-visual-panel {
    min-height: 250px;
  }

  .booking-support-card {
    left: 18px;
    bottom: 18px;
    width: min(238px, calc(100% - 36px));
  }

  .form-submit-btn {
    width: 100%;
  }

  .testimonials-slide-group {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .box-floating-header {
    top: -24px;
    left: 14px;
    right: 14px;
    padding: 10px 14px;
  }

  .testimonial-box {
    padding: 50px 18px 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .blog-list-item {
    grid-template-columns: 1fr;
  }

  .item-thumbnail {
    width: 100%;
    height: 180px;
  }
}

/* ==========================================================================
   16. CẦU NỐI VỚI CORE (storefront.css + menu động + trang blog)
   --------------------------------------------------------------------------
   theme.css nạp sau storefront.css. Khối này chỉ làm hai việc: trung hoà các
   wrapper mà layout của core bắt buộc phải giữ (`.client-header`,
   `.client-footer`, `.client-section`), và mặc cho markup menu do
   App\Services\MenuService sinh ra đúng bộ style điều hướng của theme. Không
   đụng tới style của admin bar / inline editor.
   ========================================================================== */

.client-header {
  position: static;
  border: 0;
  background: transparent;
  z-index: auto;
}

.client-footer {
  border-top: 0;
  background: var(--c-black);
  /* Nêu lại đúng khoảng đệm của theme: `.client-footer` trong storefront.css là
     shorthand `padding` nên nếu để `padding: 0` ở đây thì `padding-top: 70px`
     của `.site-footer` bị xoá và nội dung footer dính sát dải đăng ký. */
  padding: 70px 0 0;
  margin-top: 0;
}

.client-section {
  display: block;
}

/* --- Menu động: <nav class="client-nav …"><ul class="client-nav-list"> --- */

.client-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav .client-nav-list.client-nav-level-0 {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav .client-nav-item {
  position: relative;
}

.main-nav .client-nav-item > a,
.main-nav .client-nav-item > span {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-gray-800);
  padding: 8px 0;
}

.main-nav .client-nav-item > a:hover {
  color: var(--c-red-accent);
}

/* Cấp 2 dùng lại đúng hộp dropdown của theme.
   Hiện/ẩn bằng opacity + visibility để giữ hiệu ứng mờ dần của theme, và nêu
   `display` ngay tại đây thay vì dựa vào quy tắc hover của storefront.css. */
.main-nav .client-nav-list.client-nav-level-1 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--c-white);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  border: 1px solid var(--c-gray-200);
  z-index: 100;
}

.main-nav .client-nav-item:hover > .client-nav-list.client-nav-level-1,
.main-nav .client-nav-item:focus-within > .client-nav-list.client-nav-level-1 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .client-nav-level-1 .client-nav-item > a,
.main-nav .client-nav-level-1 .client-nav-item > span {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-gray-700);
}

.main-nav .client-nav-level-1 .client-nav-item > a:hover {
  background-color: var(--c-red-soft);
  color: var(--c-red-accent);
  padding-left: 24px;
}

.mobile-nav-links .client-nav-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-links .client-nav-item > a,
.mobile-nav-links .client-nav-item > span {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-gray-300);
}

.mobile-nav-links .client-nav-item > a:hover {
  color: var(--c-red-accent);
}

.mobile-nav-links .client-nav-list.client-nav-level-1 {
  padding-left: 14px;
  margin-top: 12px;
}

.footer-nav-list .client-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer-nav-list .client-nav-item > a,
.footer-nav-list .client-nav-item > span {
  color: var(--c-gray-400);
  transition: var(--transition);
}

.footer-nav-list .client-nav-item > a:hover {
  color: var(--c-red-accent);
  padding-left: 6px;
}

.footer-bottom-links .client-nav-list {
  display: flex;
  /* storefront.css xếp mọi menu trong footer theo cột; dòng cuối phải nằm ngang
     nên hướng được nêu lại ở đây thay vì dựa vào thứ tự nạp file. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.footer-bottom-links .client-nav-item > a,
.footer-bottom-links .client-nav-item > span {
  color: var(--c-gray-400);
}

.footer-bottom-links .client-nav-item > a:hover {
  color: var(--c-red-accent);
}

/* --- Trạng thái rỗng của khối tin tức --- */

.blog-empty {
  text-align: center;
  color: var(--c-gray-500);
  padding: 32px 0 8px;
}

/* --- Trang bài viết (client/blog/show) dùng chung khung của theme --- */

/* --- Trang chi tiết bài viết: nội dung | mục lục + bài mới --- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 64px;
}

.client-article {
  padding: 0;
  min-width: 0;
}

/* Cột phải bám theo khi cuộn: bài dài nên mục lục phải luôn trong tầm mắt. */
.article-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.article-toc,
.article-recent {
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.article-aside__title {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-gray-900);
}

.article-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.article-toc__item a {
  display: block;
  padding: 7px 10px 7px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--c-gray-600);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: var(--transition);
}

.article-toc__item a:hover {
  background: var(--c-gray-50);
  color: var(--c-red);
}

/* Tiêu đề cấp 3 thụt vào để thấy được thứ bậc của bài. */
.article-toc__item--sub a {
  padding-left: 26px;
  font-size: 13.5px;
  color: var(--c-gray-500);
}

.article-toc__item.is-active a {
  border-left-color: var(--c-red);
  background: var(--c-red-soft);
  color: var(--c-red);
  font-weight: 600;
}

.article-recent__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.article-recent__item a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
}

.article-recent__item img {
  flex: 0 0 68px;
  width: 68px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
}

.article-recent__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-gray-900);
  transition: var(--transition);
}

.article-recent__item a:hover .article-recent__title {
  color: var(--c-red);
}

.article-recent__item time {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--c-gray-500);
}

/* Neo tới tiêu đề: chừa chỗ cho thanh điều hướng dính trên đỉnh. */
.client-article__body h2[id],
.client-article__body h3[id] {
  scroll-margin-top: 110px;
}

@media (max-width: 992px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .article-aside {
    position: static;
    max-height: none;
  }
}


.client-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-gray-500);
  font-size: 14px;
  margin-bottom: 12px;
}

.client-article__title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  color: var(--c-gray-900);
  margin-bottom: 20px;
}

.client-article__media {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  object-fit: cover;
}

.client-article__summary {
  font-size: 17px;
  color: var(--c-gray-700);
  font-weight: 500;
  margin-bottom: 20px;
}

.client-article__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-gray-700);
}

.client-article__body h2,
.client-article__body h3 {
  font-family: var(--font-title);
  color: var(--c-gray-900);
  margin: 28px 0 12px;
}

.client-article__body img {
  border-radius: var(--radius-md);
  margin: 16px 0;
}

/* Bài viết nhập từ file của khách là HTML thuần (p, ul, strong, a). Theme có
   reset danh sách cho menu nên nếu không khai báo lại ở đây, mọi gạch đầu dòng
   trong bài biến thành dòng chữ trơn và các đoạn dính liền nhau. */
.client-article__body h2 {
  font-size: 24px;
}

.client-article__body h3 {
  font-size: 19px;
}

.client-article__body p {
  margin: 0 0 16px;
}

.client-article__body ul,
.client-article__body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.client-article__body ul {
  list-style: disc;
}

.client-article__body ol {
  list-style: decimal;
}

.client-article__body li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.client-article__body li::marker {
  color: var(--c-red);
}

.client-article__body strong {
  color: var(--c-gray-900);
  font-weight: 700;
}

.client-article__body a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.client-article__body a:hover {
  color: var(--c-red-dark);
}

.client-article__body blockquote {
  margin: 0 0 18px;
  padding: 12px 18px;
  border-left: 3px solid var(--c-red);
  background: var(--c-gray-50);
  border-radius: 0 8px 8px 0;
}

/* --------------------------------------------------------------------------
   Ảnh nền của thiết kế nằm ở `position: absolute`. Công cụ sửa trực tiếp đặt
   `[data-block-key] { position: relative !important }` cho MỌI vùng, nên mọi
   ảnh trang trí phải được trả lại đúng vị trí: thiếu dòng này, khi admin đăng
   nhập ảnh rơi vào luồng, chiếm chỗ thật và đẩy cả khối xuống — ảnh nền khối
   chuyên môn cao 100% rộng 50% nên để lại một mảng đen trống hơn 300px.

   Danh sách này phải khớp với mọi `x-client::editable-image` có class
   position:absolute. Thêm ảnh trang trí mới thì thêm vào đây, nếu không nó chỉ
   hỏng khi đăng nhập — tức khách không thấy, mà người sửa thì thấy mỗi lần.

   `body.client-edit-active` ở đầu mỗi selector KHÔNG phải để cho gọn: quy tắc
   của editor là `body.client-edit-active [data-block-key]`, độ ưu tiên (0,2,1).
   Viết `img.ten-lop[data-block-key]` cũng ra đúng (0,2,1) — hoà, mà hoà thì
   dòng đứng sau thắng, và CSS của editor nạp sau theme. Nghĩa là một selector
   trông rất hợp lý vẫn thua lặng lẽ. Thêm `body.client-edit-active` đưa lên
   (0,3,2) nên thắng chắc chắn, không phụ thuộc thứ tự nạp.

   Chỉ chạm tới vị trí — viền nhận biết vùng sửa vẫn hiện nguyên.
   -------------------------------------------------------------------------- */

body.client-edit-active img.hero-bg-img[data-block-key],
body.client-edit-active img.about-img-sub[data-block-key],
body.client-edit-active img.booking-workshop-img[data-block-key],
body.client-edit-active img.spa-bg-mask[data-block-key],
body.client-edit-active img.laurel-bg[data-block-key],
body.client-edit-active img.page-hero-laurel[data-block-key],
body.client-edit-active img.about-story__img-sub[data-block-key],
body.client-edit-active img.footer-pattern[data-block-key] {
  position: absolute !important;
}

/* ==========================================================================
   17. CÁC TRANG TRONG (danh mục, sản phẩm, cơ sở, liên hệ, trang CMS)
   --------------------------------------------------------------------------
   Dùng lại token màu/kiểu chữ của theme để trang con không lệch thiết kế trang
   chủ. Không có selector nào chạm tới admin bar hay inline editor.
   ========================================================================== */

/* --- Dải tiêu đề + breadcrumb --- */

.page-hero {
  position: relative;
  background: var(--c-black);
  padding: 56px 0 48px;
  overflow: hidden;
}

.page-hero-laurel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  opacity: .12;
  pointer-events: none;
}

.page-hero-title {
  position: relative;
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--c-white);
  margin: 10px 0 0;
}

.page-hero-lead {
  position: relative;
  max-width: 680px;
  margin-top: 12px;
  color: var(--c-gray-300);
  font-size: 15px;
  line-height: 1.7;
}

.breadcrumb-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-gray-400);
}

.page-hero .breadcrumb-bar a {
  color: var(--c-gray-300);
}

.breadcrumb-bar a:hover {
  color: var(--c-red-accent);
}

.breadcrumb-sep {
  opacity: .6;
}

/* Breadcrumb đứng riêng (trang chi tiết) nằm trên nền sáng. */
.breadcrumb-wrap {
  padding: 18px 0 0;
  background: var(--c-gray-50);
}

.breadcrumb-wrap .breadcrumb-bar {
  color: var(--c-gray-500);
}

.breadcrumb-wrap .breadcrumb-bar a {
  color: var(--c-gray-600);
}

/* --- Danh sách sản phẩm / bài viết --- */

.catalog-section,
.branches-section,
.contact-info-section,
.cms-page-section {
  padding: 56px 0 72px;
  background: var(--c-gray-50);
}

.catalog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.catalog-empty {
  text-align: center;
  color: var(--c-gray-500);
  padding: 48px 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  /* Không viền: `.client-card` của core có sẵn 1px nên phải ghi đè tường minh. */
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
  transition: var(--transition);
}

/* Hover chỉ nhấc thẻ, giữ nguyên đổ bóng — cùng quy ước với thẻ dịch vụ. */
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.post-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-gray-100);
}

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

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
  flex: 1;
}

.post-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-gray-900);
  line-height: 1.45;
  /* Tối đa 2 dòng, dài hơn thì cắt bằng dấu ba chấm. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.post-card__desc {
  font-size: 14px;
  color: var(--c-gray-500);
  line-height: 1.6;
}

.post-card__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-red-accent);
  text-transform: uppercase;
}

.post-card__more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-red-accent);
}

/* --- Phân trang ---------------------------------------------------------
   Laravel dựng phân trang theo markup Bootstrap 5 (Paginator::useBootstrapFive
   trong AppServiceProvider) vì khu admin dùng Bootstrap. Storefront thì không
   nạp Bootstrap, nên nếu không có khối này: các lớp d-none/d-sm-flex vô tác
   dụng -> hiện cùng lúc cả bản mobile ("« Trước / Sau »") lẫn bản desktop, còn
   <ul> thì rơi về danh sách dọc có dấu chấm. Vì vậy phải dựng lại đúng phần
   Bootstrap mà theme đang thiếu, và chỉ trong phạm vi .client-pagination.
   ------------------------------------------------------------------------ */

.client-pagination {
  margin-top: 36px;
}

.client-pagination nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Bản rút gọn chỉ dành cho màn hình hẹp. */
.client-pagination .d-sm-none {
  display: none;
}

.client-pagination .d-none {
  display: block;
}

.client-pagination .d-sm-flex {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.client-pagination p {
  margin: 0;
  font-size: 14px;
  color: var(--c-gray-500);
}

.client-pagination .fw-semibold {
  font-weight: 700;
  color: var(--c-gray-900);
}

.client-pagination .text-nowrap {
  white-space: nowrap;
}

.client-pagination .pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.client-pagination .page-item {
  margin: 0;
}

.client-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-gray-700);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

a.page-link:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}

.client-pagination .page-item.active .page-link {
  border-color: var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
}

.client-pagination .page-item.disabled .page-link {
  background: var(--c-gray-50);
  color: var(--c-gray-400);
  cursor: default;
}

@media (max-width: 576px) {
  /* Dưới ngưỡng sm của Bootstrap: đổi vai trò hai khối cho đúng ý markup. */
  .client-pagination .d-sm-none {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .client-pagination .d-none {
    display: none;
  }
}

/* --- Chi tiết sản phẩm/dịch vụ --- */

.product-detail {
  padding: 0 0 72px;
  background: var(--c-gray-50);
}

.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 32px 0 8px;
}

.product-detail__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.product-detail__title {
  font-family: var(--font-title);
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--c-gray-900);
  margin: 12px 0 14px;
}

.product-detail__summary {
  color: var(--c-gray-600);
  line-height: 1.75;
  margin-bottom: 18px;
}

.product-detail__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--c-gray-200);
  border-bottom: 1px solid var(--c-gray-200);
}

.product-detail__price {
  font-size: 28px;
  font-weight: 800;
  color: var(--c-red);
}

.product-detail__compare {
  color: var(--c-gray-400);
  text-decoration: line-through;
}

.product-detail__stock {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #0ca30c;
  background: rgba(12, 163, 12, .08);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.product-detail__stock.is-out {
  color: var(--c-red);
  background: var(--c-red-soft);
}

.product-detail__meta {
  list-style: none;
  padding: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 14px;
}

.product-detail__meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-detail__meta span {
  color: var(--c-gray-500);
  font-size: 12px;
  text-transform: uppercase;
}

.product-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
}

.product-detail__body,
.product-detail__related {
  margin-top: 48px;
}

.product-detail__section-title {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--c-gray-900);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-red-accent);
  display: inline-block;
}

.product-detail__body {
  color: var(--c-gray-700);
  line-height: 1.8;
}

/* --- Video Facebook dưới hero --- */

.videos-section {
  padding: 72px 0 24px;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.video-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
  transition: var(--transition);
}

.video-card:hover {
  transform: translateY(-4px);
}

/* Plugin video của Facebook tự co theo chiều ngang khung chứa; khung giữ tỉ lệ
   16:9 để ba cột luôn cao bằng nhau dù video dọc hay ngang. */
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-black);
}

.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Reel quay dọc: khung theo tỉ lệ 9:16, không thì video thành một dải bé xíu
   nằm giữa hai mảng đen. */
.video-card--portrait .video-card__frame {
  aspect-ratio: 9 / 16;
}

.video-card__warning {
  margin: 0 24px 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.6;
}

.video-card__warning code {
  font-size: 12px;
  word-break: break-all;
}

.video-card__empty {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.6;
}

.video-card__caption {
  margin: 18px 24px 20px;
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--c-gray-900);
}

/* Đường dẫn chỉ là ô nhập của admin, không phải nội dung cho khách đọc. */
.video-card__source {
  display: none;
}

body.client-edit-active .video-card__source {
  display: block;
  margin: 0 24px 20px;
  padding: 8px 10px;
  border: 1px dashed var(--c-gray-300);
  border-radius: 6px;
  background: var(--c-gray-50);
  color: var(--c-gray-600);
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-all;
}

.videos-add {
  margin: 20px auto 0;
}

@media (max-width: 992px) {
  .videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .videos-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Hệ thống cơ sở --- */

.branch-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Thư viện ảnh bên trái, thông tin cơ sở bên phải. Hai cột cao bằng nhau nên
   thư viện lấy chiều cao từ thẻ thông tin thay vì tự đặt một con số cứng. */
.branch-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  min-height: 420px;
}

.branch-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.branch-card__media {
  height: 190px;
  flex: 0 0 190px;
  background: var(--c-gray-100);
}

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

/* Ảnh tràn hết bề ngang thẻ, phần còn lại thụt vào theo lề của thẻ. */
.branch-card > :not(.branch-card__media) {
  margin-left: 24px;
  margin-right: 24px;
}

.branch-card__name {
  margin-top: 20px;
}

.branch-card__actions {
  margin-top: auto;
  margin-bottom: 24px;
}

.branch-card:hover {
  transform: translateY(-4px);
}

.branch-card__name {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--c-gray-900);
  margin-bottom: 14px;
}

.branch-card__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--c-gray-600);
}

.branch-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.branch-card__list img {
  width: 16px;
  margin-top: 3px;
}

.branch-card__actions {
  display: grid;
  /* Hai nút chia đều một hàng; thẻ cơ sở hẹp nên nút thu gọn chữ thay vì xuống dòng. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.branch-card__actions .btn {
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  white-space: nowrap;
}

/* --- Thư viện ảnh của từng cơ sở --- */

.branch-gallery {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-gray-100);
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

/* Khung nhìn phủ kín ô lưới: chiều cao do hàng quyết định, nên ảnh của hai cơ
   sở cạnh nhau luôn bằng nhau dù nội dung thẻ dài ngắn khác nhau. */
.branch-gallery__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.branch-gallery__track {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.branch-gallery__slide {
  flex: 0 0 100%;
  height: 100%;
}

.branch-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.branch-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--c-gray-900);
  cursor: pointer;
  transition: var(--transition);
  z-index: 2;
}

.branch-gallery__nav:hover {
  background: var(--c-red);
  color: var(--c-white);
}

.branch-gallery__nav--prev { left: 12px; }
.branch-gallery__nav--next { right: 12px; }

.branch-gallery__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}

.branch-gallery__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: var(--transition);
}

.branch-gallery__dot.is-active {
  width: 20px;
  border-radius: 4px;
  background: var(--c-red);
}

/* Trong chế độ sửa, ảnh chỉ còn một nút duy nhất: mở bảng công cụ. Nút "+" và
   nút thùng rác mặc định của vùng lặp bị ẩn ở đây vì dán chúng lên ảnh đang
   trượt thì vừa khó bấm vừa che mất ảnh. */
.branch-gallery__manage {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 20, 24, .86);
  color: var(--c-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.branch-gallery__manage:hover {
  background: var(--c-red);
}

body.client-edit-active .branch-gallery__manage {
  display: inline-flex;
}

body.client-edit-active .branch-gallery .client-list-add,
body.client-edit-active .branch-gallery .client-list-remove {
  display: none !important;
}

/* --- Bảng công cụ thư viện ảnh --- */

.gallery-editor {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  z-index: 2147483644;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  box-shadow: -8px 0 28px rgba(12, 18, 24, .18);
  font-size: 14px;
}

.gallery-editor[hidden] { display: none; }

.gallery-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--c-gray-200, #e6e8eb);
}

.gallery-editor__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--c-red);
}

.gallery-editor__title {
  margin: 4px 0 0;
  font-family: var(--font-title);
  font-size: 18px;
  line-height: 1.3;
  color: var(--c-gray-900);
}

.gallery-editor__close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-gray-100);
  color: var(--c-gray-900);
  cursor: pointer;
}

.gallery-editor__close:hover {
  background: var(--c-red);
  color: var(--c-white);
}

.gallery-editor__hint {
  margin: 0;
  padding: 12px 20px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.6;
}

.gallery-editor__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-editor__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--c-gray-200, #e6e8eb);
  border-radius: 10px;
  background: var(--c-white);
}

.gallery-editor__row.is-current {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(217, 4, 41, .12);
}

.gallery-editor__thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--c-gray-100);
  cursor: pointer;
}

.gallery-editor__row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.gallery-editor__row-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-gray-600);
}

.gallery-editor__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gallery-editor__action {
  padding: 5px 10px;
  border: 1px solid var(--c-gray-200, #e6e8eb);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-gray-900);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.gallery-editor__action:hover:not(:disabled) {
  border-color: var(--c-red);
  color: var(--c-red);
}

.gallery-editor__action:disabled {
  opacity: .4;
  cursor: default;
}

.gallery-editor__action--danger:hover:not(:disabled) {
  border-color: #dc2626;
  color: #dc2626;
}

.gallery-editor__foot {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--c-gray-200, #e6e8eb);
}

.gallery-editor__add {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--c-red);
  color: var(--c-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.gallery-editor__add:hover:not(:disabled) { filter: brightness(1.08); }
.gallery-editor__add:disabled { opacity: .55; cursor: default; }

.gallery-editor__status {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 12.5px;
  color: var(--c-gray-600);
}

.gallery-editor__status.is-error { color: #dc2626; }

/* --- Xem ảnh lớn --- */

.branch-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(8, 12, 16, .92);
}

.branch-lightbox[hidden] { display: none; }

.branch-lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  text-align: center;
}

.branch-lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.branch-lightbox__counter {
  margin-top: 12px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.branch-lightbox__nav,
.branch-lightbox__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--c-white);
  cursor: pointer;
  transition: var(--transition);
}

.branch-lightbox__nav:hover,
.branch-lightbox__close:hover {
  background: var(--c-red);
}

.branch-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
}

@media (max-width: 860px) {
  .branch-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Hết lưới hai cột thì thư viện không còn chiều cao mượn từ thẻ bên cạnh,
     nên tự dựng khung theo tỉ lệ ảnh. */
  .branch-gallery {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 520px) {
  .branch-lightbox {
    padding: 12px;
    gap: 4px;
  }

  .branch-lightbox__nav,
  .branch-lightbox__close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* --- Liên hệ --- */

.contact-info-section {
  padding-bottom: 32px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  padding: 22px;
  font-size: 15px;
  color: var(--c-gray-700);
}

.contact-info-card img {
  width: 22px;
  margin-bottom: 6px;
}

.contact-info-card__label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--c-gray-500);
  font-weight: 600;
}

/* --- Trang nội dung CMS --- */

.cms-page {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  color: var(--c-gray-700);
  line-height: 1.85;
}

.cms-page h2,
.cms-page h3 {
  font-family: var(--font-title);
  color: var(--c-gray-900);
  margin: 26px 0 12px;
}

.cms-page h2:first-child,
.cms-page h3:first-child {
  margin-top: 0;
}

.cms-page p {
  margin-bottom: 14px;
}

.cms-page ul,
.cms-page ol {
  margin: 0 0 16px 20px;
}

.cms-page li {
  margin-bottom: 8px;
}

.cms-page img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 16px 0;
}

.cms-page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.cms-page th,
.cms-page td {
  border: 1px solid var(--c-gray-200);
  padding: 10px 12px;
  text-align: left;
}

.cms-page th {
  background: var(--c-gray-50);
}

@media (max-width: 860px) {
  .product-detail__grid {
    grid-template-columns: 1fr;
  }

  .cms-page {
    padding: 24px;
  }
}

/* Icon liên hệ của theme là SVG trắng (thiết kế cho footer nền đen). Trên thẻ
   nền sáng phải đảo màu, nếu không chúng vô hình. */
.branch-card__list img,
.contact-info-card img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(84%) saturate(6000%) hue-rotate(345deg) brightness(92%);
}

/* ==========================================================================
   18. TRANG DỊCH VỤ (lưới thẻ trên dải ảnh parallax) & CHI TIẾT DỊCH VỤ
   --------------------------------------------------------------------------
   Bố cục lấy theo bản mockup được duyệt, màu đổ về hệ trắng - đỏ - đen - xám
   của website thay vì navy của mockup.
   ========================================================================== */

.services-showcase {
  position: relative;
  padding: 0 0 72px;
  background: var(--c-gray-50);
  overflow: hidden;
}

/* Dải ảnh nền chỉ chiếm phần trên: hàng thẻ đầu tiên cố ý đè lên nửa dưới.
 *
 * Ảnh đứng yên khi cuộn (section trượt qua trước ảnh). Cách làm: ảnh
 * `position: fixed` theo viewport, còn dải này cắt nó bằng `clip`.
 * Dùng `clip` cũ chứ không dùng `clip-path`: `clip-path` tạo containing block
 * mới nên con `position: fixed` sẽ bám vào dải thay vì bám viewport, tức mất
 * hẳn hiệu ứng. `background-attachment: fixed` cũng không dùng được vì iOS bỏ
 * qua thuộc tính đó. */
.services-showcase__backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  clip: rect(0, auto, auto, 0);
  background: var(--c-black);
}

.services-showcase__backdrop img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  opacity: .45;
}

/* Người tắt hiệu ứng chuyển động: ảnh cuộn cùng trang như ảnh thường. */
@media (prefers-reduced-motion: reduce) {
  .services-showcase__backdrop {
    clip: auto;
    overflow: hidden;
  }

  .services-showcase__backdrop img {
    position: absolute;
    height: 100%;
  }
}

.services-showcase__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 16, .82) 0%, rgba(11, 13, 16, .68) 55%, rgba(11, 13, 16, .55) 100%);
}

.services-showcase__inner {
  position: relative;
  z-index: 2;
  padding-top: 64px;
}

.services-showcase:first-of-type .services-showcase__inner {
  padding-top: 48px;
}

.services-showcase__head {
  margin-bottom: 40px;
}

.services-showcase__head .breadcrumb-bar {
  margin-bottom: 16px;
  color: var(--c-gray-400);
}

.services-showcase__head .breadcrumb-bar a {
  color: var(--c-gray-300);
}

.services-showcase__title {
  font-family: var(--font-title);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  color: var(--c-white);
  margin: 0;
}

.services-showcase__title strong {
  font-weight: 700;
}

.services-showcase__rule {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  background: var(--c-red-accent);
  border-radius: 2px;
}

.services-showcase__lead {
  max-width: 640px;
  margin-top: 14px;
  color: var(--c-gray-300);
  font-size: 15px;
  line-height: 1.7;
}

.services-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: 28px;
}

.services-showcase__footer {
  margin-top: 36px;
}

/* --- Thẻ dịch vụ --- */

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  /* .client-card của core có viền 1px; thẻ dịch vụ đi theo mockup nên bỏ viền
     và chỉ dùng một lớp đổ bóng nhẹ ở trạng thái thường. */
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
  transition: var(--transition);
}

/* Hover chỉ nhấc thẻ lên. Phải khai lại box-shadow vì `.client-card:hover` của
   storefront.css đổ bóng đậm hơn, cùng độ ưu tiên nên không tự bị ghi đè. */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

/* Chiều cao cố định thay vì aspect-ratio: ảnh của khách có tỉ lệ khác nhau,
   để tự do thì mỗi thẻ trong cùng một hàng cao một kiểu. */
.service-card__media {
  position: relative;
  height: 210px;
  background: var(--c-gray-100);
}

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

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 26px;
  flex: 1;
}

.service-card__title {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 600;
  color: var(--c-gray-900);
  transition: var(--transition);
}

.service-card:hover .service-card__title,
.service-card:hover .service-card__more {
  color: var(--c-red-accent);
}

.service-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-gray-500);
}

.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gray-600);
  transition: var(--transition);
}

/* Giá thay chỗ "Xem chi tiết": giữ nguyên màu của .service-card__more (kể cả
   màu khi di chuột), chỉ to và đậm hơn để đọc được ra là giá. */
.service-card__more--price {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* --- Chi tiết dịch vụ --- */

.service-detail {
  padding: 56px 0 80px;
  background: var(--c-gray-50);
}

.service-detail__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.service-detail__sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-sidebar-nav {
  background: var(--c-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.service-sidebar-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-gray-700);
  transition: var(--transition);
}

.service-sidebar-nav__item svg {
  opacity: 0;
  transform: translateX(-4px);
  transition: var(--transition);
}

.service-sidebar-nav__item:hover,
.service-sidebar-nav__item.is-active {
  background: var(--c-red);
  color: var(--c-white);
}

.service-sidebar-nav__item:hover svg,
.service-sidebar-nav__item.is-active svg {
  opacity: 1;
  transform: translateX(0);
}

.service-quote-box {
  background: var(--c-black);
  border-radius: var(--radius-md);
  padding: 24px;
  color: var(--c-gray-300);
}

.service-quote-box__title {
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--c-white);
  margin-bottom: 10px;
}

.service-quote-box__text {
  font-size: 14px;
  line-height: 1.7;
}

.service-quote-box__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.service-quote-box__actions .btn {
  justify-content: center;
}

.service-quote-box__actions .btn-outline {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .35);
}

.service-quote-box__actions .btn-outline:hover {
  background: var(--c-white);
  color: var(--c-black);
}

.service-hours {
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.service-hours__title {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--c-gray-900);
  margin-bottom: 12px;
}

.service-hours__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.service-hours__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--c-gray-200);
  color: var(--c-gray-600);
}

.service-hours__list li:last-child {
  border-bottom: 0;
}

.service-hours__list strong {
  color: var(--c-gray-900);
}

.service-detail__content {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.service-detail__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-red-accent);
}

.service-detail__title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--c-gray-900);
  margin: 8px 0 0;
}

.service-detail__rule {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  background: var(--c-red-accent);
  border-radius: 2px;
}

.service-detail__summary {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-gray-600);
}

.service-detail__figure {
  margin: 24px 0;
}

.service-detail__figure img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.service-detail__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 20px 24px;
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
}

.service-detail__fact span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-gray-500);
  margin-bottom: 4px;
}

.service-detail__fact strong {
  font-size: 17px;
  color: var(--c-red);
}

.service-detail__fact strong.is-out {
  color: var(--c-gray-500);
}

/* Khối mô tả + checklist nằm giữa hộp "Chi phí / Mã dịch vụ / Tình trạng" và
   hộp "Đặt lịch". Trước đây nó không có nền lẫn padding nên chữ dính sát mép
   trong khi trên dưới đều là hộp thụt vào — nhìn như bị lọt ra ngoài bố cục.
   Dùng lại đúng nền, bo góc và padding của hai hộp kia. */
.service-detail__body {
  margin-top: 26px;
  padding: 24px;
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
  color: var(--c-gray-700);
  line-height: 1.85;
}

/* Tiêu đề/đoạn đầu và cuối không cần margin thừa bên trong hộp. */
.service-detail__body > :first-child {
  margin-top: 0;
}

.service-detail__body > :last-child {
  margin-bottom: 0;
}

.service-detail__body h2,
.service-detail__body h3 {
  font-family: var(--font-title);
  color: var(--c-gray-900);
  margin: 24px 0 12px;
}

.service-detail__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 24px;
}

/* Gạch đầu dòng của mô tả hiển thị thành checklist như bản mockup. */
.service-detail__body ul li {
  position: relative;
  padding-left: 28px;
}

.service-detail__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--c-red-accent);
  border-bottom: 2px solid var(--c-red-accent);
  transform: rotate(-45deg);
}

.service-detail__section-title {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-gray-900);
  margin: 36px 0 18px;
}

.service-detail__section-title strong {
  font-weight: 700;
}

.service-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.service-price-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  text-align: center;
}

.service-price-card.is-dark {
  background: var(--c-black);
  color: var(--c-gray-300);
}

.service-price-card__name {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--c-gray-900);
}

.service-price-card.is-dark .service-price-card__name {
  color: var(--c-white);
}

.service-price-card__price {
  font-size: 30px;
  font-weight: 800;
  color: var(--c-red);
}

.service-price-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--c-gray-600);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-price-card.is-dark .service-price-card__list {
  color: var(--c-gray-300);
}

.service-price-card .btn {
  align-self: center;
  margin-top: auto;
}

.service-detail__related {
  margin-top: 40px;
}

@media (max-width: 960px) {
  .service-detail__layout {
    grid-template-columns: 1fr;
  }

  .service-detail__sidebar {
    position: static;
  }

  .service-detail__content {
    padding: 24px;
  }

  .services-showcase__backdrop {
    height: 340px;
  }
}

/* --- Form đặt lịch riêng của từng dịch vụ --- */

.service-booking {
  margin-top: 36px;
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
  padding: 28px;
}

.service-booking .service-detail__section-title {
  margin-top: 0;
}

.service-booking__lead {
  color: var(--c-gray-600);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-booking__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.service-booking__form .form-group {
  margin-bottom: 16px;
}

.service-booking__form .form-input,
.service-booking__form .form-textarea {
  background: var(--c-white);
}

.service-booking__form .form-textarea {
  min-height: 96px;
}

.service-booking__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.service-booking__tag {
  font-size: 14px;
  color: var(--c-gray-600);
}

.service-booking__tag strong {
  color: var(--c-gray-900);
}

/* --- Trang tin tức: 2 cột, sidebar chuyên mục bên phải --- */

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

/* Khoảng cách giữa các thẻ bài viết theo yêu cầu thiết kế. */
.post-grid {
  gap: 10px;
}

/* Mô tả tối đa 3 dòng, phần thừa cắt bằng ellipsis. */
.post-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.blog-side {
  position: sticky;
  top: 5px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-side__card {
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.blog-side__title {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-gray-900);
  margin-bottom: 14px;
}

.blog-side__nav {
  display: flex;
  flex-direction: column;
}

.blog-side__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-gray-700);
  border-bottom: 1px dashed var(--c-gray-200);
  transition: var(--transition);
}

.blog-side__item:last-child {
  border-bottom: 0;
}

.blog-side__item:hover,
.blog-side__item.is-active {
  color: var(--c-red-accent);
  padding-left: 6px;
}

.blog-side__item em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-gray-500);
  background: var(--c-gray-100);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

.blog-side__item.is-active em {
  background: var(--c-red-soft);
  color: var(--c-red);
}

.blog-side__cta {
  background: var(--c-black);
  color: var(--c-gray-300);
}

.blog-side__cta .blog-side__title {
  color: var(--c-white);
}

.blog-side__cta p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.blog-side__cta .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

.blog-side__cta .btn-outline {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .35);
  margin-bottom: 0;
}

.blog-side__cta .btn-outline:hover {
  background: var(--c-white);
  color: var(--c-black);
}

@media (max-width: 960px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-side {
    position: static;
  }
}

/* ==========================================================================
   19. TRANG GIỚI THIỆU
   ========================================================================== */

.about-section-title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: var(--c-gray-900);
  line-height: 1.3;
  margin: 10px 0 18px;
}

.about-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 42px;
}

/* --- Câu chuyện --- */

.about-story {
  padding: 72px 0;
  background: var(--c-white);
}

.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.about-story__media {
  position: relative;
  padding: 0 0 56px 0;
}

.about-story__img-main {
  width: 88%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .08);
}

.about-story__img-sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  border-radius: var(--radius-lg);
  border: 6px solid var(--c-white);
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(16, 33, 41, .14);
}

.about-story__badge {
  position: absolute;
  top: 24px;
  right: 6%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--c-red);
  color: var(--c-white);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-red);
}

.about-story__badge strong {
  font-family: var(--font-title);
  font-size: 26px;
  line-height: 1;
}

.about-story__badge span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .9;
}

.about-story__content p {
  color: var(--c-gray-600);
  line-height: 1.85;
  margin-bottom: 14px;
}

.about-story__signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--c-red-accent);
}

.about-story__signature strong {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--c-gray-900);
}

.about-story__signature span {
  font-size: 13px;
  color: var(--c-gray-500);
}

/* --- Số liệu --- */

.about-stats {
  padding: 0 0 72px;
  background: var(--c-white);
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  background: var(--c-black);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: 0 12px;
}

.about-stat__number {
  font-family: var(--font-title);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--c-red-accent);
  line-height: 1;
}

.about-stat__label {
  font-size: 13px;
  color: var(--c-gray-400);
  line-height: 1.5;
}

/* --- Lý do chọn --- */

.about-reasons {
  padding: 72px 0;
  background: var(--c-gray-50);
}

.about-reasons__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.about-reason {
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
  transition: var(--transition);
}

.about-reason:hover {
  transform: translateY(-6px);
}

.about-reason__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--c-red-soft);
  margin-bottom: 16px;
}

.about-reason__icon img {
  width: 28px;
  height: 28px;
  /* Icon của theme là SVG trắng; trên nền hồng nhạt phải nhuộm đỏ mới thấy. */
  filter: brightness(0) saturate(100%) invert(16%) sepia(84%) saturate(6000%) hue-rotate(345deg) brightness(92%);
}

.about-reason h3 {
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--c-gray-900);
  margin-bottom: 10px;
}

.about-reason p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-gray-600);
}

/* --- Năng lực kỹ thuật (split + điểm nhấn trên ảnh) --- */

.about-capability {
  background: var(--c-black);
}

.about-capability__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.about-capability__content {
  display: flex;
  /* justify-content: flex-end; */
  padding: 72px 40px 72px 40px;
}

/* Cột chữ canh theo mép container chung để không lệch với các section khác. */
.about-capability__inner {
  width: 100%;
  max-width: calc(var(--container-max) / 2 - 20px);
}

.about-capability .sub-tag {
  color: var(--c-red-accent);
}

.about-capability .about-section-title {
  color: var(--c-white);
}

.about-capability__content > .about-capability__inner > p {
  color: var(--c-gray-400);
  line-height: 1.8;
  margin-bottom: 22px;
}

.about-capability__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.about-capability__item {
  position: relative;
  padding-left: 30px;
  color: var(--c-gray-300);
  font-size: 15px;
  line-height: 1.6;
}

.about-capability__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--c-red-accent);
  border-bottom: 2px solid var(--c-red-accent);
  transform: rotate(-45deg);
}

.about-capability__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.about-capability__actions .btn-outline {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .35);
}

.about-capability__actions .btn-outline:hover {
  background: var(--c-white);
  color: var(--c-black);
}

/* Bảng ảnh + điểm nhấn */

.about-capability__stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

.about-capability__stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hotspot {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -50%);
}

.about-hotspot__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-red);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  animation: aboutHotspotPulse 2.4s infinite ease-in-out;
}

.about-hotspot__btn:hover {
  transform: scale(1.15);
}

.about-hotspot.is-active .about-hotspot__btn {
  background: var(--c-red);
  color: var(--c-white);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(217, 4, 41, .38), 0 8px 24px rgba(0, 0, 0, .35);
  animation: none;
}

@keyframes aboutHotspotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* Người tắt hiệu ứng chuyển động: bỏ nhịp đập, thẻ vẫn đổi vị trí tức thì. */
@media (prefers-reduced-motion: reduce) {
  .about-hotspot__btn {
    animation: none;
  }

  .about-stat-card {
    transition: none;
  }
}

.about-stat-card {
  position: absolute;
  z-index: 12;
  min-width: 165px;
  max-width: calc(100% - 24px);
  padding: 18px 22px 16px;
  border-radius: 6px;
  background: var(--c-white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  text-align: center;
  pointer-events: none;
  transition: top .35s cubic-bezier(.2, .8, .25, 1), left .35s cubic-bezier(.2, .8, .25, 1),
    transform .25s ease, opacity .25s ease;
}

.about-stat-card.is-switching {
  transform: scale(.92);
  opacity: .6;
}

.about-stat-card__number {
  display: block;
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 800;
  line-height: .95;
  color: var(--c-red);
  margin-bottom: 6px;
}

.about-stat-card__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-gray-900);
}

.about-stat-card__tail {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--c-white);
}

.about-stat-card.is-below .about-stat-card__tail {
  top: -10px;
  bottom: auto;
  border-top: 0;
  border-bottom: 10px solid var(--c-white);
}

@media (max-width: 960px) {
  .about-capability__grid {
    grid-template-columns: 1fr;
  }

  .about-capability__content {
    justify-content: flex-start;
    padding: 56px 20px;
  }

  .about-capability__inner {
    max-width: none;
  }

  .about-capability__stage {
    min-height: 420px;
  }
}

/* --- Đội ngũ --- */

.about-team {
  padding: 72px 0;
  background: var(--c-white);
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.about-member {
  text-align: center;
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  transition: var(--transition);
}

.about-member:hover {
  transform: translateY(-6px);
  background: var(--c-white);
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
}

.about-member__photo {
  width: 108px;
  height: 108px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--c-white);
  box-shadow: 0 6px 18px rgba(16, 33, 41, .12);
}

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

.about-member h3 {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--c-gray-900);
  margin-bottom: 4px;
}

.about-member span {
  font-size: 13px;
  color: var(--c-gray-500);
  line-height: 1.5;
}

/* --- CTA --- */

.about-cta {
  padding: 0 0 72px;
  background: var(--c-white);
}

.about-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--c-gray-50);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
}

.about-cta__inner h2 {
  font-family: var(--font-title);
  font-size: 26px;
  color: var(--c-gray-900);
  margin-bottom: 8px;
}

.about-cta__inner p {
  color: var(--c-gray-600);
  font-size: 15px;
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 960px) {
  .about-story__grid,
  .about-capability__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-story__media {
    padding-bottom: 48px;
  }

  .about-cta__inner {
    padding: 28px 24px;
  }
}

/* --- Nguyên tắc hoạt động (tab Sứ mệnh / Tầm nhìn / Giá trị cốt lõi) --- */

.about-principles {
  position: relative;
  padding: 72px 0 0;
  background: var(--c-white);
  overflow: hidden;
}

.about-principles__grid {
  display: grid;
  grid-template-columns: minmax(260px, .40fr) minmax(0, .60fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}

.about-principles__figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.about-principles__figure img {
  width: 100%;
  max-width: 420px;
  max-height: 560px;
  object-fit: contain;
  object-position: bottom center;
}

.about-principles__content {
  display: flex;
  flex-direction: column;
  padding-bottom: 72px;
}

.about-principles__head {
  margin-bottom: 26px;
}

.about-principles__title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-gray-900);
  margin-top: 10px;
  max-width: 34ch;
}

.about-principles__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.about-principles__tab {
  padding: 13px 26px;
  border: 0;
  border-radius: 4px;
  background: var(--c-gray-100);
  color: var(--c-gray-800);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.about-principles__tab:hover {
  background: var(--c-gray-200);
}

.about-principles__tab.is-active {
  background: var(--c-red);
  color: var(--c-white);
  border-top-left-radius: 12px;
  border-bottom-right-radius: 16px;
  box-shadow: var(--shadow-red);
}

.about-principles__panel {
  display: none;
}

.about-principles__panel.is-active {
  display: block;
  animation: aboutPrincipleFade .35s ease forwards;
}

@keyframes aboutPrincipleFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Người tắt hiệu ứng chuyển động: đổi tab không chạy animation. */
@media (prefers-reduced-motion: reduce) {
  .about-principles__panel.is-active {
    animation: none;
  }
}

.about-principles__panel-grid {
  display: grid;
  grid-template-columns: minmax(170px, .44fr) minmax(0, .56fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

.about-principles__media {
  position: relative;
}

.about-principles__media img {
  width: 100%;
  aspect-ratio: 4 / 3.8;
  object-fit: cover;
  border-radius: 8px 40px 8px 8px;
  box-shadow: 0 10px 25px rgba(16, 33, 41, .1);
}

.about-principles__accent {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 88px;
  height: 72px;
  background: var(--c-red);
  border-radius: 4px;
  border-bottom-right-radius: 20px;
  z-index: 2;
}

.about-principles__lead {
  color: var(--c-gray-600);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 20px;
}

.about-principles__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-principles__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-gray-800);
}

.about-principles__checklist svg {
  color: var(--c-red-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 990px) {
  .about-principles__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-principles__figure {
    order: 2;
  }

  .about-principles__content {
    padding-bottom: 24px;
  }

  .about-principles__panel-grid {
    grid-template-columns: 1fr;
  }

  .about-principles__accent {
    display: none;
  }
}

/* ==========================================================================
   20. KHỐI DÒNG HỘP SỐ (3 cột sửa chữa) & KHỐI PHỤ TÙNG
   ========================================================================== */

.gearbox-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.gearbox-type {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 600;
}

.gearbox-repair-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.gearbox-repair-card {
  background: var(--c-black-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.gearbox-repair-card:hover {
  transform: translateY(-6px);
}

.gearbox-repair-card__media {
  height: 220px;
  background: var(--c-black-surface);
}

.gearbox-repair-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gearbox-repair-card__body {
  padding: 24px;
}

.gearbox-repair-card__body h3 {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--c-white);
  margin-bottom: 10px;
}

.gearbox-repair-card__body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-gray-400);
}

/* --- Phụ tùng hộp số --- */

.parts-section {
  padding: 72px 0;
  background: var(--c-gray-50);
}

.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.parts-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 33, 41, .05);
  transition: var(--transition);
}

.parts-card:hover {
  transform: translateY(-6px);
}

.parts-card__media {
  height: 180px;
  background: var(--c-gray-100);
}

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

.parts-card__body {
  padding: 22px 24px 26px;
}

.parts-card__body h3 {
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--c-gray-900);
  margin-bottom: 8px;
}

.parts-card__body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-gray-500);
}

@media (max-width: 860px) {
  .gearbox-repair-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Nút nổi: số điện thoại nằm ngoài nút Zalo --- */

.float-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}

.float-contact__number {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-gray-900);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(16, 33, 41, .16);
  transition: var(--transition);
}

.float-contact__number:hover {
  background: var(--c-red);
  color: var(--c-white);
}

@media (max-width: 600px) {
  .float-contact__number {
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
  }
}

.float-zalo__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--c-white);
}

/* --- Hero: slide là vùng lặp thêm/bớt được --- */

/* Khi bật sửa trực tiếp, `.client-list-item` bị ép `position: relative`; hero
   xếp chồng các slide bằng position:absolute nên phải giữ lại, nếu không mỗi
   slide rơi xuống một hàng và cả khối hero vỡ ngay lúc admin đang sửa. */
body.client-edit-active .hero-slider .hero-slide.client-list-item {
  position: absolute !important;
}

.hero-slide-add {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
}

/* Icon mạng xã hội dạng SVG (TikTok) đi cùng bộ icon ảnh có sẵn. */
.social-links svg,
.footer-social-links svg {
  color: currentColor;
}

/* ==========================================================================
   21. CHẾ ĐỘ SỬA TRỰC TIẾP: MỞ ĐƯỜNG CLICK TỚI ẢNH NỀN
   --------------------------------------------------------------------------
   Các ảnh nền nằm dưới một lớp phủ (gradient hero, mặt nạ trang trí, vòng
   nguyệt quế). Lớp phủ nuốt mất cú click nên admin bấm vào ảnh không mở được
   thư viện. Trong chế độ sửa, cho các lớp đó không nhận chuột nữa; ảnh nền
   `position: fixed`/`absolute` cũng được trả về dạng tĩnh để bấm trúng.
   Ngoài chế độ sửa, mọi thứ giữ nguyên như thiết kế.
   ========================================================================== */

body.client-edit-active .hero-overlay,
body.client-edit-active .laurel-bg,
body.client-edit-active .page-hero-laurel,
body.client-edit-active .spa-bg-mask,
body.client-edit-active .booking-visual-panel::after,
body.client-edit-active .booking-map-backdrop,
body.client-edit-active .services-showcase__backdrop::after {
  pointer-events: none !important;
}

/* Ảnh nhân vật của khối đặt lịch: lớp gradient `.booking-visual-panel::after`
   phủ kín panel nên cú click rơi vào lớp phủ thay vì ảnh. Trong chế độ sửa, ảnh
   nhận chuột trở lại; thẻ thông tin liên hệ nằm trên vẫn bấm được như cũ. */
body.client-edit-active .booking-workshop-img[data-block-key] {
  pointer-events: auto !important;
}

/* Ảnh nền hero: nằm dưới lớp gradient nên phải nhận chuột. */
body.client-edit-active .hero-bg-img[data-block-key] {
  pointer-events: auto !important;
}

/* Dải ảnh parallax dùng position:fixed + clip; lúc sửa trả về absolute để
   vùng bấm trùng với chỗ nhìn thấy. */
body.client-edit-active .services-showcase__backdrop {
  clip: auto !important;
  overflow: hidden !important;
}

body.client-edit-active .services-showcase__backdrop img {
  position: absolute !important;
  height: 100% !important;
}

/* Ảnh dải tiêu đề trang con */
.page-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
}

.page-hero > .container {
  position: relative;
  z-index: 2;
}

body.client-edit-active .page-hero-media img {
  pointer-events: auto !important;
}

/* Ảnh nền khối "Năng lực kỹ thuật": công cụ sửa ép position:relative cho mọi
   vùng, ảnh này phải giữ absolute để không đẩy các điểm nhấn ra khỏi khung. */
.about-capability__stage img.about-capability__stage-img[data-block-key] {
  position: absolute !important;
}

/* Dải tiêu đề trang con và dải ảnh trang dịch vụ: khối chứa chữ trải hết chiều
   ngang nên nuốt click ở cả vùng trống, ảnh nền phía dưới không bao giờ nhận
   được. Trong chế độ sửa, cho khối chứa không nhận chuột và chỉ trả lại cho
   đúng những thứ cần bấm: vùng sửa, ô lặp và nút thêm/xoá ô. */
body.client-edit-active .page-hero > .container,
body.client-edit-active .services-showcase__inner {
  pointer-events: none !important;
}

body.client-edit-active .page-hero > .container [data-block-key],
body.client-edit-active .page-hero > .container .client-list-add,
body.client-edit-active .services-showcase__inner [data-block-key],
body.client-edit-active .services-showcase__inner .client-list-item,
body.client-edit-active .services-showcase__inner .client-list-add,
body.client-edit-active .services-showcase__inner .client-list-remove {
  pointer-events: auto !important;
}

/* ==========================================================================
   TRANG TÌM KIẾM NÂNG CAO
   -------------------------------------------------------------------------- */

.search-filters {
  background: var(--c-gray-50);
  border-radius: var(--radius-md);
  padding: 24px;
}

.search-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.search-filters__row + .search-filters__row {
  margin-top: 16px;
}

.search-filters__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
}

/* Ô từ khoá chiếm hết chỗ còn lại: nó là thứ người ta gõ vào nhiều nhất. */
.search-filters__field--grow {
  flex: 1 1 260px;
}

.search-filters__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gray-600);
}

.search-filters__field input,
.search-filters__field select {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-gray-200, #e5e7eb);
  border-radius: var(--radius-md);
  background: var(--c-white);
  color: var(--c-gray-900);
  font-size: 14px;
  font-family: inherit;
}

.search-filters__field input:focus,
.search-filters__field select:focus {
  outline: none;
  border-color: var(--c-red-accent);
  box-shadow: 0 0 0 3px var(--c-red-glow);
}

.search-filters__actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.search-summary {
  margin: 24px 0 8px;
  color: var(--c-gray-600);
  font-size: 15px;
}

.search-results {
  margin-top: 28px;
}

.search-results__title {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--c-gray-900);
  margin: 0 0 18px;
}

.search-results__more {
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 640px) {
  .search-filters {
    padding: 18px;
  }

  /* Trên điện thoại mỗi ô một dòng: nhồi ba ô vào một hàng thì ô nào cũng hẹp
     tới mức không đọc được nhãn lẫn giá trị. */
  .search-filters__field,
  .search-filters__actions {
    width: 100%;
    margin-left: 0;
  }

  .search-filters__actions .btn {
    flex: 1;
  }
}

/* Ô tìm kiếm trong ngăn kéo menu mobile. Nền sáng vì ngăn kéo sáng, khác với ô
   cùng chức năng trên topbar nền đen. */
.mobile-nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  padding: 6px 14px;
  border: 1px solid var(--c-gray-200, #e5e7eb);
  border-radius: var(--radius-pill);
  background: var(--c-white);
}

.mobile-nav-search:focus-within {
  border-color: var(--c-red-accent);
  box-shadow: 0 0 0 2px var(--c-red-glow);
}

.mobile-nav-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--c-gray-900);
  font-size: 14px;
  font-family: inherit;
}

.mobile-nav-search input:focus {
  outline: none;
}

.mobile-nav-search button {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}