/* LiFiMaster — lifimaster.com · CSS tự viết, không thư viện. Màu chỉ lấy từ token. */

/* ---------- Token ---------- */
:root {
  --nen: #FAF9F7;
  --nen-noi: #FFFFFF;
  --nen-chim: #F1EFEA;
  --chu: #17202B;
  --chu-phu: #5A6675;
  --diem: #B06A10;
  --diem-nen: #B06A10;
  --chu-tren-diem: #FFFFFF;
  --vien: #E4E0D8;
  --bong-1: 0 2px 10px rgba(23, 32, 43, .07);
  --bong-2: 0 10px 30px rgba(23, 32, 43, .14);
  --ok: #1E7F4F;

  /* Tông sân khấu: hero + chân trang, giống nhau ở cả hai theme */
  --nen-sankhau: #05080C;
  --chu-sankhau: #ECEFF4;
  --chu-sankhau-phu: rgba(236, 239, 244, .72);
  --vien-sankhau: rgba(236, 239, 244, .14);
  --trang: #FFFFFF;
  --trang-85: rgba(255, 255, 255, .85);
  --trang-08: rgba(255, 255, 255, .08);
  --diem-sankhau: #FFB547;
  --play-nen: rgba(5, 8, 12, .62);
  --phu-hero: linear-gradient(180deg, rgba(5, 8, 12, .55), rgba(5, 8, 12, .78));
  --nen-mo: rgba(5, 8, 12, .5);

  --chu-h1: clamp(2rem, 4.6vw, 3rem);
  --chu-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --chu-h3: 1.125rem;
  --chu-18: clamp(1.0625rem, 2vw, 1.125rem);
  --chu-16: 1rem;
  --chu-14: .875rem;
  --chu-13: .8125rem;
  --so-to: clamp(2rem, 4.5vw, 2.75rem);

  --bo: 12px;
  --bo-nut: 10px;
  --cao-dau: 64px;
  --le: 16px;
  --dem-khoi: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #0C1017;
    --nen-noi: #141B26;
    --nen-chim: #121826;
    --chu: #ECEFF4;
    --chu-phu: #9AA6B5;
    --diem: #FFB547;
    --diem-nen: #FFB547;
    --chu-tren-diem: #201405;
    --vien: #263142;
    --bong-1: 0 2px 10px rgba(0, 0, 0, .45);
    --bong-2: 0 12px 34px rgba(0, 0, 0, .6);
    --ok: #4CC38A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --nen: #0C1017;
  --nen-noi: #141B26;
  --nen-chim: #121826;
  --chu: #ECEFF4;
  --chu-phu: #9AA6B5;
  --diem: #FFB547;
  --diem-nen: #FFB547;
  --chu-tren-diem: #201405;
  --vien: #263142;
  --bong-1: 0 2px 10px rgba(0, 0, 0, .45);
  --bong-2: 0 12px 34px rgba(0, 0, 0, .6);
  --ok: #4CC38A;
  color-scheme: dark;
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: var(--chu-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

html.menu-mo { overflow: hidden; }

img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--diem);
  outline-offset: 2px;
}

.bo-qua {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--bo-nut);
  background: var(--nen-noi); color: var(--chu); font-weight: 600; text-decoration: none;
  box-shadow: var(--bong-2);
}
.bo-qua:focus { top: 12px; }

.khung {
  width: 100%;
  max-width: calc(1200px + 2 * var(--le));
  margin-inline: auto;
  padding-inline: var(--le);
}

.khoi {
  padding-block: var(--dem-khoi);
  scroll-margin-top: 72px;
}
.nen-thuong { background: var(--nen); }
.nen-chim { background: var(--nen-chim); }

.nhan-nho {
  font-size: var(--chu-13);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--diem);
  margin-bottom: 12px;
}

h2 {
  font-size: var(--chu-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  max-width: 820px;
}

.sapo {
  font-size: var(--chu-18);
  line-height: 1.65;
  color: var(--chu-phu);
  max-width: 720px;
  margin-top: 16px;
}

/* ---------- Nút ---------- */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--bo-nut);
  font-weight: 600;
  font-size: var(--chu-16);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: none;
  white-space: nowrap;
}
.nut-dac {
  background: var(--diem-nen);
  color: var(--chu-tren-diem);
  border-color: var(--diem-nen);
}
.nut-dac:hover { filter: brightness(1.08); }
.nut-vien {
  background: transparent;
  border-color: currentColor;
}
.nut-vien:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.nut-tron {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nut-tron:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* ---------- [0] Thanh đầu ---------- */
.dau {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--cao-dau);
  color: var(--trang);
  transition: color 200ms ease;
}
/* Nền mờ đặt ở ::before để backdrop-filter không làm panel menu (position: fixed) bị bó trong header */
.dau::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nen-noi);
  background: color-mix(in srgb, var(--nen-noi) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vien);
  box-shadow: var(--bong-1);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.dau.da-cuon { color: var(--chu); }
.dau.da-cuon::before { opacity: 1; }

.dau-trong {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.dau .wordmark { min-width: 120px; }
.wm-lifi { color: var(--diem); }
.dau:not(.da-cuon) .wm-lifi, .chan .wm-lifi { color: var(--diem-sankhau); }

.menu { margin-left: auto; }
.menu ul { display: flex; align-items: center; gap: 4px; }
.menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}
.menu a:hover { color: var(--diem); }
.dau:not(.da-cuon) .menu a:hover { color: var(--diem-sankhau); }
.menu a.dang-xem { color: var(--diem); font-weight: 600; }
.dau:not(.da-cuon) .menu a.dang-xem { color: var(--diem-sankhau); }
.menu-dong { display: none; }

.dau-nut { display: flex; align-items: center; gap: 4px; }
/* Nút chuyển ngôn ngữ (song ngữ 23-10): cùng cỡ 40×40 với nút theme, màu theo chữ của header (trắng trên hero, token khi đã cuộn) */
.nut-lang {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 40%, transparent);
}
.nut-menu { display: none; }

.nut-theme .ic-troi { display: none; }
.nut-theme[data-dang="dark"] .ic-trang { display: none; }
.nut-theme[data-dang="dark"] .ic-troi { display: block; }

.nen-phu { display: none; }

/* ---------- [1] Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 720px);
  display: flex;
  align-items: center;
  background: var(--nen-sankhau);
  color: var(--trang);
  overflow: hidden;
  isolation: isolate;
}
.hero-nen { position: absolute; inset: 0; z-index: -2; }
.hero-nen img, .hero-nen video { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--phu-hero);
}
.hero-noi {
  padding-top: calc(var(--cao-dau) + 32px);
  padding-bottom: 88px;
  text-align: center;
}
.hero .nhan-nho { color: var(--diem-sankhau); margin-bottom: 16px; text-wrap: balance; }
.hero h1 {
  font-size: var(--chu-h1);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 20em;
  margin-inline: auto;
  text-wrap: balance;
}
.hero h1 .dong { display: block; }
.hero h1 .nhan { color: var(--diem-sankhau); }
.hero-phu {
  font-size: var(--chu-18);
  line-height: 1.65;
  color: var(--trang-85);
  max-width: 640px;
  margin: 20px auto 0;
}
.hero-nut {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.hero-nut .nut-vien { color: var(--trang); }
.hero-nut .nut-vien:hover { background: var(--trang-08); }

.hero-xuong {
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  color: var(--trang-85);
}
.hero-xuong:hover { color: var(--trang); }

/* Trình phát phủ hero */
.hero-phat {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--nen-sankhau);
  padding-top: calc(var(--cao-dau) + 52px);
}
.hero-phat iframe { width: 100%; height: 100%; border: 0; }
.hero-phat-dong {
  position: absolute;
  top: calc(var(--cao-dau) + 6px);
  right: 12px;
  color: var(--trang);
  background: var(--play-nen);
}
.hero-phat-dong:hover { background: var(--diem-nen); color: var(--chu-tren-diem); }

/* ---------- [2] Con số + giới thiệu ---------- */
.so-luoi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}
.so-the { display: flex; flex-direction: column; gap: 4px; }
.so {
  font-size: var(--so-to);
  font-weight: 800;
  line-height: 1.1;
  color: var(--diem);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.so-chu {
  font-size: var(--chu-14);
  line-height: 1.5;
  color: var(--chu-phu);
}
.gioi-thieu-doan {
  font-size: var(--chu-18);
  line-height: 1.65;
  max-width: 720px;
  margin-top: 40px;
}
.gioi-thieu-doan strong { font-weight: 650; }

/* ---------- Thẻ giá trị ---------- */
.gia-tri {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.gt-the {
  background: var(--nen-noi);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  padding: 20px;
  box-shadow: var(--bong-1);
}
.gt-icon { color: var(--diem); margin-bottom: 12px; }
.gt-the p { font-size: var(--chu-16); line-height: 1.6; color: var(--chu-phu); }
.gt-the strong { display: block; color: var(--chu); font-size: var(--chu-h3); font-weight: 650; line-height: 1.35; margin-bottom: 4px; }

/* ---------- Thẻ clip ---------- */
.clip { min-width: 0; }
.clip-nut {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--bo);
}
.clip-khung {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bo);
  background: var(--nen-sankhau);
  box-shadow: var(--bong-1);
  aspect-ratio: 16 / 9;
}
.clip--doc .clip-khung { aspect-ratio: 9 / 16; }
.clip-khung img, .clip-khung iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 999px;
  background: var(--play-nen);
  color: var(--trang);
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.clip--doc .play, .clip--thu-hai .play, .k5-duoi .play, .luoi-k6 .play { width: 48px; height: 48px; }
.clip--doc .play svg, .clip--thu-hai .play svg, .k5-duoi .play svg, .luoi-k6 .play svg { width: 22px; height: 22px; margin-left: 2px; }
.clip-nut:hover .play, .clip-nut:focus-visible .play {
  transform: scale(1.06);
  background: var(--diem-nen);
  color: var(--chu-tren-diem);
}

.clip-chu { display: block; margin-top: 12px; }
.clip-ten { display: block; color: var(--chu); }
.clip--ngang .clip-ten { font-size: var(--chu-h3); font-weight: 650; line-height: 1.35; }
.clip--doc .clip-ten,
.clip--thu-hai .clip-ten,
.k5-duoi .clip-ten {
  font-size: var(--chu-14);
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.clip--thu-hai .clip-ten, .k5-duoi .clip-ten { font-size: var(--chu-16); font-weight: 600; }
.clip-phu { display: block; margin-top: 2px; font-size: var(--chu-14); color: var(--chu-phu); }

.dang-phat .clip-khung { box-shadow: var(--bong-2); }

/* Hàng nổi bật (K3, K4) */
.hang-noi-bat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* Dải Short: điện thoại = dải cuộn ngang có chủ đích */
.dai-short {
  display: flex;
  gap: 12px;
  margin: 32px calc(-1 * var(--le)) 0;
  padding: 0 var(--le) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--le);
  scrollbar-width: thin;
}
.dai-short > .clip {
  flex: 0 0 62vw;
  scroll-snap-align: start;
}

.cau-chot {
  margin-top: 32px;
  font-style: italic;
  color: var(--chu-phu);
  max-width: 720px;
}

/* K5 */
.luoi-k5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.k5-doc { width: min(100%, calc(70vh * 9 / 16)); margin-inline: auto; }
.k5-hang-duoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* K6 */
.luoi-k6 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.k6-the {
  display: flex;
  flex-direction: column;
  background: var(--nen-noi);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  box-shadow: var(--bong-1);
  padding: 12px;
}
.k6-chu { padding: 16px 8px 8px; }
.k6-chu h3 { font-size: var(--chu-h3); font-weight: 650; line-height: 1.35; }
.k6-chu p { margin-top: 6px; color: var(--chu-phu); }

/* K7 */
.lien-he { display: grid; gap: 32px; }
.lien-he-nut {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.nut-lon { min-height: 52px; }
.lien-he-nut .nut-vien { color: var(--chu); }
.lien-he-tt {
  align-self: start;
  background: var(--nen-noi);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  box-shadow: var(--bong-1);
  padding: 8px 20px;
}
.lien-he-tt > div {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vien);
}
.lien-he-tt > div:last-child { border-bottom: 0; }
.lien-he-tt dt { font-size: var(--chu-14); font-weight: 600; color: var(--chu); }
.lien-he-tt dd { font-size: var(--chu-16); }
.dang-cap-nhat { font-style: italic; color: var(--chu-phu); }

/* ---------- [8] Chân trang ---------- */
.chan {
  background: var(--nen-sankhau);
  color: var(--chu-sankhau);
  padding-block: 48px 24px;
  font-size: var(--chu-14);
}
.chan-trong {
  display: grid;
  gap: 32px;
}
.chan .wordmark { color: var(--chu-sankhau); }
.chan-trai p { margin-top: 12px; color: var(--chu-sankhau-phu); max-width: 360px; line-height: 1.6; }
.chan-menu ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.chan-menu a, .chan-mxh a {
  color: var(--chu-sankhau-phu);
  text-decoration: none;
}
.chan-menu a:hover, .chan-mxh a:hover { color: var(--diem-sankhau); }
.chan-mxh { display: flex; gap: 20px; }
.chan-mxh a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.chan :focus-visible { outline-color: var(--diem-sankhau); }
.chan-cuoi {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--vien-sankhau);
  color: var(--chu-sankhau-phu);
}

/* ---------- Điện thoại: panel menu ---------- */
@media (max-width: 767.98px) {
  :root { --cao-dau: 56px; }
  .nut-menu { display: inline-grid; }
  .dau-nut { margin-left: auto; margin-right: -8px; }

  .menu {
    position: fixed;
    top: 0; right: 0;
    width: 80vw;
    height: 100vh;
    height: 100dvh;
    z-index: 60;
    background: var(--nen-noi);
    color: var(--chu);
    box-shadow: var(--bong-2);
    padding: 12px 16px 24px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
    overflow-y: auto;
  }
  .menu.mo {
    transform: none;
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }
  .menu-dong { display: inline-grid; margin-left: auto; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; margin-top: 8px; }
  .menu a {
    padding: 14px 8px;
    font-size: var(--chu-18);
    border-bottom: 1px solid var(--vien);
    border-radius: 0;
  }
  .dau:not(.da-cuon) .menu a:hover,
  .dau:not(.da-cuon) .menu a.dang-xem { color: var(--diem); }

  .nen-phu:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--nen-mo);
  }
  .dai-short > .clip { flex-basis: 62vw; }

  /* Bản tiếng Anh: cụm "unforgettable moments" dài ~11,3em và không được tách đôi → co cỡ H1 theo bề ngang
     (chừa ~6 % cho phông hệ điều hành khác nhau); bản Việt giữ nguyên cỡ cũ */
  html[lang="en"] .hero h1 { font-size: min(var(--chu-h1), calc((100vw - 2 * var(--le)) / 12)); }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  .dai-short > .clip { flex-basis: 48vw; }
}

/* ---------- Tablet trở lên ---------- */
@media (min-width: 768px) {
  :root { --le: 32px; --dem-khoi: 64px; }

  .hero { min-height: min(92vh, 860px); }
  .hero-noi { text-align: left; }
  .hero h1, .hero-phu { margin-inline: 0; }
  .hero-nut { justify-content: flex-start; }

  .so-luoi { gap: 32px 24px; }

  .gia-tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dai-short {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  /* K3 có 4 Short: 4 cột để không bỏ lẻ một thẻ ở hàng dưới */
  .dai-short--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .k5-doc { width: min(100%, 300px); }
  .k5-hang-duoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .luoi-k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lien-he-nut { flex-direction: row; flex-wrap: wrap; }

  .chan-trong { grid-template-columns: 1.3fr 1fr; }
  .chan-mxh { grid-column: 1 / -1; }
}

/* Menu ngang ở tablet: chữ gọn lại để đủ 5 mục + nút theme */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .menu ul { gap: 0; }
  /* 🔁 23-10 (song ngữ): thêm nút ngôn ngữ 40 px → bớt đệm ngang mục menu 7 → 4 px và bỏ bề rộng tối thiểu của wordmark,
     để 5 mục menu tiếng Việt (dài nhất) + nút theme + nút ngôn ngữ vẫn vừa một hàng ở 768 px */
  .menu a { padding: 8px 4px; font-size: .8125rem; }
  .wordmark { font-size: 1.25rem; }
  .dau .wordmark { min-width: 0; }
  .dau-trong { gap: 8px; }
  /* Khối 3 thẻ giá trị trên lưới 2 cột: thẻ thứ ba trải hết hàng, không bỏ lẻ nửa hàng trống */
  .gia-tri--3 .gt-the:last-child { grid-column: 1 / -1; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  :root { --dem-khoi: 96px; }
  .dau .wordmark { min-width: 160px; }
  .menu ul { gap: 4px; }

  .so-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .so-the { padding: 0 24px; border-left: 1px solid var(--vien); }
  .so-the:first-child { padding-left: 0; border-left: 0; }

  .gia-tri--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hang-noi-bat {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
  }

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

  /* Hàng trên: nổi bật 16:9 + clip dọc 9:16 cùng chiều cao, hai mép thẳng hàng
     (tỉ lệ cột 256 : 81 = (16/9) : (9/16)); hàng dưới: hai clip ngang chia đôi */
  .luoi-k5 {
    grid-template-columns: minmax(0, 256fr) minmax(0, 81fr);
    align-items: start;
  }
  .k5-doc { width: 100%; }
  .k5-hang-duoi { grid-column: 1 / -1; }

  .lien-he { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }

  .chan-trong { grid-template-columns: 1.2fr 1.8fr auto; align-items: start; }
  .chan-mxh { grid-column: auto; flex-direction: column; gap: 4px; }
}

/* ---------- Chuyển động (chỉ khi người xem không bật giảm chuyển động) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .gt-the, .k6-the, .clip-khung { transition: transform 200ms ease, box-shadow 200ms ease; }
  .gt-the:hover, .k6-the:hover { transform: translateY(-3px); box-shadow: var(--bong-2); }
  .clip-nut:hover .clip-khung { transform: translateY(-3px); box-shadow: var(--bong-2); }

  .hero-xuong svg { animation: nhun 2s ease-in-out infinite; }
  @keyframes nhun {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  .js .hien { opacity: 0; transform: translateY(12px); }
  .js .hien.da-hien {
    opacity: 1;
    transform: none;
    transition: opacity 220ms ease var(--tre, 0ms), transform 220ms ease var(--tre, 0ms);
  }
}