/* =====================================================
   SEN SPA — Spa & Wellness
   Stylesheet chung cho toàn bộ site (6 trang)
   ===================================================== */

/* ===== Biến hệ thống ===== */
:root {
  --plum: #9d174d;
  --plum-dark: #701a3f;
  --blush: #fdf2f6;
  --rose: #fda4af;
  --paper: #ffffff;
  --ink: #3f2d38;
  --muted: #8b7280;
  --line: #f3e3ea;
  --danger: #dc2626;
  --danger-soft: #fca5a5;

  /* Kênh màu rời để dùng với alpha: rgb(var(--x-rgb) / .5) */
  --plum-rgb: 157 23 77;
  --paper-rgb: 255 255 255;
  --rose-rgb: 253 164 175;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 99px;
  --shadow: 0 12px 32px rgb(var(--plum-rgb) / 0.08);
  --shadow-lg: 0 22px 50px rgb(var(--plum-rgb) / 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 80px;
}

/* ===== Reset & base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  background: var(--paper);
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

p {
  margin: 0 0 16px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}

/* ===== Layout dùng chung ===== */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

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

.section-plum {
  background: var(--plum);
  color: rgb(var(--paper-rgb) / 0.78);
}

.section-plum h2 {
  color: var(--paper);
}

.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--plum);
}

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

.section-head h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 4.2vw, 46px);
}

.section-desc {
  margin: 0;
  color: var(--muted);
}

.text-center {
  text-align: center;
}

.section-cta {
  margin-top: 52px;
}

/* Ảnh phủ kín khung chứa — dùng chung cho mọi khối media của site */
.hero-bg img,
.page-hero-strip img,
.service-media img,
.gallery-main img,
.thumb img,
.split-media img,
.map-box img,
.journal-media img,
.team-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lưới dùng chung: 3 cột card lớn, 4 cột dải số liệu */
.service-grid,
.journal-grid,
.review-grid,
.value-grid,
.team-grid,
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* Khung ảnh dùng chung — tỉ lệ + cắt ảnh */
.service-media,
.journal-media {
  aspect-ratio: 10 / 7;
  overflow: hidden;
}

.split-media,
.gallery-main {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Eyebrow trên nền tối đổi sang tông hồng nhạt */
.hero .eyebrow,
.page-hero .eyebrow,
.newsletter .eyebrow {
  color: var(--rose);
}

/* Danh sách gạch đầu dòng dùng chung */
.detail-note li,
.tab-panel li,
.price-list li {
  display: flex;
  gap: 10px;
}

/* Vỏ card dùng chung */
.service-card,
.journal-card,
.review-card,
.value-card,
.team-card,
.price-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  /* transition khai báo ở cuối file (mục Reveal) để thắng .reveal — xem chú thích ở đó */
}

.service-card:hover,
.journal-card:hover,
.value-card:hover,
.team-card:hover,
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

/* Liệu trình nổi hơn khi hover */
.service-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Tiêu đề card dùng chung */
.service-info h3,
.journal-card h3 {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.35;
  transition: color 0.3s var(--ease);
}

.service-card:hover .service-info h3,
.journal-card:hover h3 {
  color: var(--plum);
}

/* Ảnh trong card phóng nhẹ khi hover */
.service-media img,
.journal-media img {
  transition: transform 0.9s var(--ease);
}

.service-card:hover .service-media img,
.journal-card:hover .journal-media img {
  transform: scale(1.06);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.btn .arrow,
.link-more .arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

.btn:hover .arrow,
.link-more:hover .arrow {
  transform: translateX(6px);
}

.btn-lg {
  padding: 17px 38px;
  font-size: 15px;
}

.btn-primary {
  background: var(--plum);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--plum-dark);
  box-shadow: var(--shadow);
}

.btn-outline {
  border-color: rgb(var(--paper-rgb) / 0.6);
  color: var(--paper);
}

.btn-outline:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--plum);
}

.btn-light {
  background: var(--blush);
  color: var(--plum);
}

.btn-light:hover {
  background: var(--rose);
  color: var(--ink);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
  transition: color 0.3s var(--ease);
}

.link-more:hover {
  color: var(--plum-dark);
}

/* ===== Ô nhập liệu dùng chung ===== */
.sort-select,
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

/* chỉ dropdown mới dùng con trỏ bàn tay, ô nhập chữ giữ con trỏ text */
.sort-select,
.field select {
  cursor: pointer;
}

.sort-select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--plum);
}

/* ===== Nút tròn dùng chung ===== */
.icon-btn,
.gallery-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

/* ===== Preloader ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--plum);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

.preloader-logo {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--paper);
  animation: preloadIn 0.9s var(--ease) both;
}

.preloader-logo span {
  color: var(--rose);
}

.preloader-line {
  width: 180px;
  height: 2px;
  overflow: hidden;
  background: rgb(var(--paper-rgb) / 0.22);
}

.preloader-line::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--rose);
  animation: preloadBar 1.1s var(--ease) infinite;
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

@keyframes preloadIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes preloadBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Phải cao hơn .mobile-menu (300) để nút đóng menu luôn bấm được */
  z-index: 310;
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.scrolled {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line), var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.logo-mark {
  color: var(--rose);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav a {
  position: relative;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

/* Gạch chân trượt dùng chung cho nav và tab (tab override ở mục Tabs) */
.nav a::after,
.tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.nav a:hover::after,
.nav a.active::after,
.tab-btn.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav a.active {
  color: var(--plum);
}

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

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  background: var(--plum);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.3s var(--ease);
}

.header-cta:hover {
  background: var(--plum-dark);
}

.icon-btn {
  position: relative;
  color: var(--ink);
}

.icon-btn:hover {
  background: rgb(var(--rose-rgb) / 0.28);
}

.book-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--plum);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}

/* Header trên hero tối → chữ sáng */
.header-light .logo,
.header-light .nav a,
.header-light .icon-btn {
  color: var(--paper);
}

.header-light .nav-toggle span {
  background: var(--paper);
}

.site-header.scrolled .logo,
.site-header.scrolled .nav a,
.site-header.scrolled .icon-btn {
  color: var(--ink);
}

.site-header.scrolled .nav-toggle span {
  background: var(--ink);
}

/* Menu overlay đang mở: header phải trong suốt kể cả khi đã scroll,
   nếu không nền trắng sẽ đè lên overlay và nuốt mất logo tông sáng. */
body.menu-open .site-header {
  background: transparent;
  box-shadow: none;
}

body.menu-open .site-header .logo,
body.menu-open .site-header .icon-btn {
  color: var(--paper);
}

body.menu-open .site-header .nav-toggle span {
  background: var(--paper);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease),
    background 0.3s var(--ease);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== Mobile menu overlay ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--plum);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 7vw, 38px);
  color: var(--paper);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
    color 0.3s var(--ease);
}

.mobile-menu.open a {
  opacity: 1;
  transform: none;
}

.mobile-menu.open a:nth-child(1) { transition-delay: 0.10s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.17s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.24s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.31s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.38s; }

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--rose);
}

.mobile-menu-meta {
  margin-top: 26px;
  font-size: 14px;
  color: rgb(var(--paper-rgb) / 0.66);
}

/* ===== Hero (trang chủ) ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  color: var(--paper);
}

/* inset âm tạo phần ảnh dự trữ cho parallax (JS clamp trong mức dự trữ này).
   will-change do JS bật/tắt theo vùng hero để không giữ GPU layer vĩnh viễn. */
.hero-bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    104deg,
    rgb(var(--plum-rgb) / 0.9) 0%,
    rgb(var(--plum-rgb) / 0.72) 46%,
    rgb(var(--plum-rgb) / 0.36) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 150px 0 120px;
}

.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(38px, 5.8vw, 64px);
  color: var(--paper);
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--rose);
}

.hero-sub {
  max-width: 560px;
  margin-bottom: 32px;
  font-size: 17px;
  color: rgb(var(--paper-rgb) / 0.86);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgb(var(--paper-rgb) / 0.3);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: rgb(var(--paper-rgb) / 0.92);
}

/* ===== Marquee ===== */
.marquee {
  overflow: hidden;
  padding: 16px 0;
  white-space: nowrap;
  background: var(--blush);
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  font-style: italic;
  font-weight: 500;
  color: var(--plum);
}

.marquee-track span i {
  font-style: normal;
  color: var(--rose);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Page hero (trang phụ) ===== */
.page-hero {
  padding: 150px 0 72px;
  background: var(--plum);
  color: rgb(var(--paper-rgb) / 0.8);
}

.page-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(34px, 5vw, 56px);
  color: var(--paper);
}

.page-hero p {
  max-width: 650px;
  margin: 0;
}

.page-hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.page-hero-strip img {
  height: 122px;
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease);
}

.page-hero-strip img:hover {
  transform: translateY(-5px);
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  margin-bottom: 18px;
  font-size: 14px;
  color: rgb(var(--paper-rgb) / 0.68);
}

.breadcrumb a:hover {
  color: var(--rose);
}

.breadcrumb .sep {
  padding: 0 8px;
}

/* ===== Service card ===== */
.service-card {
  position: relative;
}

/* Link phủ toàn card (stretched link) — nằm dưới nút đặt nhanh */
.service-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-media {
  position: relative;
  background: var(--blush);
}

.service-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--plum);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
}

.service-badge.new {
  background: var(--rose);
  color: var(--ink);
}

.service-info {
  padding: 22px 24px 24px;
}

.service-info p {
  margin-bottom: 16px;
  font-size: 15px;
}

.service-dur {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--blush);
  font-size: 13px;
  font-weight: 600;
  color: var(--plum);
}

.service-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--plum);
}

.quick-view {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--plum);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    background 0.3s var(--ease), color 0.3s var(--ease);
}

.service-card:hover .quick-view,
.service-card:focus-within .quick-view {
  opacity: 1;
  transform: none;
}

.quick-view:hover {
  background: var(--rose);
  color: var(--ink);
}

/* Thiết bị cảm ứng không có hover: nút luôn ẩn nhưng vẫn nằm trên link phủ card
   → chạm vào dải đáy card sẽ bấm nhầm nút. Gỡ hẳn nút khỏi layout. */
@media (hover: none) {
  .quick-view,
  /* :focus-within có specificity cao hơn nên phải tắt lại ngay trong media này,
     nếu không nút vẫn hiện khi card nhận focus và chắn mất link phủ card */
  .service-card:focus-within .quick-view {
    display: none;
  }
}

/* Trạng thái bộ lọc: animation nên luôn thắng cascade của .reveal */
.service-card.filter-pop {
  animation: filterPop 0.35s var(--ease) both;
}

.service-card.filter-out {
  animation: filterOut 0.3s var(--ease) both;
  pointer-events: none;
}

.service-card.hide {
  display: none;
}

@keyframes filterPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes filterOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.94); }
}

/* ===== Filter bar ===== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  margin-bottom: 42px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Nút dạng viên thuốc — dùng chung cho bộ lọc và chọn chuyên viên */
/* Nút viên thuốc dùng chung: bộ lọc, chọn chuyên viên và link mạng xã hội */
.pill-btn,
.social-links a {
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.pill-btn {
  color: var(--ink);
}

.pill-btn:hover {
  border-color: var(--plum);
}

/* Trạng thái "đã chọn" của nút lọc = trạng thái hover của link mạng xã hội */
.pill-btn.active,
.social-links a:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--paper);
}

.filter-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
}

.sort-select {
  padding: 10px 14px;
}

.empty-note {
  padding: 56px 0;
  text-align: center;
}

/* ===== Khối 2 cột ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}



/* Ảnh bo mềm kiểu cánh sen cho khối giới thiệu */
.split-media.petal {
  border-radius: 180px 18px 180px 18px;
}

.split-body h2 {
  font-size: clamp(28px, 4vw, 44px);
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 28px;
}

.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
}

.check-list .ico {
  flex: none;
  font-weight: 700;
  color: var(--plum);
}

.pull-quote {
  margin: 24px 0;
  padding: 6px 0 6px 24px;
  border-left: 3px solid var(--rose);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}

/* ===== Bảng giá ===== */
.price-card {
  padding: 38px 30px;
  text-align: center;
}

.price-card.featured {
  border-color: var(--rose);
  box-shadow: var(--shadow);
}

.price-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  background: var(--rose);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.price-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.price-amount {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--plum);
}

.price-unit {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.price-list {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
  text-align: left;
}

.price-list li {
  font-size: 15px;
}

/* ===== Đánh giá khách ===== */
.review-card {
  padding: 32px 28px;
}

.review-stars {
  display: block;
  margin-bottom: 14px;
  color: var(--rose);
  letter-spacing: 2px;
}

.review-card blockquote {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

.review-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
}

/* ===== Giá trị & đội ngũ ===== */
.value-card {
  padding: 36px 28px;
  text-align: center;
}

.value-card .ico {
  display: block;
  margin-bottom: 14px;
  font-size: 34px;
}

.value-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.value-card p {
  margin: 0;
  font-size: 15px;
}

.team-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.team-body {
  padding: 24px 20px 28px;
  text-align: center;
}

.team-body h3 {
  margin-bottom: 4px;
  font-size: 21px;
}

.team-role {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--plum);
}

.team-body p {
  margin: 0;
  font-size: 14px;
}

/* ===== Thống kê ===== */
.stat-item {
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--rose);
}

.stat-label {
  font-size: 14px;
}

/* ===== Tin tức ===== */
.journal-body {
  padding: 24px 24px 28px;
}

.journal-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.journal-meta .cat {
  font-weight: 600;
  color: var(--plum);
}

.journal-card p {
  margin-bottom: 16px;
  font-size: 15px;
}

/* ===== Chi tiết liệu trình ===== */
.service-detail {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  padding: 72px 0 20px;
}

.gallery-main {
  position: relative;
  background: var(--blush);
}

.gallery-main img {
  transition: opacity 0.4s var(--ease);
}

.gallery-main img.fading {
  opacity: 0;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(var(--paper-rgb) / 0.92);
  color: var(--plum);
  font-size: 18px;
}

.gallery-nav:hover {
  background: var(--plum);
  color: var(--paper);
}

.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  opacity: 0.72;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}

.thumb:hover {
  opacity: 1;
}

.thumb.active {
  opacity: 1;
  border-color: var(--rose);
}

.detail-info h1 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4.2vw, 46px);
}

.detail-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--plum);
}

.option-group {
  margin-bottom: 24px;
}

.option-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.option-label b {
  color: var(--ink);
}

.therapists {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qty {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.qty button {
  width: 44px;
  height: 46px;
  font-size: 18px;
  color: var(--ink);
  transition: background 0.3s var(--ease);
}

.qty button:hover {
  background: var(--blush);
}

.qty input {
  width: 56px;
  height: 46px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-weight: 600;
  text-align: center;
  background: var(--paper);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.detail-note {
  display: grid;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.tab-btn {
  position: relative;
  padding: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.tab-btn::after {
  bottom: -1px;
  height: 3px;
}

.tab-btn:hover,
.tab-btn.active {
  color: var(--ink);
}

/* Panel ẩn dùng thuộc tính [hidden] (JS bật/tắt) — trợ năng đọc đúng trạng thái */
.tab-panel {
  max-width: 820px;
  animation: fadeUp 0.45s var(--ease) both;
}

.tab-panel li {
  margin-bottom: 10px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ===== Timeline ===== */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 32px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.timeline-item {
  position: relative;
  padding-bottom: 38px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px rgb(var(--rose-rgb) / 0.3);
}

.timeline-year {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--plum);
}

.timeline-item h3 {
  margin-bottom: 6px;
  font-size: 20px;
}

.timeline-item p {
  margin: 0;
  font-size: 15px;
}

/* ===== Liên hệ & form ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.info-block {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.info-block:last-of-type {
  border-bottom: none;
}

.info-block h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.info-block p {
  margin: 0 0 4px;
  font-size: 15px;
}

.info-block a:hover {
  color: var(--plum);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.social-links a {
  color: var(--plum);
}

.booking-form {
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.booking-form h2 {
  font-size: 28px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--blush);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--paper);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.map-box {
  position: relative;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  margin-top: 64px;
  border-radius: var(--radius-lg);
}

.map-box img {
  filter: grayscale(1) brightness(0.6);
}

.map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--paper);
  background: rgb(var(--plum-rgb) / 0.55);
}

.map-overlay strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 600;
}

/* ===== CTA band ===== */
.cta-band {
  padding: 92px 0;
  text-align: center;
}

.cta-band h2 {
  margin-bottom: 18px;
  font-size: clamp(28px, 4vw, 44px);
}

.cta-band p {
  max-width: 580px;
  margin: 0 auto 28px;
}

/* ===== Newsletter ===== */
.newsletter {
  padding: 80px 0;
  background: var(--plum-dark);
  color: rgb(var(--paper-rgb) / 0.78);
}

.newsletter-inner {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

.newsletter h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3.6vw, 40px);
  color: var(--paper);
}

.newsletter p {
  margin-bottom: 26px;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.newsletter-form input {
  flex: 1 1 300px;
  max-width: 380px;
  padding: 14px 20px;
  border: 1px solid rgb(var(--paper-rgb) / 0.3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--paper);
}

.newsletter-form input::placeholder {
  color: rgb(var(--paper-rgb) / 0.52);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--rose);
}

.form-note {
  min-height: 22px;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--rose);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.form-note.show {
  opacity: 1;
  transform: none;
}

/* Báo lỗi: đỏ nhạt trên nền tối, đỏ đậm trên nền sáng của form đặt lịch */
.form-note.error {
  color: var(--danger-soft);
}

.booking-form .form-note {
  color: var(--plum);
}

.booking-form .form-note.error {
  color: var(--danger);
}

/* ===== Footer ===== */
.site-footer {
  padding: 74px 0 28px;
  background: var(--plum-dark);
  color: rgb(var(--paper-rgb) / 0.68);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
}

.footer-brand .logo {
  margin-bottom: 16px;
  color: var(--paper);
}

.footer-brand p {
  max-width: 320px;
  font-size: 15px;
}

.footer-col h4 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--paper);
}

.footer-col li {
  margin-bottom: 10px;
  font-size: 15px;
}

.footer-col a {
  transition: color 0.3s var(--ease);
}

.footer-col a:hover {
  color: var(--rose);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--paper-rgb) / 0.16);
  font-size: 14px;
}

/* ===== To-top & Toast ===== */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--paper);
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0.35s var(--ease), background 0.3s var(--ease);
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--plum-dark);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 400;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0.35s var(--ease);
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ===== Reveal animation ===== */
.reveal {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
    box-shadow 0.45s var(--ease);
}

/* Card vừa có reveal vừa có hover lift: transform dùng chung cho cả hai hiệu ứng
   nên phải lấy nhịp nhanh 0.45s của hover, không để .reveal kéo thành 0.9s.
   Khai báo sau .reveal để thắng theo thứ tự cascade (cùng specificity). */
.service-card,
.journal-card,
.review-card,
.value-card,
.team-card,
.price-card {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

.reveal[data-reveal="up"] { transform: translateY(28px); }
/* Lệch ngang phải nhỏ hơn padding 24px của .container, nếu không khối reveal
   sẽ thò khỏi viewport trong lúc chờ hiện và bị cắt mép phải. */
.reveal[data-reveal="left"] { transform: translateX(-20px); }
.reveal[data-reveal="right"] { transform: translateX(20px); }
.reveal[data-reveal="zoom"] { transform: scale(0.95); }

/* Từ 1024px trở xuống layout xếp 1 cột và nhiều khối reveal chạy full-bleed (nằm
   ngoài padding .container) nên mọi lệch ngang đều thò ra — đổi sang trượt dọc. */
@media (max-width: 1024px) {
  .reveal[data-reveal="left"],
  .reveal[data-reveal="right"] { transform: translateY(24px); }
}

/* Zoom reveal chỉ áp cho khối media lớn (split-media, gallery-main, map-box).
   Loại trừ .page-hero-strip: ảnh nhỏ ở đó có hiệu ứng hover lift riêng, nếu bị
   rule này ghi đè transform thì hover không bao giờ chạy.
   Giữ luôn transition opacity để ảnh gallery vẫn fade khi đổi ảnh. */
.reveal[data-reveal="zoom"]:not(.page-hero-strip) img {
  transform: scale(1.12);
  transition: transform 1.4s var(--ease), opacity 0.4s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal.visible[data-reveal="zoom"]:not(.page-hero-strip) img {
  transform: scale(1);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .section { padding: 78px 0; }
  .service-grid,
  .journal-grid,
  .review-grid,
  .value-grid,
  .team-grid,
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .split,
  .service-detail,
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-inner { padding: 130px 0 90px; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .header-cta { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 124px 0 56px; }
  .page-hero-strip { grid-template-columns: repeat(2, 1fr); }
  .booking-form { padding: 26px 20px; }
  .filter-meta { width: 100%; margin-left: 0; justify-content: space-between; }
  .map-box { aspect-ratio: 4 / 3; margin-top: 44px; }
  .service-detail { padding-top: 46px; }
  .split-media.petal { border-radius: var(--radius-lg); }
}

@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .service-grid,
  .journal-grid,
  .review-grid,
  .value-grid,
  .team-grid,
  .price-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .newsletter-form input { flex-basis: 100%; max-width: none; }
  .tabs { gap: 18px; }
  .btn { padding: 13px 26px; }
}

/* ===== Giảm chuyển động theo thiết lập hệ thống ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal[data-reveal="zoom"] img { transform: none !important; }
  .marquee-track { animation: none; }
  .hero-bg { transform: none !important; }
}

/* ===== Dropdown dùng chung: bỏ giao diện native, vẽ chevron theo theme =====
   Đặt cuối file để padding-right thắng padding khai báo ở các block phía trên.
   Vẫn là <select> gốc: dropdown của hệ điều hành và a11y giữ nguyên. */
select,
.sort-select,
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.75 4.75 3.25 3.25 3.25-3.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

select:hover,
.sort-select:hover,
.field select:hover {
  border-color: var(--plum);
}

select:focus,
.sort-select:focus,
.field select:focus {
  border-color: var(--plum);
  outline: 2px solid rgb(var(--plum-rgb) / 0.30);
  outline-offset: 1px;
}