/* ===== block: base ===== */
/* BASE — nền tảng dùng chung cho mọi viên gạch: biến màu, reset, container,
   nút bấm, section wrapper. Luôn được nạp đầu tiên, không tự xóa được. */
:root {
  --color-bg: #0b0d12;
  --color-surface: #12151c;
  --color-surface-alt: #171b24;
  --color-text: #eef0f4;
  --color-text-muted: #9aa2b1;
  --color-primary: #ff5a1f;
  --color-primary-hover: #e34f19;
  /* Vàng dùng để làm nổi một câu chữ trên nền tối. Cùng tông với viền vàng
     lúc focus bằng bàn phím nên cả site vẫn thống nhất một màu nhấn. */
  --color-highlight: #ffd54f;
  --radius: 12px;
  --container-width: 1120px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* Ảnh responsive có width/height HTML để trình duyệt giữ chỗ trước khi tải.
   height:auto bắt buộc để khi CSS thu width theo container, chiều cao cũng
   co theo đúng tỷ lệ thay vì giữ nguyên số pixel từ thuộc tính height. */
img { max-width: 100%; height: auto; display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #ffd54f;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: #fff;
  color: #111;
  border-radius: 8px;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

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

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.btn-lg { padding: 14px 30px; font-size: 1.05rem; }

/* Chỉ padding phía trên — khoảng cách giữa 2 block do padding-top của block
   SAU quyết định, không cộng dồn với padding-bottom của block trước nữa
   (trước đây 2 block liền nhau bị cộng dồn khoảng trắng, nhìn rời rạc). */
.section { padding: 20px 0 0; }
.section-alt { background: var(--color-surface); }
.section h2 { font-size: 1.9rem; margin: 0 0 16px; }

/* video-chu ngay sau đó là khoet-chu — cả 2 đều là khối full-ảnh/video, muốn
   dính khít liền mạch (không hở viền đen 20px như khoảng cách block thường)
   bất kể trang nào. Áp dụng bằng quan hệ anh em liền kề, không phải class
   riêng, nên tự động đúng mọi chỗ 2 block này đứng cạnh nhau. */
.section:has(.video-chu-box) + .section:has(.khoet-chu-box) { padding-top: 0; }

.section-title-center {
  text-align: center;
  font-size: 1.9rem;
  margin: 0 0 20px;
}

/* Tuỳ chọn màu chữ cho từng đoạn văn/mục — chọn trong admin qua field "select".
   Dùng !important vì các block (vd .split-text p) có rule màu riêng với độ đặc
   trưng (specificity) cao hơn 1 class đơn, nếu không sẽ bị đè mất màu vàng. */
.text-yellow { color: #ffd54f !important; }
.text-red { color: #ff5252 !important; }

/* Vimeo luôn khởi động ở trạng thái câm để autoplay không bị trình duyệt
   chặn. Chỉ block được Admin chọn vimeo_sound=on mới render nút này. */
.vimeo-sound-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  background: rgb(8 10 14 / 78%);
  color: #fff;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(7px);
}

.vimeo-sound-toggle:hover,
.vimeo-sound-toggle:focus-visible {
  border-color: #ff6a32;
  color: #ff8a60;
}

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

/* GẮN LINK VÀO BLOCK — dùng chung cho mọi block, để một block bất kỳ có thể
   đóng vai "một chiếc máy" ở trang chủ mà không cần đẻ block riêng.
   Ảnh đã bọc link thì mang aria-hidden + tabindex="-1" nên người dùng phím Tab
   và trình đọc màn hình không phải đi qua hai lần cùng một đích. */
.link-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}

.link-media img { transition: transform 0.25s ease; }
.link-media:hover img { transform: scale(1.03); }

.link-title {
  color: inherit;
  text-decoration: none;
}

.link-title:hover,
.link-title:focus-visible { color: var(--color-primary); }

.block-cta {
  align-self: flex-start;
  margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .link-media:hover img { transform: none; }
}


/* ===== block: header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 13, 18, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Trên desktop, kéo logo + menu + nút vào giữa thành 1 cụm, giống SafeBuy,
   thay vì logo bám trái / menu bám phải. Mobile giữ space-between vì chỉ
   còn logo + nút, bám 2 mép là hợp lý hơn. */
@media (min-width: 841px) {
  .header-inner { justify-content: center; gap: 48px; }
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 41px;
  width: auto;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-toggle {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
}

.site-header nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.site-header nav a:hover { color: var(--color-primary); }

.nav-divider {
  width: 1px;
  height: 18px;
  background: #ffffff;
  opacity: 0.5;
}

/* Màn hình hẹp và tablet: chuyển toàn bộ link vào menu thu gọn để không ép
   logo/menu trên một hàng. Không ẩn mục nào; thứ tự vẫn theo các block. */
@media (max-width: 840px) {
  .header-inner { position: relative; }
  .menu-toggle { display: inline-flex; }
  .site-header nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    background: #12151c;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { padding: 12px; }
  .nav-divider { display: none; }
}


/* ===== block: home ===== */
/* TRANG CHỦ — không phải một "block" đặt được trong Admin.
   Thư mục này cố tình KHÔNG có schema.json/block.html, nên nó không hiện trong
   menu thêm block. Chỉ có CSS, và build.js tự gom mọi block.css nên file này
   vẫn được nạp vào style chung. Markup nằm trong buildHomePage() của build.js. */

/* Trang chủ không có mục lục neo trong trang nên không cần nút Menu. */
.home-page .menu-toggle { display: none; }

.home-heading {
  margin: 8px 0 10px;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.2;
}

.home-intro {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  padding-bottom: 40px;
}

.home-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.home-card:hover,
.home-card:focus-visible {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.home-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-alt);
}

.home-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.home-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
}

.home-card-desc {
  flex: 1;
  color: var(--color-text-muted);
  font-size: 0.94rem;
}

.home-card-cta {
  margin-top: 4px;
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 700;
}

.home-empty {
  padding: 40px 0 60px;
  color: var(--color-text-muted);
}


/* ===== block: banner ===== */
/* BANNER ĐẦU TRANG — ảnh hoặc video nền tràn viền, menu đè lên.
   Đặt block này ở vị trí ĐẦU TIÊN của trang thì build.js tự cho menu đè lên. */

.banner {
  position: relative;
  aspect-ratio: var(--banner-ty-le, 3 / 1);
  overflow: hidden;
  background: #0b0d12;
}

/* Mặc định: bề rộng bằng đúng phần nội dung của .container, để mép trái/phải
   của banner thẳng hàng với chữ và ảnh của mọi block bên dưới. */
.banner--web {
  width: calc(100% - 40px);
  max-width: calc(var(--container-width) - 40px);
  margin-inline: auto;
}

/* Tuỳ chọn: kéo sát mép màn hình. Trên màn hình rộng sẽ thấy rõ khác biệt. */
.banner--tran-vien {
  width: 100vw;
  max-width: 100%;
  margin-left: calc(50% - 50vw);
}

.banner-nen,
.banner-nen img,
.banner-nen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.banner-nen img { object-fit: cover; }

/* Khung nền là "container" để iframe tính kích thước theo CHÍNH NÓ (cqw/cqh),
   không phải theo màn hình. */
.banner-nen { container-type: size; }

/* Vimeo nền: khung iframe của Vimeo luôn 16:9 và player co video cho VỪA khung
   đó (thừa ra thì thành dải đen). Muốn video phủ kín banner thì phải tự phóng
   iframe theo luật "cover".
   Trước đây dùng 177.78vh / 56.25vw — tức tính theo BỀ RỘNG VÀ CHIỀU CAO MÀN
   HÌNH, trong khi banner chỉ là một dải cao bằng 1/3 bề rộng của nó. Trên màn
   1440×900, banner 1080×360 mà iframe bị ép thành 1600×810 — phóng to gần gấp
   rưỡi rồi cắt mất hai bên, đúng lỗi "video 3:1 up lên bị mất hai mép".
   Giờ dùng cqw/cqh (phần trăm bề rộng/chiều cao CỦA KHUNG NỀN): video 3:1 đặt
   trong banner 3:1 sẽ khớp khít, không cắt tí nào; video 16:9 thì cắt bớt trên
   dưới cho phủ kín, không để hở dải đen. */
.banner-nen iframe {
  border: 0;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Trình duyệt quá cũ chưa biết container query: cho iframe phủ đúng khung.
   Video 3:1 vẫn khít, video 16:9 thì hở dải đen hai bên — chấp nhận được, còn
   hơn bị phóng to cắt mất nội dung. */
@supports not (width: 1cqw) {
  .banner-nen iframe { width: 100%; height: 100%; }
}

/* Lớp phủ tối MỜ DẦN Ở HAI MÉP: mép trên để chữ menu đè lên vẫn đọc được trên
   mọi khung hình, mép dưới để nối liền vào nền trang. Giữa vẫn trong để ảnh
   không bị đục, đỡ tức mắt. */
.banner-phu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Hai lớp: gradient DỌC làm mờ mép trên (cho menu đè lên đọc được) và mép dưới
     (nối liền vào nền trang); gradient NGANG chỉ bật ở phía có chữ, để chữ nổi
     trên ảnh sáng mà giữa ảnh vẫn trong, không bị đục cả tấm. */
  background-image:
    var(--phu-ngang, linear-gradient(transparent, transparent)),
    var(--phu-doc, linear-gradient(transparent, transparent));
}

.banner-phu--nhe {
  --phu-doc:
    linear-gradient(to bottom, rgb(11 13 18 / 55%) 0%, rgb(11 13 18 / 18%) 16%, rgb(11 13 18 / 0%) 34%),
    linear-gradient(to top, rgb(11 13 18 / 55%) 0%, rgb(11 13 18 / 16%) 18%, rgb(11 13 18 / 0%) 38%);
}

.banner-phu--vua {
  --phu-doc:
    linear-gradient(to bottom, rgb(11 13 18 / 78%) 0%, rgb(11 13 18 / 34%) 18%, rgb(11 13 18 / 0%) 40%),
    linear-gradient(to top, rgb(11 13 18 / 78%) 0%, rgb(11 13 18 / 30%) 20%, rgb(11 13 18 / 0%) 46%);
}

.banner-phu--dam {
  --phu-doc:
    linear-gradient(to bottom, rgb(11 13 18 / 92%) 0%, rgb(11 13 18 / 52%) 22%, rgb(11 13 18 / 12%) 50%),
    linear-gradient(to top, rgb(11 13 18 / 92%) 0%, rgb(11 13 18 / 48%) 24%, rgb(11 13 18 / 12%) 55%);
}

.banner-phu--chu-left {
  --phu-ngang: linear-gradient(to right, rgb(11 13 18 / 72%) 0%, rgb(11 13 18 / 30%) 34%, rgb(11 13 18 / 0%) 62%);
}

.banner-phu--chu-right {
  --phu-ngang: linear-gradient(to left, rgb(11 13 18 / 72%) 0%, rgb(11 13 18 / 30%) 34%, rgb(11 13 18 / 0%) 62%);
}

.banner-phu--chu-center {
  --phu-ngang: radial-gradient(ellipse 70% 90% at 50% 55%, rgb(11 13 18 / 62%) 0%, rgb(11 13 18 / 22%) 45%, rgb(11 13 18 / 0%) 78%);
}

.banner-chu {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* flex-start để nút không bị kéo dài hết chiều ngang khung. */
  align-items: flex-start;
  gap: 10px;
  /* Chừa chỗ cho thanh menu đè lên phía trên. */
  padding-top: 78px;
}

.banner-chu--center { align-items: center; text-align: center; }
.banner-chu--right { align-items: flex-end; text-align: right; }

.banner-tag {
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.banner-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  text-shadow: 0 2px 18px rgb(0 0 0 / 55%);
}

.banner-chu--center .banner-title { max-width: 26ch; }

.banner-subtitle {
  margin: 0;
  max-width: 52ch;
  color: #dfe3ea;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
}

.banner-btn { margin-top: 8px; }

.banner .vimeo-sound-toggle { z-index: 3; }

@media (max-width: 840px) {
  .banner { aspect-ratio: var(--banner-ty-le-mobile, 3 / 1); }
  .banner-chu { padding-top: 64px; gap: 8px; }
  .banner-title { max-width: 100%; }

  /* SÀN AN TOÀN: banner CÓ CHỮ không được thấp hơn mức này. Trên màn hình hẹp,
     tỉ lệ ngang như 3:1 chỉ cho ra dải cao ~130px — logo đè lên tiêu đề và chữ
     tràn ra ngoài khung. Banner thuần ảnh/video (không chữ) thì giữ đúng tỉ lệ
     đã chọn, vì nó không có gì để tràn. */
  .banner:has(.banner-chu) { min-height: 340px; }

  .banner-title { font-size: clamp(1.35rem, 6.4vw, 2rem); }
  .banner-subtitle { font-size: 0.95rem; }
}

/* ---- Menu đè lên băng-rôn ----
   Chỉ áp dụng cho trang mở đầu bằng block này. Menu trong suốt khi còn ở trên
   băng-rôn, và lấy lại nền tối đục khi người xem cuộn qua — nếu không, chữ menu
   sẽ chìm vào nội dung phía dưới. */
body.co-banner .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

body.co-banner .site-header.da-cuon {
  background: rgb(11 13 18 / 92%);
  border-bottom-color: rgb(255 255 255 / 8%);
  backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  body.co-banner .site-header { transition: none; }
}


/* ===== block: footer ===== */
.site-footer {
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Không có rule này thì hotline ăn màu link mặc định của trình duyệt (xanh
   dương), chọi hẳn với tông cam/tối của cả site. */
.site-footer a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: underline; }

/* Chân trang xếp dọc: hàng link chính sách ở trên, dòng bản quyền + logo Bộ
   Công Thương ở dưới. */
.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Hàng link chính sách bắt buộc theo quy định TMĐT. Để màu xám nhạt cho kín
   đáo, không tranh chỗ với nội dung bán hàng; rê chuột mới sáng lên cam. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  max-width: 860px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.site-footer .footer-links a {
  color: var(--color-text-muted);
  font-weight: 400;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
}

.site-footer p { margin: 0; }

/* Logo đã tách nền sẵn (chỉ còn chữ + nền xanh), để nguyên trên nền tối.
   Cỡ nhỏ, không hút mắt khỏi phần nội dung. */
.footer-bct {
  height: 30px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-bct:hover { opacity: 1; }

@media (max-width: 640px) {
  .footer-bct { height: 26px; }
}


/* ===== block: video-chu ===== */
/* Video Vimeo chế độ "background" (tự phát, câm tiếng, lặp, không control)
   + chữ đè lên trên — kiểu hero trang chủ Vimeo. Bọc trong .container như
   mọi block khác (xem ghi chú ở base/block.css) nên KHÔNG tràn viền màn
   hình, giữ đúng bề ngang 1120px chung của site. */
.video-chu-box {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2 / 1;
  /* container query để tính cỡ phủ kín (cover) theo bề rộng/cao CHÍNH KHUNG
     NÀY, không theo viewport — xem .video-chu-bg iframe bên dưới. */
  container-type: inline-size;
  overflow: hidden;
  color: #fff;
}

/* Lớp video nền — pointer-events:none để không ai bấm/tương tác được với
   player, đúng nghĩa "chỉ để nhìn", không phải video cho xem chủ động. */
.video-chu-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Giữ nguyên khung container 1120px / tỷ lệ 2:1, nhưng dùng viewport Vimeo
   vuông và canh giữa để video phủ kín bề ngang. Phần thừa trên/dưới bị crop,
   tránh hai dải đen ở mép trái/phải mà không kéo giãn hình. */
.video-chu-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqw;
  height: 100cqw;
  min-width: 100cqh;
  min-height: 100cqh;
  transform: translate(-50%, -50%);
  border: 0;
}

.video-chu-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  /* Gradient tối nhẹ để chữ trắng luôn đọc được dù video sáng hay tối. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* 3 dòng text ghim ở góc, cùng cỡ/độ đậm với .video-chu-tag — canh lề
   theo phía góc (trái canh trái, phải canh phải) chứ không theo giữa
   như phần nội dung chính. Absolute + z-index để nổi trên nền video mà
   không phá layout flex canh giữa của .video-chu-overlay. */
.video-chu-corner {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.7;
  white-space: pre-line;
}

.video-chu-corner-tl {
  top: 24px;
  left: 24px;
  text-align: left;
}

.video-chu-corner-br {
  right: 24px;
  bottom: 24px;
  text-align: right;
}

.video-chu-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-bottom: 14px;
}

/* .video-chu-overlay .video-chu-heading (2 class) để chắc thắng rule
   ".section h2" trong base.css — xem ghi chú tương tự ở blocks/khoet-chu. */
.video-chu-overlay .video-chu-heading {
  margin: 0;
  font-size: clamp(1.8rem, 5cqw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.video-chu-subtitle {
  max-width: 640px;
  margin: 16px 0 0;
  opacity: 0.9;
  white-space: pre-line;
}

.video-chu-overlay .btn { margin-top: 24px; }

@media (max-width: 640px) {
  .video-chu-box { aspect-ratio: 4 / 5; }
  .video-chu-overlay { padding: 105px 18px 115px; }
  .video-chu-overlay .video-chu-heading { font-size: clamp(1.65rem, 8.5cqw, 2.1rem); }
  .video-chu-corner { font-size: 0.68rem; line-height: 1.45; }
  .video-chu-corner-tl { top: 14px; left: 14px; }
  .video-chu-corner-br { right: 14px; bottom: 14px; }
}


/* ===== block: hero ===== */
/* Chỉ padding trên, lý do xem ghi chú ở .section trong base/block.css. */
.hero { padding: 20px 0 0; }

.hero-tag {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 900px) {
  .hero-inner { flex-direction: row; align-items: stretch; }
  .hero-inner--video-left .hero-video { order: -1; }
  .hero-text {
    flex: 1.2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .hero-video { flex: 0.8; min-width: 0; align-self: flex-start; }
}

.hero-text h1,
.hero-text .hero-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 16px;
}

.hero-subtitle {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  white-space: pre-line;
  margin: 0 0 24px;
}

.specs-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {
  .specs-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

.specs-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.92rem;
}

.specs-list li span:first-child {
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-right: 12px;
  padding-top: 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.specs-list li span:last-child {
  font-weight: 600;
  text-align: left;
}

.specs-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

.hero-video { display: flex; }

/* --- YouTube "khó bấm lạc ra ngoài" embed --- */
.yt-lock {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

/* Video dọc — tỉ lệ 3:4 cố định theo chiều rộng cột (không bao giờ méo hình).
   Cột cấu hình bên trái bị giới hạn bằng đúng chiều cao này qua JS
   (xem syncHeroHeights trong main.js) và tự cuộn nếu danh sách quá dài,
   thay vì kéo méo khung video khi cấu hình có nhiều linh kiện. */
.yt-lock--portrait {
  aspect-ratio: 3 / 4;
  width: 100%;
}

.yt-lock__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-lock__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 2px 12px #000;
}

.yt-lock__play:hover { transform: scale(1.08); }

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

/* Chắn vùng tiêu đề/avatar kênh phía trên player — nơi hay dẫn ra YouTube.
   Không phủ toàn khung để không chặn nút play/pause/volume/fullscreen. */
.yt-lock__shield {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  pointer-events: auto;
  background: transparent;
}


/* ===== block: hero-vimeo ===== */
.vimeo-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
}

.vimeo-portrait iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqw;
  height: 177.78cqw;
  border: 0;
  transform: translate(-50%, -50%);
}


/* ===== block: gioi-thieu ===== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split:not(:has(.split-media)) { grid-template-columns: 1fr; }
  .split--image-left .split-media { order: -1; }
}

/* Ô chọn màu trong Admin ghi "Trắng (mặc định)" và tô ô màu #eef0f4, nên chữ
   phải ra đúng màu đó. Trước đây để --color-text-muted (#9aa2b1) làm chữ xám
   đục, không khớp với ô màu người dùng bấm. */
.split-text p { color: var(--color-text); white-space: pre-line; }

.split-media img {
  border-radius: var(--radius);
  width: 100%;
  object-fit: cover;
}


/* ===== block: gioi-thieu-video ===== */
.intro-vimeo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Ô chọn màu trong Admin ghi "Trắng (mặc định)" và tô ô màu #eef0f4, nên chữ
   phải ra đúng màu đó. Trước đây để --color-text-muted (#9aa2b1) làm chữ xám
   đục, không khớp với ô màu người dùng bấm. */
.intro-vimeo-text p {
  color: var(--color-text);
  white-space: pre-line;
}

.intro-vimeo-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;
}

.intro-vimeo-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.intro-vimeo-media .video-chu-overlay { padding: 24px 18px; }
.intro-vimeo-media .video-chu-overlay .video-chu-heading { font-size: clamp(1.2rem, 4.5cqw, 2rem); }
.intro-vimeo-media .video-chu-subtitle { margin-top: 10px; font-size: 0.9rem; }
.intro-vimeo-media .video-chu-overlay .btn { margin-top: 14px; }
.intro-vimeo-media .video-chu-corner { font-size: clamp(0.58rem, 1.5cqw, 0.72rem); }
.intro-vimeo-media .video-chu-corner-tl { top: 14px; left: 14px; }
.intro-vimeo-media .video-chu-corner-br { right: 14px; bottom: 14px; }

@media (min-width: 900px) {
  .intro-vimeo {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 40px;
  }

  .intro-vimeo:not(:has(.intro-vimeo-media)) { grid-template-columns: 1fr; }
  .intro-vimeo--video-left .intro-vimeo-media { order: -1; }
}


/* ===== block: interactive-comparison ===== */
.comparison-captions{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 14px;color:var(--color-text-muted);font-weight:700}.comparison-captions p{margin:0;white-space:pre-line}.comparison-captions p:last-child{text-align:right}.comparison{position:relative;width:100%;overflow:hidden;border-radius:var(--radius);background:#050608;touch-action:pan-y;cursor:ew-resize;user-select:none}.comparison img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}.comparison-overlay{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0)}.comparison-divider{position:absolute;z-index:2;top:0;bottom:0;left:var(--comparison-position);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}.comparison-divider span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:#0b0d12;font-weight:900;transform:translate(-50%,-50%);box-shadow:0 8px 30px #0008}.comparison-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}@media(max-width:640px){.comparison-captions{font-size:.88rem}.comparison-divider span{width:44px;height:44px}}
.comparison:has(.comparison-range:focus-visible) .comparison-divider span{outline:3px solid #ffd54f;outline-offset:3px}


/* ===== block: interactive-comparison-text ===== */
.comparison-text{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}.comparison-copy{min-width:0}.comparison-copy .rich-content{color:var(--color-text-muted)}.comparison-media{min-width:0}@media(min-width:900px){.comparison-text{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:40px}.comparison-text--media-left .comparison-media{order:-1}}


/* ===== block: slide-anh ===== */
.slider-section{overflow:hidden}.slider-viewport{width:100%;overflow:hidden}.slider-track{display:flex;width:max-content;animation:azpc-slider var(--slider-duration,48s) linear infinite}.slider-viewport:hover .slider-track{animation-play-state:paused}.slider-group{display:flex;gap:18px;padding-right:18px}.slider-group figure{height:400px;margin:0;flex:0 0 auto;border-radius:var(--radius);overflow:hidden;background:#050608}.slider-group img{display:block;width:auto;height:100%;max-width:none;object-fit:contain}@keyframes azpc-slider{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.slider-track{animation-play-state:paused}}@media(max-width:700px){.slider-group figure{height:260px}}


/* ===== block: tinh-nang ===== */
/* Story — kể chuyện xen kẽ ảnh/chữ */
/* Chỉ padding trên — cùng nguyên tắc với .section (xem base/block.css),
   tránh cộng dồn padding-top của dòng sau với padding-bottom của dòng trước. */
.story-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 20px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.story-row:last-child { border-bottom: none; }
.story-row:not(:has(.story-media)) { grid-template-columns: 1fr; }
.story-row:not(:has(.story-media))::before { display: none; }

.story-row::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.story-media img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.story-row--reverse .story-media { order: 2; }
.story-row--reverse .story-content { order: 1; }

.story-tag {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.story-content h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 14px;
}

.story-content p {
  color: var(--color-text-muted);
  margin: 0;
  /* Giữ nguyên Enter admin gõ trong textarea thành xuống dòng thật, thay vì
     trình duyệt gộp lại thành 1 khoảng trắng như mặc định. */
  white-space: pre-line;
}

@media (max-width: 800px) {
  .story-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0 0;
  }
  .story-row::before { display: none; }
  .story-row--reverse .story-media,
  .story-row--reverse .story-content {
    order: initial;
  }
}


/* ===== block: khoet-chu ===== */
/* Ảnh nền + chữ to đè lên, dùng mix-blend-mode để chữ "mờ đi" và lộ ảnh
   bên dưới qua chính nét chữ — không phải khoét thủng (ngoài chữ vẫn là ảnh
   đầy đủ, không phải nền đặc). isolation:isolate để hiệu ứng blend chỉ tác
   động trong phạm vi khối này, không ảnh hưởng các phần khác của trang.
   Bọc trong .container như mọi block khác — ảnh KHÔNG tràn viền, giữ đúng
   bề ngang 1120px chung của site. Chiều cao do chính tỉ lệ ảnh quyết định. */
.khoet-chu-box {
  position: relative;
  isolation: isolate;
  /* container query — chữ bên trong tính size theo BỀ RỘNG CHÍNH KHUNG NÀY
     (đơn vị cqw), không theo màn hình (vw) nữa. Khung này đã bị giới hạn
     trong .container 1120px nên trên màn cực rộng chữ không vọt to nữa. */
  container-type: inline-size;
  overflow: hidden;
}

/* Ảnh là thẻ <img> thật chứ không phải background nữa. Lý do: background-size
   cover ép khung về đúng aspect-ratio 2/1 rồi cắt phần thừa — ảnh không đúng
   tỉ lệ 2:1 sẽ mất đầu mất đuôi. Giờ chiều rộng bám theo .container, chiều cao
   để trình duyệt tự tính theo tỉ lệ gốc của ảnh, không cắt không bóp. */
.khoet-chu-anh {
  display: block;
  width: 100%;
  height: auto;
}

/* Chữ đè lên ảnh. Padding tính bằng cqw (theo bề rộng khung) chứ không phải
   px cố định, để ảnh thấp hay cao thì khoảng chừa vẫn cân. Trên nhiều hơn
   dưới để nội dung lệch xuống dưới tâm khung một chút. */
.khoet-chu-noi-dung {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7cqw 2cqw 2cqw;
  text-align: center;
}

.khoet-chu-tag {
  display: inline-block;
  color: #fff;
  opacity: 0.75;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

/* Dùng .khoet-chu-box .khoet-chu-text (2 class) thay vì 1 class để chắc chắn
   thắng rule ".section h2" trong base.css (class+thẻ, độ đặc trưng cao hơn
   1 class đơn) — nếu không chữ sẽ bị ép về đúng size H2 mặc định (1.9rem),
   y hệt lỗi đã gặp với .text-yellow trước đây. */
.khoet-chu-box .khoet-chu-text {
  margin: 0;
  /* Tính theo cqw (% bề rộng khung .khoet-chu-box) thay vì vw màn hình —
     số 9.3 đã đo thực tế để đúng câu "SỨC MẠNH VƯỢT TRỘI" (1 dòng, không
     xuống dòng) vừa khít bề ngang khung. Đổi câu chữ khác dài/ngắn hơn thì
     tự lệch, cần chỉnh lại số này. */
  font-size: 9.3cqw;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.55);
  mix-blend-mode: multiply;
}

.khoet-chu-subtitle {
  margin: 20px 0 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  white-space: pre-line;
  font-size: 1.05rem;
}


/* ===== block: text-only ===== */
.text-only-section {
  width: 100%;
  border-top: 0;
  border-bottom: 0;
}

.text-only-inner {
  width: 100%;
  overflow-wrap: anywhere;
}

.text-only-inner > :first-child { margin-top: 0; }
.text-only-inner > :last-child { margin-bottom: 0; }
.text-only-inner a { color: var(--color-primary); }


/* ===== block: chinh-sach ===== */
/* Trang chính sách là văn bản dài, khác hẳn landing page: người đọc quét từ
   trên xuống chứ không ngắm. Nên giới hạn bề ngang ~72 ký tự cho dễ đọc, và
   cho chữ sáng hơn tông muted mặc định. */
.chinh-sach {
  max-width: 760px;
  margin-inline: auto;
}

.chinh-sach h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.25;
}

.chinh-sach-cap-nhat {
  margin: 0 0 28px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.chinh-sach-noi-dung {
  color: var(--color-text);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.chinh-sach-noi-dung h2 {
  margin: 34px 0 10px;
  font-size: 1.15rem;
  color: var(--color-text);
}

.chinh-sach-noi-dung h3 {
  margin: 24px 0 8px;
  font-size: 1rem;
}

.chinh-sach-noi-dung p { margin: 0 0 14px; }
.chinh-sach-noi-dung ul,
.chinh-sach-noi-dung ol { margin: 0 0 16px; padding-left: 22px; }
.chinh-sach-noi-dung li { margin-bottom: 7px; }
.chinh-sach-noi-dung a { color: var(--color-primary); }
.chinh-sach-noi-dung strong { color: var(--color-text); }

.chinh-sach-noi-dung > :first-child { margin-top: 0; }
.chinh-sach-noi-dung > :last-child { margin-bottom: 0; }


/* ===== block: contact ===== */
.contact-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

@media (min-width: 900px) {
  .contact-top { grid-template-columns: 1fr 1.4fr; align-items: start; }
}

/* Câu mời gọi liên hệ để màu vàng cho nổi hẳn trên nền đen — đây là dòng
   duy nhất trong block muốn khách đọc trước khi nhìn số điện thoại. */
.contact-intro p {
  color: var(--color-highlight);
  margin: 0;
  white-space: pre-line;
  font-weight: 500;
}

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

.contact-col-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.contact-col a,
.contact-col span {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.contact-col a:hover { color: var(--color-primary); }

.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}


/* ===== block: gioi-thieu-right ===== */
/* Bố cục và crop ảnh dùng chung từ blocks/gioi-thieu/block.css. */


/* ===== block: hero-vimeo-left ===== */
/* Bố cục video bên trái dùng modifier dùng chung trong blocks/hero/block.css. */


/* ===== block: hero-youtube-left ===== */
/* Bố cục video bên trái dùng modifier dùng chung trong blocks/hero/block.css. */


/* ===== block: slide-anh-3d ===== */
.orbit { background:#0c0c0e; color:#f4f2ed; border-radius:20px; overflow:hidden; margin:20px auto; max-width:1120px; }
.orbit-header { text-align:center; padding:40px 24px 0; }
.orbit-header h2 { font-size:clamp(24px,4vw,42px); line-height:1.2; margin:0 0 12px; color:inherit; }
.orbit-header p { color:#aaa9b0; max-width:620px; margin:auto; line-height:1.7; white-space:pre-line; }
.orbit-stage { position:relative; width:100%; height:clamp(400px,65vw,730px); overflow:hidden; touch-action:pan-y; cursor:grab; isolation:isolate; }
.orbit-stage:active { cursor:grabbing; }
.orbit-card { position:absolute; top:50%; left:50%; width:37%; aspect-ratio:1.6; border:1px solid #ffffff20; border-radius:12px; padding:0; background:#18181b; overflow:hidden; box-shadow:0 16px 42px #0008; will-change:transform; cursor:inherit; transform:translate(-50%,-50%); }
.orbit-card img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.orbit-card span { position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px); padding:5px 10px; border-radius:20px; color:white; background:#111c; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orbit-card:focus-visible { outline:3px solid #ffcc80; outline-offset:3px; }
.orbit-controls button,.orbit-close { color:#eee; border:1px solid #ffffff40; background:#202024; border-radius:30px; padding:8px 14px; cursor:pointer; }
.orbit-dialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; padding:60px 24px 24px; margin:0; background:#08080bf5; color:white; }
.orbit-dialog::backdrop { background:#000c; }
.orbit-dialog[open] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.orbit-dialog figure { margin:0; max-width:100%; }
.orbit-dialog figure img { display:block; max-width:100%; width:auto; height:auto; max-height:75dvh; margin:auto; object-fit:contain; border-radius:8px; }
.orbit-dialog figcaption { display:flex; justify-content:space-between; gap:16px; padding-top:12px; font-size:14px; }
.orbit-dialog figcaption span { white-space:nowrap; color:#aaa; }
.orbit-close { position:absolute; right:18px; top:18px; }
.orbit-controls { display:flex; gap:16px; }
@media(max-width:600px) { .orbit { border-radius:12px; } .orbit-card { width:53%; border-radius:8px; } .orbit-stage { height:430px; } .orbit-card span { font-size:10px; bottom:6px; left:6px; } .orbit-header { padding:28px 16px 0; } }
@media(prefers-reduced-motion:reduce) { .orbit-card { will-change:auto; } }

.orbit .orbit-header h2 {color:inherit;font-size:clamp(24px,4vw,42px);line-height:1.2;}
.orbit[hidden]{display:none;}


/* ===== block: slide-san-pham ===== */
/* Slide sản phẩm: thẻ ảnh dọc 3:4, giá đè góc phải ảnh, tên tối đa 3 dòng.
   Khác block "Slide ảnh" ở chỗ KHÔNG tự chạy: sản phẩm có link bấm được, mà
   thứ đang chạy thì không ai bấm trúng. Ở đây khách tự vuốt ngang (mobile)
   hoặc bấm nút mũi tên (desktop). */
.slide-sp-khung {
  /* Toàn bộ thẻ cao đúng bằng block Slide ảnh (400px / 260px) để hai block
     đứng cạnh nhau không so le. --cao-chu là phần chừa cho tên sản phẩm,
     phần còn lại là ảnh; bề rộng thẻ suy ra từ chiều cao ảnh theo tỉ lệ 3:4. */
  --cao-the: 400px;
  /* = 3 dòng tên (3 × 1.3 × 0.88rem ≈ 55px) + 10px cách ảnh. Phải khớp đúng
     chiều cao 3 dòng, KHÔNG được dư: -webkit-line-clamp cắt ở dòng 3 và thêm
     dấu "…", nhưng nếu khung cao hơn 3 dòng thì dòng thứ 4 vẫn lòi ra nằm
     trong phần dư, nhìn như chữ bị cắt ngang. */
  --cao-chu: 65px;
  --cao-anh: calc(var(--cao-the) - var(--cao-chu));
  --rong-the: calc(var(--cao-anh) * 3 / 4);
  position: relative;
}

.slide-sp-day {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /* Chừa chỗ hai bên để thẻ đầu/cuối không dính sát nút mũi tên. */
  padding: 2px 2px 12px;
}

.slide-sp-day:focus-visible { outline: 3px solid #ffd54f; outline-offset: 4px; }

.slide-sp-the {
  flex: 0 0 auto;
  width: var(--rong-the);
  height: var(--cao-the);
  scroll-snap-align: start;
}

.slide-sp-anh {
  position: relative;
  display: block;
  width: 100%;
  height: var(--cao-anh);
  overflow: hidden;
  border-radius: var(--radius);
  background: #050608;
}

/* Ảnh nào không đúng 3:4 thì cover cắt gọn theo giữa, không bóp méo. */
.slide-sp-anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}

a.slide-sp-anh:hover img { transform: scale(1.04); }

/* Giá nằm đè lên ảnh nên phải đọc được trên mọi nền: chữ vàng, viền đen 2px.
   paint-order:stroke fill bắt trình duyệt vẽ viền TRƯỚC rồi mới tô chữ lên,
   nếu không viền ăn vào trong làm nét chữ mảnh đi trông thấy. */
.slide-sp-gia {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  color: var(--color-highlight);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

.slide-sp-ten {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Tên dài mấy cũng cắt ở dòng thứ 3 để mọi thẻ cao bằng nhau. */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* 3 × line-height 1.3 = 3.9em — đúng 3 dòng, không dư một pixel nào. */
  height: 3.9em;
  margin: 10px 0 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

.slide-sp-ten a { color: inherit; text-decoration: none; }
.slide-sp-ten a:hover, .slide-sp-ten a:focus-visible { color: var(--color-primary); text-decoration: underline; }

.slide-sp-nut {
  position: absolute;
  top: calc(var(--cao-anh) / 2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(11, 13, 18, 0.82);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.slide-sp-nut:hover { background: var(--color-primary); border-color: var(--color-primary); }
.slide-sp-nut[disabled] { opacity: 0.25; cursor: default; }
.slide-sp-nut[disabled]:hover { background: rgba(11, 13, 18, 0.82); border-color: rgba(255, 255, 255, 0.18); }
.slide-sp-nut--truoc { left: -14px; }
.slide-sp-nut--sau { right: -14px; }

@media (max-width: 700px) {
  .slide-sp-khung { --cao-the: 260px; --cao-chu: 53px; }
  .slide-sp-gia { font-size: 0.82rem; -webkit-text-stroke: 1.5px #000; top: 7px; right: 7px; }
  .slide-sp-ten { font-size: 0.72rem; margin-top: 8px; }
  /* Mobile vuốt tay là đủ, nút mũi tên chỉ tổ che ảnh. */
  .slide-sp-nut { display: none; }
}


/* ===== block: video-gioi-thieu ===== */
.intro-vimeo-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Ô chọn màu trong Admin ghi "Trắng (mặc định)" và tô ô màu #eef0f4, nên chữ
   phải ra đúng màu đó. Trước đây để --color-text-muted (#9aa2b1) làm chữ xám
   đục, không khớp với ô màu người dùng bấm. */
.intro-vimeo-left-text p {
  color: var(--color-text);
  white-space: pre-line;
}

.intro-vimeo-left-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;
}

.intro-vimeo-left-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.intro-vimeo-left-media .video-chu-overlay { padding: 24px 18px; }
.intro-vimeo-left-media .video-chu-overlay .video-chu-heading { font-size: clamp(1.2rem, 4.5cqw, 2rem); }
.intro-vimeo-left-media .video-chu-subtitle { margin-top: 10px; font-size: 0.9rem; }
.intro-vimeo-left-media .video-chu-overlay .btn { margin-top: 14px; }
.intro-vimeo-left-media .video-chu-corner { font-size: clamp(0.58rem, 1.5cqw, 0.72rem); }
.intro-vimeo-left-media .video-chu-corner-tl { top: 14px; left: 14px; }
.intro-vimeo-left-media .video-chu-corner-br { right: 14px; bottom: 14px; }

@media (min-width: 900px) {
  .intro-vimeo-left {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 40px;
  }

  .intro-vimeo-left:not(:has(.intro-vimeo-left-media)) { grid-template-columns: 1fr; }
}