/* ============================================================
   TIỂU MÀN THẦU STUDIO — Korean Minimal
   Bảng màu, khoảng cách, typography khai báo tập trung ở :root
   Muốn đổi tông cả trang → chỉ sửa phần :root bên dưới
   ============================================================ */

:root {
  /* Màu nền */
  --bg: #ffffff;
  --bg-soft: #f8f6f3;
  --bg-warm: #f2ede6;
  --bg-dark: #1c1a17;

  /* Màu chữ */
  --text: #1f1d1a;
  --text-2: #5a554e;
  --text-3: #9a938a;
  --text-inv: #f6f3ef;

  /* Đường kẻ & nhấn */
  --line: #e9e5df;
  --line-strong: #d6d0c7;
  --accent: #a98e6f;
  --accent-dark: #8a7157;
  --accent-soft: #f0e9e0;

  /* Hồng nhạt — dùng riêng cho nút nổi "quay lại" trong trình xem bộ
     ảnh. Cả trang tông be trung tính nên đây là chỗ duy nhất có màu,
     cốt để khách nhìn là thấy ngay lối quay ra. */
  --hong: #fadde3;
  --hong-dam: #f4c8d2;
  --hong-vien: #eeb6c3;
  --hong-chu: #9a4356;

  /* Font */
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;

  /* Nhịp khoảng cách */
  --section-y: 120px;
  --gutter: 24px;
  --maxw: 1240px;
  --maxw-narrow: 820px;

  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4 {
  color: var(--text);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
}
.display em {
  font-style: italic;
  color: var(--accent);
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: var(--text);
}
.h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 500;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.lead {
  font-size: 1.0625rem;
  color: var(--text-2);
  max-width: 62ch;
}
.muted {
  color: var(--text-3);
}
.small {
  font-size: 0.875rem;
}

/* Ẩn khỏi mắt nhưng trình đọc màn hình vẫn đọc được */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: var(--maxw-narrow);
}
.section {
  padding-block: var(--section-y);
}
/* Thanh tiêu đề dính ở trên (68–84px) sẽ che mất chữ đầu mục khi bấm
   link menu. Chừa sẵn khoảng này để nhảy tới đâu cũng đọc được ngay. */
main section[id],
#top {
  scroll-margin-top: 96px;
}
.section--soft {
  background: var(--bg-soft);
}
.section--warm {
  background: var(--bg-warm);
}
.section--dark {
  background: var(--bg-dark);
  color: #b8b1a7;
}
.section--dark h2,
.section--dark h3,
.section--dark .h2,
.section--dark .h3 {
  color: var(--text-inv);
}
.section--tight {
  padding-block: 80px;
}

/* ---------- Ranh giới giữa các phần ----------
   Trước đây các phần chỉ cách nhau bằng khoảng trống 120px, không có gì
   khác. Hai phần nền trắng đứng liền nhau (Dịch vụ → Quy trình) đọc ra
   thành một mảng trống giữa trang chứ không phải hai mục riêng.

   Hai lớp phân tách chồng lên nhau:
     1. Nền so le — phần này trắng thì phần kế tiếp màu kem (xem thứ tự
        các lớp section--soft trong index.html);
     2. Một đường kẻ mảnh ngay mép trên mỗi phần, chạy hết bề ngang.

   Đường kẻ CHỈ vẽ giữa hai phần nền sáng. Phần nền tối tự nó đã cắt
   trang rất rõ, kẻ thêm chỉ thành vệt bẩn ở mép. */
main > section + section {
  border-top: 1px solid var(--line);
}
main > section.section--dark,
main > section.section--dark + section {
  border-top: 0;
}

.section-head {
  margin-bottom: 64px;
  max-width: 720px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head .h2 + .lead {
  margin-top: 20px;
}
.section-head--center .lead {
  margin-inline: auto;
}

/* ---------- Nút ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.3s var(--ease);
  border: 1px solid transparent;
  text-align: center;
}
.btn--primary {
  background: var(--text);
  color: var(--text-inv);
}
.btn--primary:hover {
  background: var(--accent-dark);
}
.btn--outline {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--outline:hover {
  border-color: var(--text);
  background: var(--text);
  color: var(--text-inv);
}
.btn--light {
  background: #fff;
  color: var(--text);
}
.btn--light:hover {
  background: var(--accent-soft);
}
.btn--ghost-inv {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-inv);
}
.btn--ghost-inv:hover {
  background: var(--text-inv);
  color: var(--text);
}
.btn--block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: 0.25s var(--ease);
}
.link-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 14px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  transition: height 0.35s var(--ease);
}
.header.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.header.is-stuck .header__inner {
  height: 68px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  font-size: 0.875rem;
  color: var(--text-2);
  position: relative;
  padding-block: 4px;
  transition: color 0.25s;
  white-space: nowrap; /* "Tác phẩm" không được tự tách thành 2 dòng */
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.nav a:hover {
  color: var(--text);
}
.nav a:hover::after,
.nav a.is-active::after {
  width: 100%;
}

.header__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Hai hotline ở thanh tiêu đề — xếp cạnh nhau, ngăn bằng vạch dọc */
.header__phones {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__phone {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.25;
  transition: color 0.25s var(--ease);
}
.header__phone + .header__phone {
  padding-left: 18px;
  border-left: 1px solid var(--line-strong);
}
.header__phone span {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.header__phone:hover {
  color: var(--accent-dark);
}

/* Dòng giải thích nhỏ dưới mỗi hotline ở mục Liên hệ */
.contact-sub {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: 4px;
}

/* Nút "Đặt lịch ngay" ở thanh tiêu đề — chỉ dùng cho màn hình hẹp.
   Trên máy tính đã có menu, hai hotline và nút "Nhận tư vấn" rồi nên
   giấu đi cho đỡ chật; xem tiếp trong @media (max-width: 900px). */
.header__book {
  display: none;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
}
.burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text);
  position: relative;
  transition: 0.3s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: var(--text);
  transition: 0.3s var(--ease);
}
.burger span::before {
  top: -7px;
}
.burger span::after {
  top: 7px;
}
.burger.is-open span {
  background: transparent;
}
.burger.is-open span::before {
  top: 0;
  transform: rotate(45deg);
}
.burger.is-open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Menu mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  padding: 110px var(--gutter) 40px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.mobile-menu a {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn {
  margin-top: 28px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 84px;
  background: var(--bg-soft);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  width: 100%;
}
/* Ô lưới mặc định KHÔNG co nhỏ hơn nội dung bên trong (min-width:auto).
   Lưới lối tắt bên trong đòi 3 cột 148px = 464px, thế là cả cột phình
   to hơn màn hình điện thoại rồi bị .hero cắt cụt. Mở khoá cho co lại
   thì lưới con mới tự tính đúng số cột theo bề ngang thật. */
.hero__grid > * {
  min-width: 0;
}
.hero__body {
  padding-block: 60px;
}
.hero .display {
  margin-bottom: 26px;
  /* Nhỏ hơn .display chung vì cột chữ chỉ chiếm nửa màn hình,
     tránh để một từ rớt xuống dòng cuối đứng lẻ loi. */
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  text-wrap: balance;
}
.hero__lead {
  font-size: 1.0625rem;
  max-width: 46ch;
  margin-bottom: 40px;
}

/* ---------- Khối chữ ở bìa ----------
   Ba mức chữ tách bạch hẳn nhau thay vì ba dòng na ná: địa chỉ nhỏ và
   xám, tên thương hiệu là chữ hoa giãn rộng kiểu logo, câu tagline mới
   là dòng to nhất. Đảo như vậy vì cột bên phải đã là lưới chín ô ảnh
   khá rậm — cột chữ càng tĩnh thì hai bên càng cân.

   Cả khối chỉ dùng ĐÚNG MỘT màu nhấn, dành cho câu tagline. Trước đây
   dòng địa chỉ cũng màu nâu, hai chỗ tranh nhau nên chẳng chỗ nào nổi. */
.hero__diachi {
  color: var(--text-3);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  margin-bottom: 30px;
}
/* Tiêu đề in hoa, phông không chân — đây là nét chính của lối trang mẫu.
   Không giãn chữ như logo nữa mà xếp sát, hai dòng chồng lên nhau thành
   một khối chữ đặc, đọc như tấm biển tên. */
.hero__ten {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
/* Chấm giữa tên lấy màu nhấn — chi tiết nhỏ đủ để dòng chữ hoa không
   trơ, mà không phải thêm hình hay đường kẻ nào */
.hero__cham {
  color: var(--accent);
}

/* Đoạn giới thiệu để chữ nghiêng, giống trang mẫu: nó tách hẳn khỏi
   tiêu đề in hoa nên mắt không lẫn hai khối vào nhau */
/* Chia đôi: chữ giới thiệu bên trái, ảnh minh hoạ bên phải.
   Cột chữ rộng gấp rưỡi cột ảnh — chữ cần bề ngang mới đọc trôi, ảnh
   thì thu nhỏ vẫn nhận ra. */
.hero__gioi {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  /* stretch chứ không start: hai cột cao bằng nhau, không so le nhau
     rồi hở một mảng trống dưới cột ngắn hơn */
  align-items: stretch;
  margin-top: 24px;
}
/* Vạch kẻ và hàng biểu tượng tụt xuống đáy cột, ngang đáy ảnh bên cạnh
   — đoạn giới thiệu ngắn nên nếu để trôi tự nhiên thì chúng dính ngay
   dưới đoạn văn, chừa một khoảng trống to phía dưới. */
.hero__gioi-chu {
  display: flex;
  flex-direction: column;
}
.hero__gioi-chu .hero__chan {
  margin-top: auto;
}
.hero__gioithieu {
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-2);
}

/* Ảnh minh hoạ cắt theo nét cọ. Lớp nền phía sau lệch vài pixel và
   dùng chung hình cắt — trông như vệt sơn lem ra ngoài mép, thiếu nó
   thì chỉ còn ảnh viền gợn sóng chứ chưa ra chất vẽ tay. */
/* Không đặt aspect-ratio nữa: ô ảnh cao bằng cả hàng, còn min-height
   kéo cả hàng dài xuống cho lấp chỗ trống của khối bìa. Dùng vh nên
   màn hình cao thì ảnh cao theo, màn hình thấp thì tự thu lại chứ
   không đẩy khối bìa tràn quá một màn hình. */
.hero__gioi-anh {
  position: relative;
  margin: 0;
  min-height: clamp(300px, 42vh, 460px);
}
.hero__gioi-anh::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(7px, 7px) rotate(0.6deg);
  background: var(--accent-soft);
  clip-path: url(#khungCoVe);
}
/* Hai lớp ảnh chồng nhau để đổi ảnh bằng cách mờ dần — thay src thẳng
   thì ô chớp trắng một nhịp trong lúc tải ảnh mới */
.hero__gioi-anh img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  clip-path: url(#khungCoVe);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hero__gioi-anh img.is-hien {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero__gioi-anh img {
    transition: none;
  }
}

/* Vạch kẻ ngang rồi mới tới hàng nút — vạch này chốt khối chữ lại, thiếu
   nó thì nút với đoạn văn dính vào nhau */
.hero__chan {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}

/* ---------- Form nhanh ở đầu trang ----------
   Ba ô, không nhãn riêng — chữ gợi ý nằm luôn trong ô như trang mẫu.
   Ô nền trắng, chỉ kẻ một vạch dưới: nhẹ hơn khung viền kín, hợp với
   nền be của khối bìa.

   Có nhãn ẩn (aria-label) cho phần mềm đọc màn hình, vì chữ gợi ý biến
   mất ngay khi khách gõ chữ đầu tiên. */
/* Bó hẹp bề ngang lại: form trải hết cột 560px trông như một tấm bảng
   to đùng, thu về 340px thì nó thành một khối gọn nằm nép bên dưới đoạn
   giới thiệu — đúng vai một lời mời, không phải nhân vật chính. */
.form-nhanh {
  max-width: 340px;
}
.form-nhanh__de {
  margin-bottom: 14px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.form-nhanh__o + .form-nhanh__o {
  margin-top: 7px;
}
.form-nhanh__o input {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
  transition: 0.25s var(--ease);
}
.form-nhanh__o input::placeholder {
  color: var(--text-3);
}
.form-nhanh__o input:focus {
  outline: none;
  border-color: var(--text);
}
.form-nhanh__o input.is-error {
  border-color: #c0392b;
}
/* Nút cũng thu theo cho cân với ba ô bên trên — nút to mà ô nhỏ thì
   nhìn lệch hẳn */
.form-nhanh .hero__nut {
  width: 100%;
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

/* Trên iPhone, chạm vào ô nhập có cỡ chữ DƯỚI 16px là Safari tự phóng
   to cả trang lên — khách đang điền thì màn hình giật một cái, chữ to
   vọt ra ngoài, phải chụm tay thu lại mới điền tiếp được. Ép đúng 16px
   ở màn hình hẹp là hết. Kiểu dáng gọn vẫn giữ nhờ khoảng đệm nhỏ.
   Form đầy đủ ở mục Liên hệ cũng dính lỗi này — vá riêng ở khối .field
   bên dưới, vì để chung ở đây thì bị quy tắc dưới đó đè mất. */
@media (max-width: 520px) {
  .form-nhanh__o input {
    font-size: 16px;
    padding: 9px 13px;
  }
}
/* Ô báo kết quả ở form nhanh: gọn hơn ô của form đầy đủ vì khối bìa
   không có chỗ cho một khung to */
.form-nhanh .form__msg {
  font-size: 0.88rem;
  line-height: 1.6;
}
.hero__nut {
  padding: 16px 34px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__mxh {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}
.hero__mxh a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--text-3);
  transition: 0.25s var(--ease);
}
.hero__mxh a:hover {
  color: var(--accent-dark);
  transform: translateY(-2px);
}

/* Máy hẹp: dòng địa chỉ dài 38 ký tự, giãn 0.3em là vừa chạm mép rồi
   gãy xuống hai dòng — chữ hoa giãn rộng mà gãy dòng nhìn rất xấu. */
@media (max-width: 520px) {
  .hero__diachi {
    font-size: 0.61rem;
    letter-spacing: 0.17em;
    margin-bottom: 24px;
  }
  /* Màn hình hẹp: nhường thêm bề ngang cho cột chữ. Cột chữ hẹp quá thì
     mỗi dòng chỉ còn hơn hai chục ký tự, đọc rất mệt vì mắt phải nhảy
     dòng liên tục. */
  .hero__gioi {
    grid-template-columns: 1.7fr 1fr;
    gap: 16px;
  }
  /* Điện thoại: bỏ chiều cao tối thiểu, để ảnh cao đúng bằng cột chữ.
     Giữ nguyên 300px thì cột ảnh chỉ rộng ~135px mà cao 300px, thành
     một dải hẹp dựng đứng nhìn rất kỳ. */
  .hero__gioi-anh {
    min-height: 0;
  }
  .hero__gioithieu {
    font-size: 0.96rem;
    line-height: 1.7;
  }
  .hero__chan {
    margin-top: 30px;
    padding-top: 26px;
  }
  /* Nút chiếm trọn bề ngang, hàng biểu tượng xuống dòng dưới — chen hai
     thứ trên một hàng ở màn hình này là nút bị bóp lại còn một mẩu */
  .hero__nut {
    width: 100%;
  }
  .hero__mxh {
    gap: 24px;
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* ---------- Lưới lối tắt tới từng mục ảnh (cột phải khối bìa) ----------
   Tên mục đặt đè lên ảnh chứ không xuống dòng riêng, và ô tự co theo
   bề ngang: cột phải rộng ~560px thì xếp 3 cột, tám mục vừa gọn 3 hàng
   trong một màn hình. Xếp 2 cột thì thành 4 hàng, khối bìa cao quá một
   màn hình nên khách phải cuộn mới thấy hết — hỏng mất cái ý "liếc một
   cái là nắm hết studio có gì". */
.hero__muc {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.hero-muc__o {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  transition: 0.3s var(--ease);
}
/* Hai lớp ảnh chồng nhau để đổi ảnh bằng cách mờ dần — thay src thẳng
   thì ô chớp trắng một nhịp trong lúc tải ảnh mới. Lớp nào đang hiện
   mang .is-hien; ảnh kế tiếp nạp xong ở lớp kia mới đổi chỗ cho nhau. */
.hero-muc__anh {
  position: absolute;
  inset: 0;
}
.hero-muc__anh img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* giữ mặt người khi cắt vuông */
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.6s var(--ease);
}
.hero-muc__anh img.is-hien {
  opacity: 1;
}
.hero-muc__o:hover {
  border-color: var(--line-strong);
}
.hero-muc__o:hover .hero-muc__anh img {
  transform: scale(1.06);
}
/* Máy đang bật chế độ giảm chuyển động thì thôi đổi ảnh, để nguyên tấm
   đầu — mã JS cũng tự tắt vòng đổi khi thấy tuỳ chọn này */
@media (prefers-reduced-motion: reduce) {
  .hero-muc__anh img {
    transition: none;
  }
}
.hero-muc__o:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hero-muc__chu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 11px 9px;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(31, 29, 26, 0.86),
    rgba(31, 29, 26, 0.45) 55%,
    rgba(31, 29, 26, 0)
  );
}
.hero-muc__ten {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}
.hero-muc__so {
  display: block;
  margin-top: 1px;
  font-size: 0.7rem;
  opacity: 0.82;
}

/* Dải số liệu */
/* Không kẻ mép trên ở đây nữa: mép trên của cả phần đã có đường kẻ
   chạy hết bề ngang, kẻ thêm một vạch thụt vào là thành hai vạch chồng
   nhau ở cùng một chỗ. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border-right: 0;
}
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}
.stat__label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ============================================================
   Ô GIỮ CHỖ ẢNH (placeholder)
   Thay bằng <img> thật là hết hiện — xem images/README.txt
   ============================================================ */
.ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #efeae3 0%, #e4ddd3 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.5;
}
.ph__label {
  position: relative;
  text-align: center;
  padding: 16px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2988a;
  line-height: 1.7;
}
.ph__label strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #8d8272;
  margin-bottom: 4px;
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
/* Tỉ lệ khung khác nhau */
.ph--square {
  aspect-ratio: 1 / 1;
}
.ph--wide {
  aspect-ratio: 3 / 2;
}
.ph--tall {
  aspect-ratio: 2 / 3;
}
.ph--pano {
  aspect-ratio: 16 / 9;
}

/* ============================================================
   TAB THƯ VIỆN ẢNH
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.tab {
  padding: 15px 28px;
  font-size: 1.05rem;
  color: var(--text-3);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: 0.25s var(--ease);
  white-space: nowrap;
}
.tab:hover {
  color: var(--text-2);
}
.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 500;
}

.tab-panel {
  display: none;
}
.tab-panel.is-active {
  display: block;
  animation: fadeUp 0.5s var(--ease);
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Con số nhỏ trong tab: "Ảnh Prewedding 44" */
.tab em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--text-3);
  margin-left: 5px;
}
.tab.is-active em {
  color: var(--accent);
}

/* Lời giới thiệu danh mục */
.cat-intro {
  max-width: 68ch;
  margin-bottom: 32px;
}
.cat-intro__desc {
  font-size: 1.0625rem;
  color: var(--text-2);
}
.cat-intro__hint {
  margin-top: 12px;
}

/* Ô chọn bộ ảnh — ảnh bìa dọc kèm tên bộ */
/* ============================================================
   MỤC VIDEO
   Ô video là ảnh bìa lấy từ YouTube, bấm vào mới thay bằng khung
   xem — xem assets/js/video.js.
   ============================================================ */
.video-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px 24px;
}
.video-o__nut {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
}
.video-o__khung {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  transition: 0.3s var(--ease);
}
.video-o__khung img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cắt hai vệt đen của ảnh bìa 4/3 khi phải lùi */
  transition: transform 0.6s var(--ease);
}
.video-o__nut:hover .video-o__khung {
  border-color: var(--line-strong);
}
.video-o__nut:hover .video-o__khung img {
  transform: scale(1.04);
}
.video-o__nut:focus-visible .video-o__khung {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Nút phát: tam giác vẽ bằng viền, không cần thêm file ảnh nào */
.video-o__phat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(31, 29, 26, 0.62);
  backdrop-filter: blur(3px);
  transition: 0.25s var(--ease);
}
.video-o__phat::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.video-o__nut:hover .video-o__phat {
  background: var(--accent-dark);
  transform: translate(-50%, -50%) scale(1.08);
}
.video-o__ten {
  display: block;
  margin-top: 14px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

/* Khung xem thay chỗ ảnh bìa sau khi bấm */
.video-o__phim {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-o.dang-xem .video-o__khung {
  border-color: var(--text);
}

@media (max-width: 640px) {
  .video-luoi {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .video-o__phat {
    width: 54px;
    height: 54px;
  }
}

/* ---------- Hàng nút lọc kiểu chụp ----------
   Hiện cho MỌI người xem, không riêng chủ studio — đây là cách khách
   tìm nhanh kiểu ảnh họ muốn chụp. */
.loc-kieu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.loc-kieu__nhan {
  margin-right: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.loc-kieu__nut {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-2);
  background: var(--bg);
  transition: 0.2s var(--ease);
}
.loc-kieu__nut em {
  font-style: normal;
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.loc-kieu__nut:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.loc-kieu__nut.is-chon {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inv);
}
.loc-kieu__nut.is-chon em {
  color: var(--text-inv);
  opacity: 0.7;
}
/* Từ khi có thêm nhãn "Cổ trang" thì hàng này 5 nút. Cỡ mặc định trên
   điện thoại tràn xuống 3 dòng, đẩy ô bìa gần khỏi màn hình — bóp nhỏ
   một chút là gọn lại 2 dòng mà vẫn đọc và bấm thoải mái. */
@media (max-width: 720px) {
  .loc-kieu {
    gap: 8px;
    margin-bottom: 22px;
  }
  .loc-kieu__nut {
    padding: 7px 13px;
    font-size: 0.82rem;
  }
  .loc-kieu__nut em {
    margin-left: 5px;
    font-size: 0.74rem;
  }
}

.album-cards {
  display: grid;
  /* auto-fill (không phải auto-fit): khi danh mục chỉ có 2 bộ thì ô
     vẫn giữ cỡ bình thường thay vì giãn ra chiếm hết chiều ngang. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
  margin-bottom: 48px;
}
/* width:100% KHÔNG được bỏ. Đây là thẻ <button>, mà nút bấm thì dù đặt
   display:block trình duyệt vẫn co lại vừa nội dung chứ không giãn kín ô
   lưới. Bên trong .album-card__pic lại lấy chiều rộng theo nút, còn <img>
   lấy 100% của khung — vòng tròn không có điểm neo, nên trình duyệt phải
   đoán theo kích thước ảnh mà nó BIẾT TẠI THỜI ĐIỂM ĐÓ. Ảnh nạp lười nên
   lúc đầu chưa biết gì, đo được tới đâu ô phình tới đó: trên điện thoại
   mạng chậm thấy rõ ô bìa cứ bé lại rồi to ra. Ghim 100% là hết vòng
   tròn — ô luôn bằng đúng cột lưới, nạp nhanh hay chậm cũng vậy. */
.album-card {
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  display: block;
}
.album-card__pic {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: 0.3s var(--ease);
}
.album-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* giữ mặt người khi phải cắt bớt */
  transition: transform 0.6s var(--ease);
}
/* Hai lớp ảnh chồng nhau để ô bìa tự đổi ảnh bằng cách mờ dần. CHỈ ô
   bìa dưới trang mới có lớp bọc này; lưới bộ ảnh trong trình xem vẫn
   dùng một ảnh như cũ nên không dính quy tắc mờ ở đây. */
.album-card__anh {
  position: absolute;
  inset: 0;
}
.album-card__anh img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.6s var(--ease);
}
.album-card__anh img.is-hien {
  opacity: 1;
}
.album-card:hover .album-card__pic {
  border-color: var(--line-strong);
}
.album-card:hover .album-card__pic img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .album-card__anh img {
    transition: none;
  }
}
.album-card__name {
  display: block;
  margin-top: 14px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.album-card__count {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--text-3);
}

/* Nhãn "Đang xem" — chỉ hiện trên ô đang chọn */
.album-card__flag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: var(--text);
  color: var(--text-inv);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.3s var(--ease);
}
.album-card.is-active .album-card__pic {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--text);
}
.album-card.is-active .album-card__flag {
  opacity: 1;
  transform: none;
}
.album-card.is-active .album-card__name {
  color: var(--accent-dark);
}
.album-card:focus-visible .album-card__pic {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Đổi ảnh bìa (chỉ hiện khi chủ studio mở từ máy trong nhà,
     khách vào tieumanthaustudio.vn không có mã này) ---------- */
.album-slot {
  position: relative;
}
.bia-nut {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31, 29, 26, 0.72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.2s var(--ease);
  backdrop-filter: blur(4px);
}
.album-slot:hover .bia-nut,
.bia-nut:focus-visible {
  opacity: 1;
  transform: none;
}
.bia-nut:hover {
  background: var(--accent-dark);
}
/* Màn hình cảm ứng không có chuột để rê — cho nút hiện sẵn, mờ nhẹ */
@media (hover: none) {
  .bia-nut {
    opacity: 0.75;
    transform: none;
  }
}

/* Ô bộ ảnh trong lớp phủ chọn bộ: bọc thêm một lớp để đặt nút ba chấm,
   nút bên trong phải chiếm trọn ô thì lưới mới không so le */
.xembo__bo-slot {
  display: block;
}
.xembo__bo-slot > .xembo__bo-o {
  width: 100%;
}

/* ---------- Nút ba chấm trên ô HẠNG MỤC (lưới chín ô đầu trang) ----------
   Cùng hình dáng với nút của ô bìa bộ, chỉ khác chỗ neo: ô hạng mục có
   chữ đè lên nửa dưới nên nút nằm góc trên phải. */
.hero-muc__slot {
  position: relative;
}
.muc-nut {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31, 29, 26, 0.72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.2s var(--ease);
  backdrop-filter: blur(4px);
}
.hero-muc__slot:hover .muc-nut,
.muc-nut:focus-visible {
  opacity: 1;
  transform: none;
}
.muc-nut:hover {
  background: var(--accent-dark);
}
@media (hover: none) {
  .muc-nut {
    opacity: 0.75;
    transform: none;
  }
}

/* Nút ba chấm cạnh thẻ hạng mục ở phần thư viện. Thẻ chỉ cao hơn ba
   chục pixel nên nút nằm CẠNH chữ chứ không đè lên, và nhạt màu để
   hàng thẻ vẫn đọc ra tên mục trước tiên. */
.tab-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.muc-nut--tab {
  position: static;
  width: 26px;
  height: 26px;
  /* Không kéo âm nữa: phần đệm bên phải của thẻ hẹp hơn tưởng, kéo vào
     là nút chạm ngay con số đếm */
  margin-left: 0;
  margin-right: 2px;
  font-size: 0.95rem;
  background: transparent;
  color: var(--text-3);
  backdrop-filter: none;
  opacity: 0.5;
  transform: none;
}
.tab-slot:hover .muc-nut--tab,
.muc-nut--tab:focus-visible {
  opacity: 1;
}
.muc-nut--tab:hover {
  background: var(--bg-warm);
  color: var(--text);
}

/* Nút ba chấm trên ô video — đặt đè góc trên phải như ô bìa bộ ảnh,
   vì ô video có ảnh rộng, chỗ đó trống.

   PHẢI có dòng :hover riêng. Lớp .muc-nut gốc để opacity 0, chỉ hiện
   khi rê vào ô bọc nó — mà quy tắc đó viết cho .hero-muc__slot. Thiếu
   dòng dưới đây là nút dựng ra nhưng trong suốt, tưởng như không có. */
.video-o {
  position: relative;
}
.muc-nut--video {
  top: 10px;
  right: 10px;
}
.video-o:hover .muc-nut--video,
.muc-nut--video:focus-visible {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .muc-nut--video {
    opacity: 0.75;
    transform: none;
  }
}

/* Nút ba chấm cạnh nút lọc kiểu chụp — cùng lối với nút cạnh thẻ hạng
   mục: đặt bên cạnh, nhạt màu, không đè lên chữ */
.loc-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.muc-nut--kieu {
  position: static;
  width: 24px;
  height: 24px;
  margin-left: -6px;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text-3);
  backdrop-filter: none;
  opacity: 0.5;
  transform: none;
}
.loc-slot:hover .muc-nut--kieu,
.muc-nut--kieu:focus-visible {
  opacity: 1;
}
.muc-nut--kieu:hover {
  background: var(--bg-warm);
  color: var(--text);
}

/* Màn hình cảm ứng không rê chuột được nên không có trạng thái hover —
   hai nút này phải hiện sẵn, nếu không thì trên điện thoại coi như
   không có nút. Phải đặt SAU hai khối trên mới đè được. */
@media (hover: none) {
  .muc-nut--tab,
  .muc-nut--kieu {
    opacity: 0.75;
  }
}

/* Đang sắp xếp hạng mục: giấu nút ba chấm cho khỏi bấm nhầm, chặn bấm
   vào ô (bấm là mở mục, không phải việc đang làm), và viền nét đứt để
   thấy rõ đang sắp ô nào */
.hero__muc.dang-sap-xep .muc-nut {
  display: none;
}
.hero__muc.dang-sap-xep .hero-muc__o {
  pointer-events: none;
}
.hero__muc.dang-sap-xep .hero-muc__slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 2;
}

/* Menu nhỏ khi bấm nút ba chấm trên ô bìa */
.bia-menu {
  position: absolute;
  z-index: 220;
  display: none;
  min-width: 190px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -20px rgba(31, 29, 26, 0.55);
  overflow: hidden;
}
.bia-menu.is-open {
  display: block;
}
.bia-menu__muc {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  font-size: 0.92rem;
  color: var(--text-2);
  transition: 0.18s var(--ease);
}
.bia-menu__muc + .bia-menu__muc {
  border-top: 1px solid var(--line);
}
.bia-menu__muc:hover {
  background: var(--bg-soft);
  color: var(--text);
}

/* ---------- Chế độ sắp thứ tự các bộ ----------
   Cùng điều kiện với nút đổi bìa: chỉ dựng khi chủ studio mở trang từ
   máy trong nhà, khách vào tieumanthaustudio.vn không có phần này. */
.sx-thanh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sx-thanh__chu {
  font-size: 0.9rem;
  color: var(--text-2);
}
.sx-thanh__tt {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-3);
}
.sx-thanh__tt.is-ok {
  color: #2e7d5b;
}
.sx-thanh__tt.is-loi {
  color: #c0392b;
}
.sx-thanh__goc,
.sx-thanh__xong {
  padding: 8px 18px;
  font-size: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  transition: 0.2s var(--ease);
}
.sx-thanh__goc:hover {
  background: var(--bg);
  color: var(--text);
}
.sx-thanh__xong {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inv);
}
.sx-thanh__xong:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Đang sắp thì ô bìa thành thứ để kéo, không còn là nút mở bộ ảnh nữa.
   Tắt pointer-events ở thẻ <button> bên trong để cú chạm rơi xuống
   .album-slot — chỗ đang nghe sự kiện kéo. */
.dang-sap-xep .album-card {
  pointer-events: none;
}
.dang-sap-xep .bia-nut {
  display: none;
}
.dang-sap-xep .album-slot {
  cursor: grab;
  touch-action: none; /* để kéo dọc không bị hiểu thành cuộn trang */
  user-select: none;
}
.dang-sap-xep .album-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  pointer-events: none;
}
.album-slot.dang-keo-o {
  z-index: 40;
  cursor: grabbing;
  opacity: 0.94;
}
.album-slot.dang-keo-o .album-card__pic {
  border-color: var(--text);
  box-shadow: 0 24px 52px -18px rgba(31, 29, 26, 0.6);
}

/* Hai mũi tên dịch từng nấc — cho lúc chỉ cần đổi chỗ một bộ, và cho
   màn hình cảm ứng nhỏ nơi kéo thả hay trượt tay. Dải giữa để trống
   pointer-events cho còn chỗ mà kéo. */
.sx-mui {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.sx-mui__nut {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31, 29, 26, 0.72);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: 0.2s var(--ease);
}
.sx-mui__nut:hover {
  background: var(--accent-dark);
}

/* ---------- Bảng sửa kiểu chụp (chỉ chủ studio) ---------- */
.kc-lop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  padding: 24px;
  background: rgba(31, 29, 26, 0.55);
  backdrop-filter: blur(3px);
}
.kc-lop.is-open {
  display: grid;
  place-items: center;
}
.kc-hop {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: 100%;
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.kc-dau,
.kc-chan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.kc-chan {
  flex-wrap: wrap;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
.kc-dau > div:first-child {
  flex: 1;
}
.kc-goi {
  margin-top: 3px;
}
.kc-dong {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-3);
  padding: 4px 8px;
}
.kc-dong:hover {
  color: var(--text);
}
.kc-luoi {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px;
  padding: 18px 22px;
}
.kc-o {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-warm);
}
.kc-o__ty {
  display: block;
  aspect-ratio: 3 / 4;
}
.kc-o__ty img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kc-o__so {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(31, 29, 26, 0.75);
  color: #fff;
  font-size: 0.7rem;
}
/* Nhãn hiện tại nằm đè đáy ảnh, mỗi kiểu một màu để liếc là thấy chỗ
   nào máy gắn sai mà không phải đọc chữ */
.kc-o__nhan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 4px 6px;
  font-size: 0.68rem;
  text-align: center;
  color: #fff;
  background: rgba(31, 29, 26, 0.8);
}
.kc-o__nhan[data-nhan="phong-tron"] {
  background: rgba(46, 125, 91, 0.9);
}
.kc-o__nhan[data-nhan="ngoai-canh"] {
  background: rgba(38, 96, 148, 0.9);
}
.kc-o__nhan[data-nhan="trang-phuc-thuong"] {
  background: rgba(168, 96, 32, 0.92);
}
.kc-o.is-chon {
  border-color: var(--text);
}
.kc-o.is-chon .kc-o__ty img {
  opacity: 0.72;
}
.kc-dem {
  min-width: 130px;
}
.kc-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.kc-nut__mot {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-2);
  transition: 0.2s var(--ease);
}
.kc-nut__mot:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inv);
}
/* Hai nút cuối hàng làm việc khác hẳn mấy nút nhãn: một cái cất ảnh đi,
   một cái mang về. Tách hẳn màu và đẩy ra sau một quãng để không bấm
   nhầm lúc đang gắn kiểu chụp. */
.kc-nut__xoa,
.kc-nut__hien {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  transition: 0.2s var(--ease);
}
.kc-nut__xoa {
  margin-left: 12px;
  border-color: #b3261e;
  color: #b3261e;
}
.kc-nut__xoa:hover {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}
.kc-nut__hien {
  color: var(--text-3);
}
.kc-nut__hien:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inv);
}
/* Mở bảng bằng mục "Xoá ảnh" thì nút đỏ đứng hẳn lên, mấy nút nhãn lùi
   lại — vào đây là để bỏ ảnh, không phải để gắn kiểu chụp. */
.kc-lop.is-xoa .kc-nut__xoa {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}
.kc-lop.is-xoa .kc-nut__mot {
  opacity: 0.55;
}
.kc-lop.is-xoa .kc-nut__mot:hover {
  opacity: 1;
}
/* Nút xoá ngay trong khung xem ảnh lớn */
.lightbox__xoa {
  margin: 0 auto 0 16px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-size: 0.82rem;
  color: #fff;
  background: rgba(179, 38, 30, 0.85);
  transition: 0.2s var(--ease);
}
.lightbox__xoa:hover {
  background: #b3261e;
  border-color: #fff;
}
/* Ảnh đã xoá khỏi web: vẫn nằm trong bảng sửa nhưng xám hẳn đi, nhìn
   một cái là biết khách không thấy tấm này. */
.kc-o.is-an .kc-o__ty img {
  opacity: 0.28;
  filter: grayscale(1);
}
.kc-o.is-an {
  border-style: dashed;
  border-color: #b3261e;
}
.kc-o.is-an .kc-o__nhan {
  background: rgba(179, 38, 30, 0.92);
}
.kc-trangthai {
  width: 100%;
  font-size: 0.85rem;
  color: var(--text-3);
}
.kc-trangthai.is-ok {
  color: #2e7d5b;
}
.kc-trangthai.is-loi {
  color: #c0392b;
}
@media (max-width: 720px) {
  .kc-lop {
    padding: 10px;
  }
  .kc-luoi {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    padding: 12px 14px;
  }
  .kc-nut {
    margin-left: 0;
    width: 100%;
  }
}

/* Báo ngắn sau khi chép link */
.bia-bao {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 320;
  max-width: min(460px, calc(100vw - 32px));
  background: var(--text);
  color: var(--text-inv);
  padding: 13px 20px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s var(--ease);
}
.bia-bao.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* Ô link hiện khi trình duyệt không cho chép tự động */
.bia-bao__link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-inv);
  font-size: 0.82rem;
  text-align: center;
}

.bia-lop {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(18, 17, 16, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bia-lop.is-open {
  display: flex;
}
.bia-hop {
  background: var(--bg);
  border-radius: 4px;
  width: min(980px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.bia-dau {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.bia-ten {
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 500;
}
.bia-goi {
  margin-top: 2px;
}
.bia-dong {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-3);
  padding: 0 4px;
}
.bia-dong:hover {
  color: var(--text);
}
/* Thân bảng: bên trái khung xem trước, bên phải lưới ảnh để chọn */
.bia-than {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
.bia-trai {
  padding: 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Khung đúng tỉ lệ ô bìa ngoài trang (3/4) để thấy trước sẽ cắt ra sao.
   Cũng dựng tỉ lệ bằng padding, cùng lý do như .bia-o bên dưới. */
.bia-khung {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-warm);
  cursor: grab;
  touch-action: none;
}
.bia-khung::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}
.bia-khung.dang-keo {
  cursor: grabbing;
  border-color: var(--accent);
}
.bia-xem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  user-select: none;
  -webkit-user-drag: none;
}
.bia-dieukhien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bia-giua {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--text-2);
  white-space: nowrap;
}
.bia-giua:hover {
  border-color: var(--text);
  color: var(--text);
}

.bia-luoi {
  overflow-y: auto;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  align-content: start;
}
/* Dòng chia nhóm trong bảng chọn (bảng bìa video có hai nhóm: khung
   hình trong phim, và kho ảnh của trang). Chiếm trọn một hàng lưới. */
.bia-nhom {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--line);
}
.bia-nhom + .bia-o {
  margin-top: 2px;
}
/* Ô ảnh trong bảng chọn bìa.
   HAI ĐIỀU KHÔNG ĐƯỢC ĐỔI, đều đã trả giá bằng lỗi thật:
   1. `overflow: hidden` phải nằm ở lớp .bia-o__ty bên trong, KHÔNG đặt
      lên <button>. Đặt lên nút thì nút thôi giãn theo nội dung — cao
      đúng 18px trong khi ảnh cao 206px, cả lưới xẹp và ảnh chồng nhau.
   2. Tỉ lệ 3/4 dựng bằng padding-top của lớp bọc, không dùng
      aspect-ratio trên nút. */
.bia-o {
  position: relative;
  display: block;
  padding: 0;
  border-radius: var(--radius);
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s var(--ease);
}
.bia-o__ty {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 133.333%;
  overflow: hidden;
  border-radius: var(--radius);
}
.bia-o img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.bia-o:hover {
  outline-color: var(--line-strong);
}
.bia-o.is-chon {
  outline-color: var(--accent);
}
.bia-o.is-chon::after {
  content: "Ảnh bìa";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 3px;
  text-align: center;
}
.bia-o__so {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 2px;
}
.bia-chan {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bia-tudong {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--text-2);
}
.bia-tudong:hover {
  border-color: var(--text);
  color: var(--text);
}
.bia-trangthai {
  font-size: 0.88rem;
  color: var(--text-3);
}
.bia-trangthai.is-ok {
  color: #2e7d5b;
}
.bia-trangthai.is-loi {
  color: #c0392b;
}
/* Màn hình hẹp: xếp dọc, khung xem trước thu nhỏ nằm ngang trên cùng để
   nhường gần hết chiều cao cho lưới ảnh — chọn bìa là việc phải nhìn
   nhiều ảnh, lưới chật thì không chọn nổi. */
@media (max-width: 720px) {
  .bia-lop {
    padding: 12px;
  }
  .bia-hop {
    max-height: 94vh;
  }
  .bia-than {
    grid-template-columns: 1fr;
    /* minmax(0,1fr) bắt buộc: thiếu nó thì hàng lưới giãn theo nội dung
       thay vì cuộn, đẩy cả bảng dài ra và tràn khỏi màn hình. */
    grid-template-rows: auto minmax(0, 1fr);
  }
  .bia-trai {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
  }
  .bia-khung {
    width: 84px;
    flex: none;
  }
  .bia-dieukhien {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .bia-luoi {
    padding: 14px 16px;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    min-height: 0;
  }
  .bia-dau {
    padding: 14px 16px;
  }
  .bia-chan {
    padding: 12px 16px;
  }
}
/* Điện thoại hẹp: 2 cột cho ảnh đủ to mà nhìn */
@media (max-width: 400px) {
  .bia-luoi {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Lưới ảnh kiểu masonry — ảnh dọc và ngang xếp xen kẽ tự nhiên.
   Dùng trong trình xem bộ ảnh (.xembo__luoi). */
.masonry {
  columns: 4;
  column-gap: 14px;
}
.masonry__item {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 14px;
  break-inside: avoid;
  cursor: zoom-in;
  background: var(--bg-warm);
  overflow: hidden;
  border-radius: var(--radius);
  line-height: 0;
}
.masonry__item img {
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.masonry__item:hover img {
  transform: scale(1.04);
}
.masonry__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Băng feedback chạy ngang, đặt ngay dưới ảnh bìa ---- */
.feedback-band {
  /* Đủ thoáng để đọc ra là một mục riêng, không phải phần đuôi của ảnh
     bìa dính vào — mép trên giờ đã có đường kẻ phân tách */
  padding-block: 44px 60px;
  overflow: hidden; /* cắt phần dải tràn ra hai bên */
}
.feedback-band__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.feedback-band__note {
  margin: 0;
}

.feedback-rail {
  /* Mờ dần hai mép để dải trông như chạy ra ngoài màn hình */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.feedback-rail__track {
  display: flex;
  width: max-content;
  animation: feedback-chay 54s linear infinite;
  /* KHÔNG dùng gap ở đây. gap chỉ chèn khoảng hở GIỮA các ô nên tổng
     chiều dài thiếu đúng một khoảng hở, khiến mốc 50% lệch nửa gap và
     vòng lặp bị giật. Dùng margin-right để ô nào cũng có khoảng hở. */
  gap: 0;
}
/* Dịch đúng 50% vì nội dung được in hai lần — hết bản 1 là bản 2 khớp chỗ */
@keyframes feedback-chay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.feedback-rail:hover .feedback-rail__track,
.feedback-rail:focus-within .feedback-rail__track {
  animation-play-state: paused; /* rê chuột vào là dừng để đọc */
}
.feedback-rail .feedback-item {
  flex: 0 0 auto;
  width: 250px;
  margin-right: 18px;
}

@media (prefers-reduced-motion: reduce) {
  /* Người bật "giảm chuyển động" thì không chạy nữa, cho vuốt tay */
  .feedback-rail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .feedback-rail__track {
    animation: none;
  }
}

.feedback-item {
  display: block;
  padding: 0;
  width: 100%;
  cursor: zoom-in;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-warm);
  line-height: 0;
  transition: 0.3s var(--ease);
}
.feedback-item img {
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}
.feedback-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.feedback-item:hover img {
  transform: scale(1.03);
}
.feedback-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.gallery-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}
.gallery-info .h3 {
  margin-bottom: 16px;
}
.gallery-info p {
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.spec-list {
  border-top: 1px solid var(--line);
  margin-top: 28px;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.spec-list dt,
.spec-list .k {
  color: var(--text-3);
}
.spec-list .v {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.grid-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.photo {
  cursor: zoom-in;
  transition: 0.4s var(--ease);
}
.photo:hover {
  transform: translateY(-4px);
}
.photo:hover .ph {
  border-color: var(--accent);
}

.note-box {
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  font-size: 0.9rem;
  color: var(--text-2);
}
.note-box strong {
  color: var(--text);
}

/* ============================================================
   LƯỚI GIÁ TRỊ / DỊCH VỤ
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.value {
  background: var(--bg);
  padding: 40px 32px;
}
.value__num {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 18px;
}
.value h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.value p {
  font-size: 0.9rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service {
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: 0.35s var(--ease);
}
.service:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -28px rgba(31, 29, 26, 0.4);
}
.service .ph,
.service__pic {
  aspect-ratio: 3 / 2;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-warm);
}
.service__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Khung này là khổ ngang. Nếu ảnh thả vào là khổ dọc thì phải cắt
     bớt chiều cao — cắt từ trên xuống để giữ được mặt người, chứ cắt
     giữa (mặc định) sẽ mất đầu. */
  object-position: center top;
  transition: transform 0.6s var(--ease);
}
.service:hover .service__pic img {
  transform: scale(1.05);
}

/* Dịch vụ chưa có ảnh minh hoạ — nền trơn có tên studio, tuyệt đối
   không để lộ tên file kỹ thuật ra cho khách xem.
   Thả ảnh đúng tên vào images/ là ảnh tự đè lên nền này. */
.service__pic--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-warm) 100%);
}
.service__pic--empty span {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--line-strong);
}
.service__pic--empty img {
  position: absolute;
  inset: 0;
}
.service__pic--empty {
  position: relative;
}
.service__body {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.service p {
  font-size: 0.9rem;
  flex: 1;
}
.service__price {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--accent-dark);
  font-weight: 500;
}

/* ============================================================
   BẢNG GIÁ
   ============================================================ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.price-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: 0.35s var(--ease);
}
.price-card:hover {
  border-color: var(--line-strong);
}
.price-card--featured {
  border-color: var(--text);
  box-shadow: 0 24px 60px -40px rgba(31, 29, 26, 0.55);
}
.price-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--text);
  color: var(--text-inv);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 18px;
  white-space: nowrap;
}
.price-card__tag {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.price-card h3 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 400;
  margin-bottom: 6px;
}
.price-card__amount {
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--accent-dark);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.price-card ul {
  flex: 1;
  margin-bottom: 30px;
}
.price-card li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}
.price-card li:last-child {
  border-bottom: 0;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.price-card li span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-3);
}

/* Bảng so sánh */
.compare-toggle {
  text-align: center;
  margin-top: 56px;
}
.compare-wrap {
  margin-top: 40px;
  display: none;
}
.compare-wrap.is-open {
  display: block;
  animation: fadeUp 0.45s var(--ease);
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--bg);
}
.compare-table {
  min-width: 900px;
  font-size: 0.85rem;
}
.compare-table th,
.compare-table td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--bg-soft);
  font-weight: 500;
  color: var(--text);
  font-size: 0.8rem;
  position: sticky;
  top: 0;
}
.compare-table thead th small {
  display: block;
  color: var(--accent-dark);
  font-weight: 500;
  margin-top: 3px;
}
.compare-table tbody th {
  font-weight: 400;
  color: var(--text-3);
  width: 190px;
  background: var(--bg-soft);
}
.compare-table .row-group td,
.compare-table .row-group th {
  background: var(--accent-soft);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-block: 10px;
}
.compare-table td small {
  display: block;
  color: var(--text-3);
  font-size: 0.78rem;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.info-card {
  background: var(--bg-soft);
  padding: 28px;
  border: 1px solid var(--line);
}
.info-card h4 {
  font-size: 0.98rem;
  margin-bottom: 10px;
}
.info-card p {
  font-size: 0.875rem;
}

/* ============================================================
   QUY TRÌNH
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.step {
  padding: 40px 26px 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.step:last-child {
  border-right: 0;
}
.step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.step__num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--line-strong);
  line-height: 1;
  margin-bottom: 16px;
}
.step h3 {
  font-size: 1.02rem;
  margin-bottom: 10px;
}
.step p {
  font-size: 0.875rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-size: 1rem;
  color: var(--text);
  transition: color 0.25s;
}
.faq-q:hover {
  color: var(--accent-dark);
}
.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  margin-top: 6px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: 0.3s var(--ease);
}
.faq-icon::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 1px;
}
.faq-icon::after {
  top: 0;
  left: 9px;
  width: 1px;
  height: 20px;
}
.faq-item.is-open .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-a p {
  padding-bottom: 26px;
  font-size: 0.94rem;
  max-width: 68ch;
}

/* ============================================================
   CẢM NHẬN
   ============================================================ */
.rating-block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 30px;
  border: 1px solid var(--line);
  background: var(--bg);
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.rating-block__score {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--text);
  line-height: 1;
}
.stars {
  color: var(--accent);
  letter-spacing: 3px;
  font-size: 0.95rem;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.review p {
  font-size: 0.94rem;
  flex: 1;
  margin: 16px 0 24px;
  color: var(--text-2);
}
.review__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.review__name {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.review__meta {
  font-size: 0.78rem;
  color: var(--text-3);
}

/* ============================================================
   CTA & LIÊN HỆ
   ============================================================ */
.cta {
  text-align: center;
}
.cta .h2 {
  margin-bottom: 18px;
}
.cta .lead {
  margin-inline: auto;
  margin-bottom: 36px;
  color: #b8b1a7;
}
.cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.contact-list {
  border-top: 1px solid var(--line);
}
.contact-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list .k {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.contact-list .v {
  font-size: 1.02rem;
  color: var(--text);
}
.contact-list a.v:hover {
  color: var(--accent);
}
.contact-list .v--big {
  font-family: var(--font-serif);
  font-size: 1.8rem;
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Form */
.form {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 40px;
}
.form h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 28px;
}
.field {
  margin-bottom: 20px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.field label .req {
  color: var(--accent);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: var(--radius);
  font-size: 0.94rem;
  transition: 0.25s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  background: var(--bg);
}
.field textarea {
  resize: vertical;
  min-height: 96px;
}
.field input.is-error,
.field select.is-error {
  border-color: #c0554a;
  background: #fdf5f4;
}
/* Trên iPhone, chạm vào ô nhập có cỡ chữ DƯỚI 16px là Safari tự phóng
   to cả trang lên — khách đang điền thì màn hình giật một cái, chữ vọt
   ra ngoài, phải chụm tay thu lại mới điền tiếp. Ép đúng 16px ở màn
   hình hẹp là hết. Đặt quy tắc ngay đây, sau khối .field bên trên, vì
   để ở chỗ khác trong file thì bị mấy dòng trên đè mất. */
@media (max-width: 520px) {
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
}
.form__note {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 16px;
  text-align: center;
}
/* Hai khung thông báo sau khi bấm gửi: nhận được và chưa gửi được.
   Khung lỗi phải nổi hơn khung thành công — khách đọc lướt, nếu nhìn
   nhầm thành "đã gửi xong" là mất khách thật. */
.form__msg {
  display: none;
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--accent-dark);
  margin-bottom: 20px;
}
.form__msg.is-visible {
  display: block;
}
.form__msg strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}
.form__msg--err {
  background: #fdf1ee;
  border-left-color: #c2582f;
  color: #8c4322;
}
.form__msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.form__msg-actions .btn {
  padding: 10px 18px;
  font-size: 0.8rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-dark);
  color: #948d84;
  padding-block: 72px 32px;
  font-size: 0.875rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .brand__name {
  color: var(--text-inv);
}
.footer h4 {
  color: var(--text-inv);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.footer li {
  margin-bottom: 11px;
}
.footer a:hover {
  color: var(--text-inv);
}
.footer__bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #6d675f;
}

/* Lối vào cho chủ studio, đặt ở thanh tiêu đề. Để nhạt và nhỏ hơn mục
   menu: khách có nhìn thấy cũng không bận tâm, mà chủ studio thì biết
   chỗ mà bấm. Màn hình hẹp giấu đi, vì đã có trong menu ba gạch. */
.header__login {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--text-3);
  text-decoration: none;
  padding: 6px 2px;
  transition: color 0.25s var(--ease);
}
.header__login:hover {
  color: var(--text);
}
.mobile-menu__login {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-3);
  text-decoration: none;
}

/* Thẻ nhỏ nổi ở góc khi đang mở khoá sửa — để khỏi quên là mình đang ở
   chế độ sửa, và có sẵn nút khoá lại khi dùng máy lạ. */
.dau-sua {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #fff;
  background: rgba(31, 29, 26, 0.82);
  box-shadow: 0 12px 30px -14px rgba(31, 29, 26, 0.7);
  backdrop-filter: blur(6px);
}
.dau-sua__cham {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7fd18b;
}
.dau-sua a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 560px) {
  /* Nhường chỗ cho nút gọi nổi bên phải */
  .dau-sua {
    left: 12px;
    bottom: 12px;
    font-size: 0.76rem;
    padding: 6px 10px;
  }
}

/* ============================================================
   NÚT NỔI + LIGHTBOX
   ============================================================ */
.floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* Nép phải: bảng tư vấn rộng hơn nút nhiều, không nép thì cả cụm nút
     bị kéo giãn ra và ba nút tròn dạt sang trái */
  align-items: flex-end;
  gap: 12px;
}
.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--text-inv);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
  transition: 0.3s var(--ease);
}
.fab:hover {
  transform: scale(1.08);
  background: var(--accent-dark);
}
.fab--zalo {
  background: #0068ff;
}
.fab--zalo:hover {
  background: #0055d4;
}
.fab svg {
  width: 22px;
  height: 22px;
}
.fab span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Lắc nhẹ cho mắt khách bắt được nút gọi.
   Lắc chưa tới nửa giây rồi đứng yên 4 giây — đủ gây chú ý mà không
   làm phiền người đang đọc. Biên độ giảm dần như quả lắc hết đà.
   Hai nút lệch pha nhau nên không bao giờ lắc cùng lúc.
   Người bật "giảm chuyển động" của hệ điều hành sẽ không thấy hiệu ứng
   này — đã xử lý ở khối prefers-reduced-motion cuối file. */
@keyframes fabLac {
  0%,
  12%,
  100% {
    transform: rotate(0deg);
  }
  2% {
    transform: rotate(-7deg);
  }
  4% {
    transform: rotate(6deg);
  }
  6% {
    transform: rotate(-4deg);
  }
  8% {
    transform: rotate(2.5deg);
  }
  10% {
    transform: rotate(-1deg);
  }
}
.fab {
  animation: fabLac 4.5s var(--ease) infinite;
}
.fab--zalo {
  animation-delay: 0.6s;
}
#fabCall {
  animation-delay: 2.85s;
}
/* Nút tư vấn to hơn hai nút kia một chút vì đây là việc bên mình muốn
   khách làm nhất. Lắc trước cả hai nút còn lại cho bắt mắt. */
.fab--tuvan {
  width: 64px;
  height: 64px;
  animation-delay: 0s;
}
.fab--tuvan span {
  font-size: 0.66rem;
  letter-spacing: 0.01em;
}
.fab--tuvan.is-open {
  background: var(--accent-dark);
  animation: none;
}
/* Đang chạm vào hoặc đã mở bảng hotline thì thôi lắc, tránh nút giật
   ngay lúc khách định bấm. */
.fab:hover,
.fab:focus-visible,
#fabCall.is-open {
  animation: none;
}

/* ---------- Bảng tư vấn mở từ nút nổi ----------
   Nằm ngay trong cụm nút nên tự xếp phía trên ba nút tròn, không phải
   tính toạ độ tay. Rộng vừa phải, cao theo nội dung. */
.tuvan {
  width: min(300px, calc(100vw - 40px));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 22px 50px -18px rgba(31, 29, 26, 0.45);
  padding: 16px 16px 18px;
  animation: tuvanHien 0.28s var(--ease);
}
@keyframes tuvanHien {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.tuvan__dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tuvan__dau strong {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.tuvan__dong {
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 4px;
  color: var(--text-3);
}
.tuvan__dong:hover {
  color: var(--text);
}
/* Trong bảng thì form không cần bó bề ngang nữa — bảng đã hẹp sẵn */
.tuvan .form-nhanh {
  max-width: none;
}
.tuvan .form-nhanh button[type="submit"] {
  width: 100%;
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Bảng chọn hotline khi bấm nút gọi nổi */
.fab-menu {
  position: absolute;
  right: 0;
  /* Phải nằm trên toàn bộ cụm nút, không phải cách đáy một khoảng cố định
     — nếu không sẽ đè lên nút Zalo. */
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.28s var(--ease);
}
.fab-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fab-opt {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 190px;
  text-align: right;
  box-shadow: 0 14px 32px -18px rgba(31, 29, 26, 0.55);
  transition: 0.25s var(--ease);
}
.fab-opt:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fab-opt span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fab-opt strong {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
#fabCall.is-open {
  background: var(--accent-dark);
}

/* ---------- Bảng mời theo dõi Fanpage ----------
   z-index cao hơn cả lightbox: đây là lớp chặn, không được để thứ gì
   nổi lên trên nó. */
.fbmoi {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(18, 17, 16, 0.78);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fbmoiHien 0.4s var(--ease);
}
.fbmoi[hidden] {
  display: none;
}
@keyframes fbmoiHien {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fbmoi__hop {
  position: relative;
  background: var(--bg);
  border-radius: 4px;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 34px 30px 28px;
  text-align: center;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.7);
  animation: fbmoiLen 0.45s var(--ease);
}
@keyframes fbmoiLen {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fbmoi__hop h3 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
  margin-top: 6px;
}
.fbmoi__loi {
  margin-top: 12px;
  font-size: 0.95rem;
}
.fbmoi__khung {
  margin: 22px auto 0;
  min-height: 214px;
  display: flex;
  justify-content: center;
  /* Nền nhạt để lúc khung Facebook đang tải không bị hụt một mảng trắng */
  background: var(--bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Nút dẫn sang Facebook — màu xanh Facebook cho khách nhận ra ngay */
.fbmoi__fb {
  display: block;
  margin-top: 18px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: #0866ff;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 500;
  transition: 0.25s var(--ease);
}
.fbmoi__fb:hover {
  background: #0653cc;
}

.fbmoi__vao {
  margin-top: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--text-inv);
  font-size: 0.98rem;
  transition: 0.25s var(--ease);
}
.fbmoi__vao:hover {
  background: var(--accent-dark);
}
/* Chỉ xuất hiện sau khi khách bấm thích — hiện ra êm, không giật */
.fbmoi__vao[hidden] {
  display: none;
}
.fbmoi__vao:not([hidden]) {
  animation: fbmoiLen 0.4s var(--ease);
}
.fbmoi__dong[hidden] {
  display: none;
}
.fbmoi__dong {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-3);
  padding: 4px;
}
.fbmoi__dong:hover {
  color: var(--text);
}
@media (max-width: 480px) {
  .fbmoi__hop {
    padding: 30px 20px 22px;
  }
  .fbmoi__hop h3 {
    font-size: 1.35rem;
  }
}

/* ============================================================
   TRÌNH XEM BỘ ẢNH — lớp phủ kín màn hình
   Thay cho cách cũ: bấm ô bìa thì lưới ảnh dựng ngay dưới hàng ô bìa
   rồi trang cuộn xuống đó. Bộ nào cũng dài, xem xong khách phải kéo
   ngược lên đầu mới chọn được bộ khác.

   Ba tầng xếp dọc, chỉ tầng giữa cuộn:
     .xembo__dau  tên bộ + nút đóng      (đứng yên)
     .xembo__dai  dải ô bìa các bộ khác  (đứng yên, cuộn ngang)
     .xembo__than lưới ảnh               (cuộn dọc)
   Nhờ vậy lối sang bộ khác lúc nào cũng nằm trong tầm mắt.

   z-index 150: trên header (100) và nút nổi (90), dưới lightbox (200).
   ============================================================ */
.xembo {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease),
    transform 0.28s var(--ease);
}
.xembo.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Tầng trên: tên bộ ----------
   Chỉ còn hai cột: tên bộ và nút đóng. Nút "quay lại" từng đứng ở cột
   đầu, nhưng trên điện thoại nó lấn vào tên bộ — chữ cái đầu của tên và
   của dòng phụ bị khuất sau nút. Giờ nó thành nút nổi ở góc dưới trái
   (xem .xembo__quay bên dưới), tên bộ được trọn bề ngang. */
.xembo__dau {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Nút quay lại lưới chọn bộ ----------
   Nổi ở GIỮA MÉP PHẢI, cuộn tới đâu vẫn thấy. Trước đây nút nằm ở góc
   dưới trái, nhưng chỗ đó bị thanh báo "Đang mở khoá sửa" của chủ studio
   che mất — đại ca không bấm được. Mép phải giữa màn hình thì không thứ
   gì đè lên, mà vẫn nằm trong tầm ngón cái khi cầm điện thoại.

   Nền đen chữ trắng: nổi hẳn trên nền ảnh cưới (tông sáng, nhiều váy
   trắng) — bản màu hồng cũ chìm vào mấy tấm phông hồng. */
.xembo__quay {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  border: 1px solid var(--text);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--text);
  white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
  transition: 0.2s var(--ease);
}
.xembo__quay:hover {
  background: #000;
  border-color: #000;
}
.xembo__quay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.xembo__quay-mui {
  font-size: 1.05rem;
  line-height: 1;
}
/* Nút quay lại đã dời sang mép phải nên đáy không phải chừa chỗ nữa —
   chừa 96px là dưới hàng ảnh cuối hở ra một mảng trống */
.xembo:not(.xembo--luoi-bo) .xembo__than {
  padding-bottom: 24px;
}
.xembo__ten-bo {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xembo__ten-so {
  display: block;
  margin-top: 1px;
  font-size: 0.78rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xembo__dong {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--text-3);
  transition: 0.2s var(--ease);
}
.xembo__dong:hover {
  background: var(--bg-warm);
  color: var(--text);
}

/* ---------- Dải ô bìa các bộ khác ----------
   Đây là phần gỡ đúng cái mất thì giờ: đổi bộ ngay tại chỗ, không phải
   đóng ra rồi kéo ngược lên đầu trang. */
.xembo__dai {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.xembo__o {
  flex: 0 0 auto;
  width: 76px;
  padding: 0;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.2s var(--ease);
}
.xembo__o:hover,
.xembo__o.is-chon {
  opacity: 1;
}
.xembo__o-anh {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-warm);
  transition: 0.2s var(--ease);
}
.xembo__o-anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.xembo__o-ten {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.32;
  color: var(--text-2);
}
.xembo__o.is-chon .xembo__o-anh {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--text);
}
.xembo__o.is-chon .xembo__o-ten {
  color: var(--text);
  font-weight: 500;
}
.xembo__o:focus-visible .xembo__o-anh {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Tầng giữa: lưới ảnh ---------- */
.xembo__than {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 24px 44px;
}
/* Lời nhắc để ở đây chứ không nhét vào dòng phụ trên đầu: trên điện
   thoại dòng đó chỉ vừa một hàng, thêm chữ là bị cắt cụt. */
.xembo__goi {
  max-width: 68ch;
  margin-bottom: 22px;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* Hàng lọc kiểu chụp trong lớp phủ dùng chung lớp .loc-kieu với hàng
   dưới trang. .loc-kieu đặt display:flex nên thuộc tính hidden của HTML
   bị đè mất — phải nói lại ở đây, không thì mục chưa gắn nhãn vẫn chừa
   một khoảng trống. */
.xembo__loc[hidden] {
  display: none;
}

/* ---------- Chế độ chọn bộ ----------
   Bấm ô mục ở đầu trang là ra thẳng lưới này, không cuộn xuống thư viện
   nữa. Ô bìa dùng lại lớp .album-card của hàng ô bìa dưới trang nên hai
   nơi trông y hệt; ở đây chỉ cần phần khung lưới. */
.xembo__bo {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
}
.xembo--luoi-bo .xembo__bo {
  display: grid;
}
/* Chế độ chọn bộ thì giấu hết những thứ chỉ có nghĩa khi đang xem một
   bộ: dải ô bìa, lưới ảnh, chân trang, và nút "← Tất cả bộ ảnh" (đang
   đứng ở đó rồi, quay đi đâu nữa) */
.xembo--luoi-bo .xembo__dai,
.xembo--luoi-bo .xembo__luoi,
.xembo--luoi-bo .xembo__chan,
.xembo--luoi-bo .xembo__quay {
  display: none;
}

/* ---------- Chế độ video trong lớp phủ ----------
   Bấm ô "Video phóng sự cưới" ở đầu trang mở thẳng vào đây, cùng lối
   với các mục ảnh. Giấu mọi thứ chỉ có nghĩa với ảnh: dải ô bìa, lưới
   ảnh, chân trang mời sang bộ kế, và nút quay lại (không có mục ảnh
   nào phía sau để mà quay về). */
.xembo__video {
  display: none;
}
.xembo--video .xembo__video {
  display: grid;
}
.xembo--video .xembo__dai,
.xembo--video .xembo__luoi,
.xembo--video .xembo__bo,
.xembo--video .xembo__chan,
.xembo--video .xembo__quay {
  display: none;
}
/* Chân trang đã giấu nên không cần chừa chỗ cho nó nữa. Viết kèm .xembo
   cho đủ sức đè quy tắc chừa 96px ở trên — quy tắc đó nhắm mọi chế độ
   trừ lưới chọn bộ, nên chế độ video cũng dính. */
.xembo.xembo--video .xembo__than {
  padding-bottom: 32px;
}

/* Cuối bộ: mời sang bộ kế tiếp ngay tại chỗ, khỏi kéo ngược lên */
.xembo__chan {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.xembo__chan-chu {
  margin-bottom: 20px;
  color: var(--text-2);
}
.xembo__chan-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Cửa sổ thấp (laptop nhỏ, điện thoại xoay ngang): dải ô bìa phải gọn
   lại, không thì đầu trang với dải ô chiếm gần hết chỗ, còn lại một
   khe hẹp cho ảnh. */
@media (max-height: 620px) {
  .xembo__dai {
    padding-block: 8px;
  }
  .xembo__o {
    width: 54px;
  }
  .xembo__o-ten {
    -webkit-line-clamp: 1;
    margin-top: 4px;
    font-size: 0.68rem;
  }
}

@media (max-width: 720px) {
  .xembo__dau {
    gap: 10px;
    padding: 10px 14px;
  }
  /* Nút nổi ở giữa mép phải, không tranh chỗ với tên bộ nên giữ nguyên
     chữ — mỗi mũi tên trơ trọi thì khách phải đoán */
  .xembo__quay {
    right: 12px;
    padding: 11px 18px 11px 14px;
  }
  .xembo:not(.xembo--luoi-bo) .xembo__than {
    padding-bottom: 24px;
  }
  /* Chế độ video không có chân trang lẫn nút quay lại nên đừng chừa chỗ
     — chừa 88px là dưới video cuối cùng hở ra một mảng trống */
  .xembo.xembo--video .xembo__than {
    padding-bottom: 24px;
  }
  .xembo__dai {
    gap: 8px;
    padding: 10px 14px;
  }
  .xembo__o {
    width: 62px;
  }
  .xembo__than {
    padding: 16px 14px 36px;
  }
  .xembo__bo {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .xembo__goi {
    margin-bottom: 18px;
    font-size: 0.86rem;
  }
  /* Mô tả mục dài bốn dòng trên điện thoại, cộng hàng nút lọc nữa là đẩy
     ô bìa đầu tiên gần khỏi màn hình. Giấu đi, giữ lại câu nhắc ngắn —
     mô tả vẫn còn nguyên ở phần thư viện dưới trang. */
  .xembo__goi-dai {
    display: none;
  }
  /* Chữ "Kiểu chụp" chiếm gần nửa hàng đầu mà tên các nút đã tự nói rõ */
  .xembo__loc .loc-kieu__nhan {
    display: none;
  }
  .xembo__chan-nut .btn {
    flex: 1 1 100%;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #121110;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
/* flex + min-height:0 + overflow:hidden — cách duy nhất giữ chắc
   cho ảnh cao luôn vừa khung, không đè lên thanh chú thích. */
.lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 76px 12px;
  overflow: hidden;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.9);
}
.lightbox__stage img.is-ready {
  opacity: 1;
}
/* Ảnh chụp màn hình: chạm để xem ở kích thước gốc rồi cuộn đọc */
.lightbox__stage.can-zoom img {
  cursor: zoom-in;
}
.lightbox__stage.is-zoomed {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 56px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.lightbox__stage.is-zoomed img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
  box-shadow: none;
}
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px 22px;
  color: #8d857a;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  color: #cfc7bb;
  display: grid;
  place-items: center;
  transition: 0.25s var(--ease);
}
.lightbox__close {
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 1.9rem;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 2.4rem;
  line-height: 1;
  border-radius: 50%;
}
.lightbox__nav--prev {
  left: 12px;
}
.lightbox__nav--next {
  right: 12px;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   MÀN HÌNH CẢM ỨNG — tắt hiệu ứng phóng to khi rê chuột
   Điện thoại không có chuột để rê, nhưng trình duyệt vẫn gán trạng thái
   :hover cho thứ vừa bị ngón tay chạm vào, và giữ nguyên tới khi chạm
   chỗ khác. Kèm transition 0.6s thành ra: chạm vào ô nào là ô đó từ từ
   phình lên rồi lát sau tự xẹp — nhìn như ảnh bị lỗi.

   Chỉ tắt phần PHÓNG TO. Các hiệu ứng đổi màu viền, đổi nền vẫn giữ vì
   chúng không làm ảnh nhảy kích thước.
   ============================================================ */
@media (hover: none) {
  .hero-muc__o:hover .hero-muc__anh img,
  .album-card:hover .album-card__pic img,
  .masonry__item:hover img,
  .feedback-item:hover img,
  .service:hover .service__pic img,
  .service:hover,
  .photo:hover,
  .fab:hover {
    transform: none;
  }
}

/* ============================================================
   HIỆU ỨNG CUỘN
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  :root {
    --section-y: 88px;
  }
  .value-grid,
  .service-grid,
  .info-cards,
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-photos {
    grid-template-columns: repeat(3, 1fr);
  }
  .masonry {
    columns: 3;
  }
  .gallery-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .step {
    border-bottom: 1px solid var(--line);
    padding-bottom: 32px;
  }
  .price-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .price-card--featured {
    order: -1;
  }
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 1240px) {
  /* Hết chỗ cho 2 hotline cạnh menu — giữ lại số dịch vụ hình ảnh */
  .header__phone + .header__phone {
    display: none;
  }
}

@media (max-width: 1080px) {
  /* Hẹp hơn nữa thì bỏ luôn số, tránh menu bị xuống dòng.
     Khách vẫn gọi được bằng nút nổi và mục Liên hệ. */
  .header__phones {
    display: none;
  }
  .nav {
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .nav,
  .header__phones,
  .header__login {
    /* Lối vào của chủ studio chuyển xuống cuối menu ba gạch */
    display: none;
  }
  .burger {
    display: flex;
  }
  .header__cta .btn {
    display: none;
  }
  /* Chỗ menu vừa nhường ra: đặt nút đi thẳng vào Messenger fanpage.
     Phải ghi đè rule ẩn ngay bên trên nên cần selector cụ thể hơn. */
  .header__cta .btn.header__book {
    display: inline-flex;
    padding: 11px 20px;
    font-size: 0.88rem;
    white-space: nowrap;
  }
  .hero {
    min-height: auto;
    padding-top: 120px;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero__body {
    padding-block: 0 20px;
  }
  .hero__media {
    max-width: 520px;
  }
}

/* Điện thoại hẹp (dưới 420px): nút đủ chữ chiếm 138px, ép tên studio
   xuống 3 dòng. Bỏ chữ "ngay" và thu gọn khoảng đệm để logo đủ chỗ
   nằm một dòng — tên thương hiệu quan trọng hơn một chữ thừa. */
@media (max-width: 420px) {
  .header__inner {
    gap: 12px;
  }
  .header__cta .btn.header__book {
    padding: 9px 14px;
    font-size: 0.82rem;
  }
  .header__book span {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --section-y: 68px;
    --gutter: 20px;
  }
  .section-head {
    margin-bottom: 40px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    padding: 20px 0;
  }
  .stat__num {
    margin-bottom: 0;
  }
  .value-grid,
  .service-grid,
  .info-cards,
  .review-grid,
  .steps {
    grid-template-columns: 1fr;
  }
  .grid-photos {
    grid-template-columns: repeat(2, 1fr);
  }
  .masonry {
    columns: 2;
    column-gap: 10px;
  }
  .masonry__item {
    margin-bottom: 10px;
  }
  .lightbox__stage {
    padding: 56px 12px 8px;
  }
  .lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.08);
  }
  .lightbox__nav--prev {
    left: 6px;
  }
  .lightbox__nav--next {
    right: 6px;
  }
  .lightbox__bar {
    padding: 10px 16px 18px;
    font-size: 0.75rem;
  }
  .album-cards {
    /* Điện thoại: 2 ô mỗi hàng */
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 32px;
  }
  .feedback-band {
    padding-block: 32px 44px;
  }
  .feedback-rail .feedback-item {
    width: 190px;
    margin-right: 12px;
  }
  .album-card__name {
    margin-top: 10px;
    font-size: 0.98rem;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form {
    padding: 28px 22px;
  }
  .value {
    padding: 30px 24px;
  }
  .price-card {
    padding: 34px 24px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
  /* 8 danh mục ảnh không thể lọt hết bề ngang điện thoại — dải tab rộng
     gấp gần 4 lần màn hình. Bóng mờ ở hai mép cho khách biết còn cuộn
     được, nếu không 6 danh mục phía sau coi như vô hình.
     background-attachment:local khiến bóng tự mất khi cuộn tới đầu hoặc
     cuối dải, không cần JavaScript. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--bg) 40%, rgba(255, 255, 255, 0)) left center,
      linear-gradient(to left, var(--bg) 40%, rgba(255, 255, 255, 0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(31, 29, 26, 0.16), rgba(31, 29, 26, 0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(31, 29, 26, 0.16), rgba(31, 29, 26, 0)) right center;
    background-size: 40px 100%, 40px 100%, 15px 100%, 15px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    padding: 12px 12px;
    font-size: 0.98rem;
  }
  /* Số đếm giữ lại trên điện thoại: đằng nào dải tab cũng phải cuộn, mà
     con số ("950", "366") cho khách thấy ngay kho ảnh dày tới đâu. */
  .tab em {
    margin-left: 4px;
  }
  .floating {
    right: 14px;
    bottom: 14px;
  }
  .hero__actions .btn,
  .cta__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Thanh báo hết phiên mở khoá ----------
   Đứng yên ở đầu màn hình cho tới khi chủ studio bấm, KHÔNG tự tắt.
   Bản cũ chỉ báo bằng thanh trôi 2,8 giây nên đại ca bấm lưu ảnh bìa,
   thấy thoáng qua rồi tưởng đã lưu — mà thật ra máy chủ đã từ chối. */
.het-phien {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  padding: 12px 16px;
  font-size: 0.92rem;
  color: #fff;
  background: #b3261e;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
}
.het-phien b {
  font-weight: 600;
}
.het-phien a {
  padding: 6px 14px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.het-phien a:hover {
  background: #fff;
  color: #b3261e;
}