/* Sơn Linh Tửu — bản A "Nhãn chai thành trang"
   Xanh rừng thẫm, vàng ánh kim, hoa văn chìm, núi nhiều lớp như tem.
   Điện thoại trước, rồi máy tính bảng (≥640px), máy tính (≥1024px). */

:root {
  --rung: #0E2519;
  --rung-2: #12301F;
  --rung-3: #0A1C13;
  --vang: #D8B46B;
  --vang-sang: #F2DEA8;
  --kem: #F3EAD3;
  --chu: #D8D2BF;
  --chu-mo: #A6B0A1;
  --vien: rgba(216,180,107,.45);
  --gold: linear-gradient(180deg, #F6E6B6 0%, #DDB96F 45%, #A77E3E 100%);
  --gold-flat: linear-gradient(180deg, #F0D89B 0%, #D1A95E 100%);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23D8B46B' stroke-opacity='.075'%3E%3Cpath d='M0 22 22 0l22 22-22 22z'/%3E%3Cpath d='M11 22 22 11l11 11-11 11z'/%3E%3C/g%3E%3C/svg%3E");
  --display: "Oswald", "Arial Narrow", sans-serif;
  --text: "Be Vietnam Pro", system-ui, sans-serif;
  --bar-h: 70px;
  --top-h: 76px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- Nền ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden;
  background: var(--rung); color: var(--chu);
  font: 400 16px/1.65 var(--text);
  padding-bottom: calc(var(--bar-h) + var(--safe-b));
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
:focus { outline: none; }
/* Viền chọn chỉ hiện khi dùng bàn phím (lớp .kb do JS gắn). Safari/Chrome iPhone, Zalo coi focus do trang tự đặt
   (mở hộp thoại, đóng hộp trả về nút) là focus-visible nên hiện khung vàng khi chạm — không để vậy nữa. */
.kb :focus-visible { outline: 2px solid var(--vang-sang); outline-offset: 3px; }
.nw { white-space: nowrap; } /* cụm chữ không tách giữa chừng (địa chỉ) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--kem); color: var(--rung); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 40px, 1180px); margin-inline: auto; }

/* Chữ vàng tô dải màu: dải màu chỉ phủ trong khung chữ, dấu chồng trên chữ hoa (Ấ Ợ Ừ) và dấu nặng
   nằm ngoài khung sẽ mất ("NẤU RƯỢU" thành "NÂU RƯƠU"). Nới khung trên/dưới, bù bằng lề âm. */
.gold-text {
  background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .32em .04em .16em; margin: -.32em -.04em -.16em;
}

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 18px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase;
  transition: filter .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.btn--gold { color: #1B1407; background: var(--gold-flat); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 30px -12px rgba(216,180,107,.55); }
.btn--gold:hover { filter: brightness(1.06); }
.btn--line { color: var(--vang-sang); border: 1px solid rgba(216,180,107,.6); background: transparent; }
.btn--line:hover { background: rgba(216,180,107,.08); border-color: var(--vang); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn--lg { min-height: 58px; font-size: 20px; }

.link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  color: var(--vang-sang); font-weight: 500; text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid rgba(216,180,107,.45); cursor: pointer;
}
.link:hover { border-bottom-color: var(--vang-sang); }
.link span { transition: transform .2s ease; }
.link:hover span { transform: translateX(3px); }

/* ---------- Thanh trên cùng (máy tính) ---------- */
.top { display: none; }

/* ---------- Đầu trang ---------- */
.hero {
  --marks-h: 0px;
  --nui: clamp(72px, 22vw, 140px); /* chiều cao lớp núi sau; hai lớp trước tính theo nó */
  position: relative; overflow: hidden; isolation: isolate;
  /* Đầu trang phủ đúng màn đầu tiên (trừ thanh 5 nút), nội dung nằm giữa, núi ở dưới không chạm chữ */
  display: flex; flex-direction: column;
  min-height: calc(100vh - 70px); min-height: calc(100svh - 70px - env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 60% at 50% 36%, rgba(216,180,107,.12), transparent 60%),
    var(--pattern),
    linear-gradient(180deg, #0B1F15 0%, var(--rung-2) 55%, var(--rung) 100%);
}
.hero__in {
  flex: 1; display: grid; justify-items: center; align-content: center; text-align: center;
  padding: 14px 20px calc(var(--nui) * .92 + 16px);
  grid-template-areas: "emblem" "seal" "stage" "title" "lead" "cta";
}
/* Điện thoại: bỏ lớp bọc chữ để xếp ảnh vòm chen giữa dòng xác nhận và tên thương hiệu */
.hero__text { display: contents; }
.hero__emblem { grid-area: emblem; width: clamp(42px, 7vh, 56px); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 18px rgba(216,180,107,.25)); }

.seal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  grid-area: seal; margin: 6px 0 10px; white-space: nowrap;
  font: 500 12px/1.4 var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--vang);
}
.seal::before, .seal::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--vang)); }
.seal::after { transform: scaleX(-1); }

.title { grid-area: title; position: relative; z-index: 3; margin: calc(-1 * clamp(58px, 17vw, 84px)) 0 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 1.05; }
.title__l1 { display: block; color: var(--kem); font-size: clamp(42px, 13.2vw, 76px); letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.4); }
.title__l2 { display: block; margin-top: calc(8px - .32em); font-size: clamp(24px, 7.4vw, 40px); font-weight: 500; letter-spacing: .06em; }

.hero__lead { grid-area: lead; position: relative; z-index: 3; max-width: 30em; margin: 12px auto 0; font-size: 15px; line-height: 1.6; color: var(--chu); }
.hero__cta { display: none; grid-area: cta; justify-content: center; }
.hero__stage { grid-area: stage; position: relative; z-index: 1; }
.arch {
  margin: 0; padding: 6px;
  /* Rộng tối đa 80% màn, nhưng không cao quá phần màn còn lại sau biểu tượng, tên, đoạn giới thiệu và núi */
  width: min(80vw, 340px); width: min(80vw, 340px, calc((100vh - 400px) * .886 + 12px)); width: min(80vw, 340px, calc((100svh - 400px - env(safe-area-inset-bottom, 0px)) * .886 + 12px));
  border: 1px solid rgba(216,180,107,.85); border-radius: 999px 999px 10px 10px;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%);
  background: rgba(14,37,25,.6);
  box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.28);
}
.arch__in { position: relative; overflow: hidden; aspect-ratio: 620 / 700; border-radius: 999px 999px 6px 6px; box-shadow: inset 0 0 0 1px rgba(216,180,107,.35); }
.arch__in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: keo 16s ease-in-out infinite alternate; }
@keyframes keo { from { transform: scale(1.1); } to { transform: scale(1.18) translateY(-1.5%); } } /* luôn phóng ≥10% để dịch theo chuột (±5px) không lộ mép */

/* Núi: 2 lớp đổ bóng mềm, không viền. Đường cong kéo giãn theo bề ngang vẫn tự nhiên, không bị cắt ở màn rộng */
.mtn { position: absolute; left: 0; width: 100%; pointer-events: none; }
.hero .mtn { z-index: 0; will-change: transform; }
.mtn--back { bottom: var(--marks-h); height: var(--nui); }
.mtn--mid { bottom: var(--marks-h); height: calc(var(--nui) * .69); }


/* ---------- Khung chung các phần ---------- */
.sec { position: relative; padding: clamp(36px, 10vh, 80px) 0 clamp(32px, 8vh, 64px); }
.sec--pattern { background: var(--pattern), linear-gradient(180deg, var(--rung-2), var(--rung)); border-block: 1px solid rgba(216,180,107,.16); }
.head { text-align: center; margin-bottom: 32px; }
.kicker { margin: 0 0 10px; font-size: 14px; letter-spacing: .03em; color: var(--chu-mo); }
.h2 { margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 12.8vw, 64px); line-height: 1.16; color: var(--kem); }
.h2 span { display: block; }
.orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.orn::before, .orn::after { content: ""; width: 56px; height: 1px; }
.orn::before { background: linear-gradient(90deg, transparent, var(--vang)); }
.orn::after { background: linear-gradient(270deg, transparent, var(--vang)); } /* đậm phía hình thoi, không lật bằng transform */
.orn i { width: 7px; height: 7px; border: 1px solid var(--vang); transform: rotate(45deg); }

/* Khung ảnh/video viền vàng đôi, góc như khung nhãn */
.frame { padding: 5px; border: 1px solid rgba(216,180,107,.7); background: rgba(0,0,0,.18); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); }
.frame__in { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #0a1a12; box-shadow: inset 0 0 0 1px rgba(216,180,107,.3); }
.frame__in img, .frame__in video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__in video { opacity: 0; transition: opacity .35s ease; }
.frame__in video.is-on { opacity: 1; }
.frame__in::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(var(--vang), var(--vang)) top left / 18px 1px no-repeat,
    linear-gradient(var(--vang), var(--vang)) top left / 1px 18px no-repeat,
    linear-gradient(var(--vang), var(--vang)) top right / 18px 1px no-repeat,
    linear-gradient(var(--vang), var(--vang)) top right / 1px 18px no-repeat,
    linear-gradient(var(--vang), var(--vang)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--vang), var(--vang)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--vang), var(--vang)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--vang), var(--vang)) bottom right / 1px 18px no-repeat;
}

/* ---------- Ba điểm nhấn: khung vòm chạy video, số viền vàng, tiêu đề hai màu ---------- */
.diem-sec { padding-top: 52px; border-bottom: 1px solid rgba(216,180,107,.16); background: radial-gradient(70% 30% at 50% 22%, rgba(216,180,107,.08), transparent 70%), linear-gradient(180deg, #153A28 0, var(--rung) 320px, var(--rung-2) 100%); } /* mép trên đúng màu chân núi đầu trang (liền, không đường nối), tối dần sau khi cuộn qua */
.diem-list { display: grid; gap: 40px; max-width: 520px; margin: 0 auto; }
.diem { display: grid; grid-template-columns: 43% 1fr; gap: 22px; align-items: center; }
.diem:nth-child(even) { grid-template-columns: 1fr 43%; }
.diem:nth-child(even) .diem__media { order: 2; }
.diem:nth-child(even) .diem__body { text-align: right; }
.diem__media { position: relative; padding-bottom: 20px; }
.diem__arch {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #0a1a12;
  border: 1px solid rgba(216,180,107,.85); border-radius: 999px 999px 8px 8px;
  box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.28), 0 26px 44px -22px rgba(0,0,0,.85);
  transition: border-color .4s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.diem__arch img, .diem__arch video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.diem__arch video { opacity: 0; }
.diem__arch video.is-on { opacity: 1; }
.diem__arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,16,11,.55)); pointer-events: none; }
.diem__icon {
  position: absolute; left: 50%; bottom: 0; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold-flat);
  box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.5), 0 10px 22px rgba(0,0,0,.5);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.diem__icon svg { width: 23px; height: 23px; fill: none; stroke: #1B1407; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.diem__t { margin: 0 0 8px; font: 600 25px/1.2 var(--display); text-transform: uppercase; color: var(--kem); letter-spacing: .01em; }
.diem__t span { display: block; }
.diem__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--chu); }
.diem:active .diem__arch { border-color: var(--vang-sang); box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.6), 0 0 34px -6px rgba(216,180,107,.45); }
.diem:active .diem__icon { transform: scale(.92); }

/* ---------- Quy trình: cuộn dọc từng bước, vạch vàng chạy theo, bước đang xem sáng lên ---------- */
.steps { list-style: none; position: relative; max-width: 560px; margin: 0 auto; padding: 0 0 0 34px; }
.steps::before, .steps::after { content: ""; position: absolute; left: 9px; top: 26px; bottom: 26px; width: 1px; }
.steps::before { background: rgba(216,180,107,.2); }
.steps::after {
  transform-origin: top; transform: scaleY(var(--p, 0)); will-change: transform;
  background: linear-gradient(180deg, var(--vang), var(--vang-sang)); box-shadow: 0 0 10px rgba(216,180,107,.55);
}
.step { position: relative; }
.step + .step { margin-top: 64px; }
.step__n {
  position: absolute; z-index: 1; left: -33px; top: 18px; width: 19px; height: 19px;
  transform: rotate(45deg); border: 1px solid var(--vang); background: var(--rung); box-shadow: 0 0 0 6px var(--rung);
}
.step__head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 26px; } /* chừa chỗ khung video nhấc lên khi rê chuột */
.step__no {
  flex: none; font: 600 70px/.82 var(--display); letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1px rgba(216,180,107,.65);
}
.step__of { margin: 0 0 4px; font: 600 11.5px/1.4 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--chu-mo); }
.step__t { margin: 0; font: 600 clamp(28px, 8vw, 34px)/1.12 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--kem); }
.step__desc { margin: 22px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--chu); }
.step__body > .frame { width: min(100%, calc((100vh - 270px) * .8 + 12px)); width: min(100%, calc((100svh - 270px - env(safe-area-inset-bottom, 0px)) * .8 + 12px)); }

/* Bước đang xem: các bước khác dịu xuống để mắt tập trung.
   Vạch vàng chạm hình thoi của bước nào (JS gắn is-qua) thì hình thoi tô vàng và xoay nửa vòng, bước đó sáng lên (is-active). */
.step { transition: opacity .6s ease; }
.steps.is-live .step:not(.is-active) { opacity: .45; }
.step__n { transition: background-color .45s ease, box-shadow .45s ease, rotate .9s cubic-bezier(.3,.8,.25,1); }
.step__no, .step .frame { transition: color .45s ease, -webkit-text-stroke-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.step.is-qua .step__n { background: var(--vang); rotate: 180deg; }
.step.is-active .step__n { box-shadow: 0 0 0 6px var(--rung), 0 0 20px rgba(216,180,107,.75); }
.step.is-active .step__no { color: rgba(216,180,107,.16); -webkit-text-stroke-color: var(--vang-sang); }
.step.is-active .frame { border-color: var(--vang-sang); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7), 0 0 34px -16px rgba(216,180,107,.45); }

/* ---------- Về cơ sở ---------- */
.about__lead { margin: 0 auto 24px; max-width: 36em; font-size: 16.5px; color: var(--chu); text-align: center; }
.place {
  max-width: 460px; margin: 0 auto 36px; padding: 18px 20px;
  border: 1px solid var(--vien); background: linear-gradient(180deg, rgba(216,180,107,.07), rgba(216,180,107,.02));
  text-align: center;
}
.place__label { margin: 0 0 6px; font: 500 12px/1.4 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--vang); }
.place address { font-style: normal; color: var(--chu-mo); text-wrap: balance; }
.place strong { display: block; color: var(--kem); font-weight: 600; }
.place__cu { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--chu-mo); opacity: .85; }
.place .link { margin-top: 6px; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 460px; margin: 0 auto; }
.gallery figure { margin: 0; }
.gallery__big { grid-column: 1 / -1; }
.gallery__big .frame__in { max-height: calc(100vh - 150px); }
.gallery figcaption { margin-top: 8px; font-size: 14px; color: var(--chu-mo); text-align: center; }

/* ---------- Rượu tại cơ sở: ảnh bình thật, không thông số chai ---------- */
.ruou__lead { margin: 0 auto 28px; max-width: 34em; text-align: center; font-size: 16.5px; color: var(--chu); text-wrap: balance; }
.ruou__lead strong { color: var(--kem); font-weight: 600; }
.ruou { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; max-width: 520px; margin: 0 auto; }
.ruou > .ruou__doc:first-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 300px); } /* dòng rượu sâm: chum ngâm sâm lớn trước */
.ruou figure { margin: 0; }
.ruou__vom {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #0a1a12;
  border: 1px solid rgba(216,180,107,.85); border-radius: 999px 999px 8px 8px;
  box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.28), 0 26px 44px -22px rgba(0,0,0,.85);
  transition: border-color .4s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.ruou__vom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ruou__ngang { grid-column: 1 / -1; }
.ruou__ngang .frame__in { aspect-ratio: 3 / 2; }
.ruou figcaption { margin-top: 12px; text-align: center; font-size: 14.5px; color: var(--chu-mo); transition: color .3s ease; }

/* ---------- Giấy tờ ---------- */
.docs { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 520px; }
.doc {
  display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: start; padding: 18px 16px;
  border: 1px solid rgba(216,180,107,.3); background: linear-gradient(135deg, rgba(216,180,107,.08), rgba(216,180,107,.015) 60%);
}
.doc__paper {
  position: relative; display: block; padding: 3px; border: 1px solid rgba(216,180,107,.6); background: #0a1a12; cursor: zoom-in;
  transform: rotate(-2.5deg); box-shadow: 6px 8px 0 -2px rgba(216,180,107,.12), 0 14px 24px -10px rgba(0,0,0,.7);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.doc + .doc .doc__paper { transform: rotate(2deg); }
.doc__paper img { width: 100%; height: auto; aspect-ratio: 200 / 283; object-fit: cover; }
.doc__zoom { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-flat); box-shadow: 0 0 0 3px var(--rung); }
.doc__zoom svg { width: 15px; height: 15px; fill: none; stroke: #1B1407; stroke-width: 2.2; stroke-linecap: round; }
.doc__info { min-width: 0; }
.doc__kind { margin: 0 0 4px; font: 600 11.5px/1.4 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--vang); }
.doc h3 { margin: 0 0 6px; font: 600 16px/1.4 var(--text); color: var(--kem); }
.doc__so { margin: 0 0 6px; font: 600 14.5px/1.4 var(--text); color: var(--vang-sang); letter-spacing: .02em; }
.doc__meta { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--chu-mo); }
.doc .link { min-height: 40px; margin-top: 4px; font-size: 14px; }
.docs__note { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--chu-mo); }
/* Mời xem giấy tờ. Tờ giấy lắc theo cú cuộn như giấy thật (JS đặt rotate/translate), cuộn tới vừa tầm mắt thì rung mạnh hơn
   kèm một nhịp sáng (is-loe): viền vàng sáng, vệt sáng lướt qua mặt giấy, kính lúp tỏa vòng, mũi tên "Xem bản giấy" nhích tới. */
.doc__paper::before {
  content: ""; position: absolute; inset: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,246,214,.6) 50%, transparent 62%) no-repeat 100% 0 / 250% 100%;
}
.doc__paper::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px var(--vang-sang), 0 0 24px 2px rgba(216,180,107,.55); transition: opacity .4s ease; }
.doc__zoom { z-index: 2; }
.doc__zoom::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--vang-sang); opacity: 0; pointer-events: none; }
.doc.is-loe .doc__paper::after { animation: giay-vien 2s ease; }
.doc.is-loe .doc__paper::before { animation: giay-loe 2s ease-in-out; }
.doc.is-loe .doc__zoom { animation: lup-nhip 2s ease; }
.doc.is-loe .doc__zoom::after { animation: lup-vong 2s ease-out; }
.doc.is-loe .link span { display: inline-block; animation: mui-nhich 2s ease; }
@keyframes giay-vien { 0% { opacity: 0; } 10%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes giay-loe { 0%, 20% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes lup-nhip { 0%, 50%, 100% { transform: none; } 14% { transform: scale(1.18); } 30% { transform: scale(.96); } }
@keyframes lup-vong { 0%, 8% { opacity: 0; transform: scale(1); } 14% { opacity: .9; } 80%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes mui-nhich { 0%, 60%, 100% { transform: none; } 16% { transform: translateX(5px); } 30% { transform: translateX(1px); } 44% { transform: translateX(3px); } }

/* ---------- Liên hệ ---------- */
.contact__lead { margin: 0 auto 24px; max-width: 32em; text-align: center; color: var(--chu); }
.contact__list { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; border-top: 1px solid rgba(216,180,107,.28); }
.contact__list li { border-bottom: 1px solid rgba(216,180,107,.28); }
.contact__list a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 6px; text-decoration: none; transition: background-color .25s ease, padding .3s ease; }
.contact__list a::after { content: "→"; color: var(--vang); opacity: .6; transition: transform .25s ease, opacity .25s ease; }
.contact__list a:active { background: rgba(216,180,107,.07); }
.ci { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(216,180,107,.45); border-radius: 50%; }
.ci svg { width: 19px; height: 19px; fill: none; stroke: var(--vang-sang); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.contact__list .cl { flex: 1; font-size: 15px; color: var(--chu-mo); }
.contact__list strong { font: 600 19px/1.2 var(--display); letter-spacing: .03em; color: var(--kem); white-space: nowrap; }

/* ---------- Chân trang ---------- */
.foot { position: relative; padding: 40px 0 110px; /* chừa chỗ nút lên đầu trang (52px + cách thanh 24px) để không che dòng cuối */ text-align: center; background: var(--pattern), var(--rung-3); }
.mtn--foot { bottom: calc(100% - 1px); height: clamp(40px, 5vw, 90px); fill: var(--rung-3); }
#lien-he { padding-bottom: calc(clamp(32px, 6vh, 56px) + clamp(40px, 5vw, 90px)); border-bottom: 0; }
.foot__in { display: grid; gap: 22px; justify-items: center; }
.foot__brand img { width: 190px; height: auto; margin: 0 auto; }
.foot__tag { margin: 8px 0 0; font: 500 15px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--vang); }
.foot p { margin: 0; }
.foot__info { font-size: 14.5px; color: var(--chu-mo); display: grid; gap: 8px; }
.foot__info strong { color: var(--kem); font-weight: 600; }
.foot__info a { color: var(--vang-sang); text-decoration: none; white-space: nowrap; }
.foot__resp { font: 600 14.5px/1.5 var(--text); color: var(--vang-sang); }
.foot__warn { font-size: 14px; color: var(--chu); }
.foot__copy { margin-top: 8px !important; font-size: 12.5px; color: var(--chu-mo); }

/* ---------- Thanh liên hệ cố định (điện thoại, máy tính bảng): 5 cách liên hệ ngang hàng ---------- */
.bar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  height: calc(var(--bar-h) + var(--safe-b)); padding: 0 4px var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: linear-gradient(180deg, #12301F, #0A1C13);
  border-top: 1px solid rgba(216,180,107,.5); box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.bar a, .bar button {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 5px;
  height: var(--bar-h); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--kem); text-decoration: none; font: 500 12.5px/1.2 var(--text);
}
.bar svg { width: 25px; height: 25px; fill: none; stroke: var(--vang); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.bar a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -32px 0 0 -28px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,180,107,.24), rgba(216,180,107,0) 70%); transform: scale(0); transition: transform .25s ease;
}
.bar a:active::before { transform: scale(1); }
.bar a:active svg { transform: scale(.88); }
.bar .bar__main { align-content: end; padding-bottom: 11px; color: var(--vang-sang); font-weight: 600; }
.bar__coin {
  width: 52px; height: 52px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-flat); box-shadow: 0 0 0 4px var(--rung-2), 0 0 0 5px rgba(216,180,107,.5), 0 8px 18px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.bar .bar__coin svg { stroke: #1B1407; width: 24px; height: 24px; }
.bar__main:active .bar__coin { transform: scale(.92); }

/* ---------- Hộp thoại ---------- */
.x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid rgba(216,180,107,.5); background: none; color: var(--vang-sang); cursor: pointer; }
.x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.x:hover { background: rgba(216,180,107,.1); }

.sheet {
  width: min(100% - 24px, 440px); max-width: none; margin: auto auto 12px; padding: 20px;
  border: 1px solid rgba(216,180,107,.55); background: var(--pattern), var(--rung-2); color: var(--chu);
}
.sheet::backdrop { background: rgba(3,10,6,.72); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; }
.sheet h2 { margin: 0; font: 600 26px/1.3 var(--display); text-transform: uppercase; color: var(--kem); }
.sheet p { margin: 6px 0 14px; color: var(--chu-mo); }
.sheet__opt { display: flex; align-items: center; gap: 12px; min-height: 58px; margin-top: 10px; padding: 0 16px 0 8px; border: 1px solid rgba(216,180,107,.4); text-decoration: none; }
.sheet__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(216,180,107,.12); }
.sheet__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--vang-sang); stroke-width: 1.7; stroke-linejoin: round; }
.sheet__opt .sheet__lbl { flex: 1; }

.sheet__opt:hover { background: rgba(216,180,107,.08); }
.sheet__opt span { color: var(--chu-mo); }
.sheet__opt strong { font: 600 19px/1 var(--display); letter-spacing: .03em; color: var(--vang-sang); }

.viewer {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; background: rgba(6,16,11,.97); color: var(--chu); overflow: auto; overscroll-behavior: contain;
}
.viewer::backdrop { background: rgba(3,10,6,.85); }
.viewer__head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: rgba(10,28,19,.96); border-bottom: 1px solid rgba(216,180,107,.3);
}
.viewer h2 { margin: 0; font: 600 16px/1.4 var(--text); color: var(--kem); }
.viewer__pages { display: grid; gap: 16px; padding: 16px; max-width: 900px; margin: 0 auto; }
.viewer__pages img { width: 100%; height: auto; background: #fff; }

/* ===================== Máy tính bảng ≥ 640px ===================== */
@media (min-width: 640px) {
  .hero__lead { max-width: 34em; margin: 16px auto 0; font-size: 17px; }
  .hero__emblem { width: clamp(48px, 6vh, 64px); }
  .arch { width: min(56vw, 500px, calc((100vh - 440px) * .886 + 12px)); width: min(56vw, 500px, calc((100svh - 440px) * .886 + 12px)); }

  .diem-list { max-width: 900px; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .diem, .diem:nth-child(even) { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .diem:nth-child(even) .diem__media { order: 0; }
  .diem:nth-child(even) .diem__body { text-align: center; }
  .diem__arch { width: min(100%, 300px); margin: 0 auto; }
  .diem__t { font-size: 24px; }
  .diem__body p { max-width: 22em; margin-inline: auto; }


  /* Ảnh cơ sở: cả khối ảnh cao theo màn (không vượt một màn), chú thích nằm trên ảnh */
  .gallery { max-width: 760px; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(250px, calc(100vh - 140px), 620px); }
  .gallery__big { grid-column: 1; grid-row: 1 / span 2; }
  .gallery figure, .gallery__big { position: relative; display: flex; flex-direction: row; min-height: 0; }
  .gallery .frame, .gallery__big .frame { flex: 1; display: flex; min-height: 0; }
  .gallery .frame__in, .gallery__big .frame__in { flex: 1; aspect-ratio: auto; min-height: 0; }
  .gallery .frame__in::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(6,16,11,.82)); }
  .gallery figcaption { position: absolute; z-index: 2; left: 20px; right: 16px; bottom: 16px; margin: 0; text-align: left; font-size: 14.5px; color: var(--kem); text-shadow: 0 1px 8px rgba(0,0,0,.7); }

  .docs { max-width: 900px; grid-template-columns: 1fr 1fr; gap: 18px; }
  .docs > .doc:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); } /* 3 giấy: thẻ thứ ba nằm giữa */
}
@media (min-width: 640px) and (max-width: 767px) and (max-aspect-ratio: 5/4) {
  .docs { max-width: 560px; grid-template-columns: 1fr; } /* máy dọc hẹp: thẻ giấy một cột cho số hiệu đủ một dòng */
  .docs > .doc:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}
@media (min-width: 640px) {
  .ruou { max-width: 760px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 22px; }
  .ruou > .ruou__doc, .ruou > .ruou__doc:first-child { grid-column: span 2; justify-self: stretch; width: auto; }
  .ruou__ngang { grid-column: span 3; }
}

/* ===================== Máy tính ≥ 1024px ===================== */
@media (min-width: 1024px) {
  html { scroll-padding-top: 72px; } /* thanh trên thu còn 64px khi cuộn */
  body { padding-bottom: 0; }
  .bar { display: none; }

  /* Thanh trên cùng */
  .top {
    display: block; position: sticky; top: 0; z-index: 40; height: var(--top-h);
    background: rgba(9,26,17,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(216,180,107,.28);
  }
  .top__in { height: 100%; display: flex; align-items: center; gap: clamp(20px, 2.8vw, 40px); }
  .top__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .top__brand img { width: 42px; height: auto; }
  .top__brand span { font: 600 21px/1.3 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--kem); }
  .top__nav { display: flex; gap: clamp(18px, 2.2vw, 32px); margin-left: auto; }
  .top__nav a { position: relative; padding: 8px 0; font-size: 15px; font-weight: 500; color: var(--chu); text-decoration: none; transition: color .2s ease; }
  .top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--vang); transform: scaleX(0); transition: transform .25s ease; }
  .top__nav a:hover, .top__nav a.is-here { color: var(--vang-sang); }
  .top__nav a:hover::after, .top__nav a.is-here::after { transform: scaleX(1); }
  .top__act { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); padding-left: clamp(18px, 2.2vw, 32px); border-left: 1px solid rgba(216,180,107,.25); }
  .top__phone { display: grid; text-decoration: none; font: 600 19px/1.2 var(--display); letter-spacing: .04em; color: var(--vang-sang); }
  .top__phone small { font: 500 11px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--chu-mo); }

  /* Đầu trang máy tính: phần chung với máy nằm ngang ở khối "Đầu trang hai cột" */
  .hero { min-height: calc(100vh - var(--top-h)); }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px, 3.6vh, 30px); }
  .hero__cta .btn { white-space: nowrap; padding: 0 clamp(14px, 1.7vw, 22px); font-size: clamp(15px, 1.5vw, 18px); }
  .hero__emblem { display: none; } /* thanh trên đã có biểu tượng */

  /* Khung chung */
  .sec { padding: clamp(64px, 11vh, 120px) 0; }
  .head { margin-bottom: clamp(32px, 6vh, 56px); }
  .head--start { text-align: left; }
  .head--start .orn { justify-content: flex-start; }
  .head--start .orn::before { display: none; }
  .head--start .orn::after { width: 96px; background: linear-gradient(90deg, var(--vang), transparent); }
  .h2 { font-size: clamp(52px, 5vw, 72px); }
  .h2 span { display: inline; }
  .head--start .h2 span { display: block; }
  .kicker { font-size: 15px; }

  /* Ba điểm nhấn */
  .diem-sec { padding-top: clamp(64px, 11vh, 120px); }
  .diem-list { max-width: none; gap: 48px; }
  .diem__arch { width: min(100%, 340px, calc((100vh - 300px) * .75)); } /* cả hàng 3 khung + chữ vừa một màn */
  .diem__t { font-size: 30px; }
  .diem__body p { font-size: 16px; }

  /* Quy trình: so le video / chữ quanh đường vàng giữa */
  .steps { max-width: 1060px; padding: 0; }
  .steps::before, .steps::after { left: 50%; top: 0; bottom: 0; }
  .step + .step { margin-top: 96px; }
  .step__n { left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; }
  .step__body {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 120px;
    grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "media ." "media head" "media desc" "media .";
  }
  .step:nth-child(even) .step__body { grid-template-areas: ". media" "head media" "desc media" ". media"; }
  .step__body > .frame { grid-area: media; width: min(100%, 380px, calc((100vh - 140px) * .8 + 12px)); justify-self: end; }
  .step:nth-child(even) .step__body > .frame { justify-self: start; }
  .step__head { grid-area: head; margin-bottom: 20px; }
  .step__desc { grid-area: desc; margin: 0; max-width: 24em; font-size: 18px; }
  .step:nth-child(even) .step__head { justify-self: end; flex-direction: row-reverse; text-align: right; }
  .step:nth-child(even) .step__desc { justify-self: end; text-align: right; }
  .step__no { font-size: 104px; }
  .step__t { font-size: 40px; }

  /* Về cơ sở: chữ trái, ảnh phải */
  .about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
  .about .h2, .contact .h2 { font-size: clamp(42px, 4.4vw, 72px); }
  .about .head { margin-bottom: 28px; }
  .about__lead { margin: 0 0 32px; text-align: left; font-size: 18px; line-height: 1.75; }
  .place { margin: 0; max-width: none; text-align: left; padding: 22px 26px; }
  .gallery { max-width: none; margin: 0; gap: 20px; }
  /* Bấm "Về cơ sở" phải thấy trọn phần: khung ảnh cao theo màn hình, chú thích nằm trên ảnh */
  #ve-co-so { padding-block: 72px; }
  .gallery { height: clamp(380px, calc(100vh - var(--top-h) - 150px), 620px); }
  .gallery figcaption { left: 24px; bottom: 20px; }

  .docs { max-width: 1040px; gap: 28px; }
  .docs > .doc:last-child:nth-child(odd) { width: calc(50% - 14px); }
  .ruou__lead { margin-bottom: clamp(28px, 5vh, 44px); font-size: 18px; }
  .ruou { max-width: min(1060px, calc((100vh - var(--top-h) - 110px) * 2.3)); gap: 34px 26px; }
  .doc { grid-template-columns: 112px 1fr; gap: 26px; padding: 26px 26px 22px; }
  .doc h3 { font-size: 17px; }

  /* Liên hệ: chữ trái, nút phải */
  .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .contact .head { margin-bottom: 24px; }
  .contact__lead { margin: 0; text-align: left; font-size: 18px; }
  .contact__list { margin: 0; max-width: none; }

  /* Chân trang: 3 cột */
  .foot { padding: clamp(36px, 5vh, 56px) 0 44px; text-align: left; }
  #lien-he { padding-bottom: calc(clamp(48px, 8vh, 88px) + clamp(40px, 5vw, 90px)); }
  .foot__in { grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; justify-items: stretch; align-items: start; }
  .foot__brand img { margin: 0; width: 220px; }
  .foot__legal { text-align: right; }

  /* Hộp thoại giữa màn hình */
  .sheet { margin: auto; padding: 28px; }
  .viewer { width: min(100% - 48px, 960px); height: calc(100% - 48px); margin: auto; border: 1px solid rgba(216,180,107,.4); }
  .viewer__head { padding: 14px 24px; }
  .viewer__pages { padding: 24px; }
}


/* ===================== Đầu trang hai cột: máy tính, và điện thoại / máy tính bảng nằm ngang ===================== */
@media (min-width: 600px) and (min-aspect-ratio: 5/4) {
  .hero {
    --nui: clamp(64px, min(16vw, 26vh), 340px);
    --dem: clamp(24px, 5vh, 64px); /* lề trên nội dung */
  }
  .hero__in {
    width: min(100% - 80px, 1180px); margin: 0 auto; padding: var(--dem) 0 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr; column-gap: clamp(32px, 4vw, 96px);
    grid-template-areas: "text stage"; justify-items: stretch; align-content: stretch; text-align: left;
  }
  /* Chữ nằm giữa phần trên núi (đỉnh núi cao nhất dưới chữ ≈ 75% lớp sau), khung vòm đứng trước núi, không bị núi cắt */
  .hero__text { display: block; grid-area: text; align-self: center; margin-bottom: calc(var(--nui) * .75 + 24px); container-type: inline-size; }
  .hero__cta { justify-content: flex-start; }
  .hero__emblem { display: none; }
  .seal { justify-content: flex-start; margin: 0 0 clamp(8px, 1.8vh, 14px); font-size: 13px; }
  .seal::before { display: none; }
  .seal::after { transform: none; width: 64px; background: linear-gradient(90deg, var(--vang), transparent); }
  .title { margin: 0; }
  /* Tên thương hiệu luôn một dòng: không lớn hơn bề ngang cột chữ (cqi = 1% bề ngang cột) */
  .title__l1 { font-size: clamp(40px, min(6vw, 12vh), 124px); font-size: clamp(40px, min(6vw, 12vh, 16cqi), 124px); }
  .title__l2 { font-size: clamp(24px, min(3.1vw, 5.4vh), 54px); font-size: clamp(24px, min(3.1vw, 5.4vh, 10cqi), 54px); margin-top: calc(10px - .32em); }
  .hero__lead { margin: clamp(12px, 2.6vh, 22px) 0 0; max-width: 30em; font-size: clamp(15px, 2.3vh, 18px); line-height: 1.7; }
  .hero__stage { grid-area: stage; align-self: center; z-index: 3; margin: 0 0 calc(var(--nui) * .2); }
  .arch { -webkit-mask-image: none; mask-image: none; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 5px rgba(14,37,25,.6), 0 0 0 6px rgba(216,180,107,.25); }
  .arch__in { aspect-ratio: 620 / 740; }
}

/* Máy tính (màn ngang): khung vòm cao theo màn, trừ thanh trên, lề trên và phần núi dưới chân */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  /* Khung vòm tối đa 55% bề ngang nội dung (chừa cột chữ), và không cao quá màn */
  .hero { --vom-max: calc((100vw - 232px) * .55 - 4vw); }
  .arch { width: min(var(--vom-max), 720px, calc((100vh - var(--top-h) - var(--dem) - var(--nui) * .2 - 48px) * .8378 + 14px)); }
}
@media (min-width: 1440px) and (min-aspect-ratio: 5/4) {
  .hero { --vom-max: calc(1180px * .55 - 4vw); }
}
@media (min-width: 1760px) and (min-aspect-ratio: 5/4) {
  .hero { --vom-max: calc(1400px * .55 - 4vw); }
  .hero__lead { font-size: 20px; }
}
/* Màn 2K trở lên: chữ đầu trang lớn theo, cân với khung vòm */
@media (min-width: 2200px) and (min-aspect-ratio: 5/4) {
  .hero__in { width: min(100% - 320px, 1840px); }
  .hero { --vom-max: 760px; }
  .arch { width: min(760px, calc((100vh - var(--top-h) - var(--dem) - var(--nui) * .2 - 48px) * .8378 + 14px)); }
  .seal { font-size: 15px; }
  .title__l1 { font-size: clamp(40px, min(6vw, 12vh, 16cqi), 152px); }
  .title__l2 { font-size: clamp(24px, min(3.1vw, 5.4vh, 10cqi), 66px); }
  .hero__lead { font-size: 23px; max-width: 32em; }
  .hero__cta .btn { min-height: 62px; padding: 0 30px; font-size: 21px; }
}

/* Máy tính màn đứng hoặc gần vuông (màn xoay dọc, màn lớn): đầu trang xếp dọc như điện thoại.
   Khung vòm lớn theo màn (không cao quá phần màn còn lại), chữ và nút lớn theo khung vòm; không nhỏ hơn cỡ đang dùng ở màn thường */
@media (min-width: 1024px) and (max-aspect-ratio: 1249/1000) {
  .hero { --vom: min(80vw, 1400px, calc((100vh - var(--top-h) - 250px) / 1.52)); }
  .arch { width: max(min(56vw, 500px, calc((100vh - 440px) * .886 + 12px)), var(--vom)); }
  .seal { font-size: max(12px, calc(var(--vom) * .024)); }
  .seal::before, .seal::after { width: max(34px, calc(var(--vom) * .068)); }
  .title { margin-top: calc(-1 * max(84px, calc(var(--vom) * .168))); }
  .title__l1 { font-size: max(76px, calc(var(--vom) * .152)); }
  .title__l2 { font-size: max(40px, calc(var(--vom) * .08)); }
  .hero__lead { font-size: max(17px, calc(var(--vom) * .034)); margin-top: max(16px, calc(var(--vom) * .032)); }
  .hero__cta { gap: max(14px, calc(var(--vom) * .028)); margin-top: max(18px, min(3.6vh, 30px), calc(var(--vom) * .05)); }
  .hero__cta .btn { min-height: max(52px, calc(var(--vom) * .104)); padding: 0 max(22px, calc(var(--vom) * .044)); font-size: max(18px, calc(var(--vom) * .036)); }
}

/* Điện thoại, máy tính bảng nằm ngang (chưa tới bố cục máy tính): khung vòm theo chiều cao màn */
@media (min-width: 600px) and (max-width: 1023px) and (min-aspect-ratio: 5/4) {
  /* Tiêu đề phần một dòng, cỡ theo chiều cao để không chiếm hết màn ngang thấp */
  .h2 { font-size: clamp(34px, min(6vw, 13vh), 56px); }
  .h2 span { display: inline; }
  .arch { width: min(38vw, 440px, calc((100vh - 70px - var(--dem) - var(--nui) * .2 - 32px) * .8378 + 14px)); }
}

/* Máy nằm ngang, màn thấp (điện thoại xoay ngang): mỗi điểm nhấn, mỗi bước là ảnh trái chữ phải, vừa một màn */
@media (min-width: 600px) and (max-width: 1023px) and (min-aspect-ratio: 5/4) and (max-height: 540px) {
  .hero { --nui: clamp(52px, 20vh, 120px); --dem: 16px; }
  .hero__lead { font-size: 15px; line-height: 1.6; }
  .doc { padding: 14px 16px; }
  .doc__so { letter-spacing: 0; font-size: 14px; }
  .foot { padding-top: 28px; }
  .diem-list { grid-template-columns: 1fr; max-width: 640px; gap: 28px; }
  .diem, .diem:nth-child(even) { grid-template-columns: auto minmax(0, 1fr); gap: 28px; text-align: left; }
  .diem:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto; }
  .diem:nth-child(even) .diem__media { order: 2; }
  .diem:nth-child(even) .diem__body { text-align: right; }
  .diem__arch { margin: 0; width: calc((100vh - 140px) * .75); width: calc((100svh - 140px) * .75); }
  .diem__body p { margin-inline: 0; max-width: none; }

  .steps { max-width: 820px; }
  .step__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; grid-template-areas: "media head" "media desc"; }
  .step__body > .frame { grid-area: media; width: calc((100vh - 110px) * .8 + 12px); width: calc((100svh - 110px) * .8 + 12px); }
  .step__head { grid-area: head; align-self: end; }
  .step__desc { grid-area: desc; align-self: start; }
  .step + .step { margin-top: 40px; }
  .ruou { max-width: 940px; grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr; gap: 14px; }
  .ruou > .ruou__doc, .ruou > .ruou__doc:first-child, .ruou__ngang { grid-column: auto; }
  .ruou figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.35; }
  .ruou__vom { height: calc(100vh - 170px); height: calc(100svh - 170px); aspect-ratio: auto; }
  .ruou__ngang .frame__in { height: calc(100vh - 180px); height: calc(100svh - 180px); aspect-ratio: auto; }
  .ruou__lead { margin-bottom: 18px; }
}

/* Máy tính dưới 1440px: chừa lề 116px mỗi bên cho cụm nút nổi (52px + cách góc 40px + cách nội dung 24px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .wrap, .hero__in { width: min(100% - 232px, 1180px); margin-inline: auto; }
  .doc { grid-template-columns: 96px 1fr; gap: 20px; padding: 22px; }
}

/* Máy tính màn thấp (laptop 1280×720, 1366×768): thu khoảng cách để bấm menu thấy trọn từng phần */
/* Máy tính 1024–1279px, đúng 3 giấy: một hàng 3 thẻ gọn (ảnh giấy + nhãn + tên ở trên; số hiệu, nơi cấp, nút xem ở dưới) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .docs:has(> .doc:nth-child(3):last-child) { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .docs:has(> .doc:nth-child(3):last-child) > .doc { grid-template-columns: 66px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: start; padding: 16px 16px 12px; }
  .docs:has(> .doc:nth-child(3):last-child) > .doc:last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .docs:has(> .doc:nth-child(3):last-child) .doc__info { display: contents; }
  .docs:has(> .doc:nth-child(3):last-child) .doc__paper { grid-column: 1; grid-row: 1 / span 2; }
  .docs:has(> .doc:nth-child(3):last-child) .doc__kind { grid-column: 2; grid-row: 1; font-size: 11px; letter-spacing: .08em; }
  .docs:has(> .doc:nth-child(3):last-child) .doc h3 { grid-column: 2; grid-row: 2; font-size: 15.5px; }
  .docs:has(> .doc:nth-child(3):last-child) .doc__so { grid-column: 1 / -1; margin-top: 12px; }
  .docs:has(> .doc:nth-child(3):last-child) .doc__meta { grid-column: 1 / -1; font-size: 14px; }
  .docs:has(> .doc:nth-child(3):last-child) .doc .link { grid-column: 1 / -1; justify-self: start; }
}

/* Máy tính ≥1280px, đúng 3 giấy: xếp một hàng để bấm "Giấy tờ" thấy trọn phần */
@media (min-width: 1280px) {
  .docs:has(> .doc:nth-child(3):last-child) { max-width: 1180px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .docs:has(> .doc:nth-child(3):last-child) > .doc { grid-template-columns: 84px 1fr; gap: 18px; padding: 22px 20px 18px; }
  .docs:has(> .doc:nth-child(3):last-child) > .doc:last-child { grid-column: auto; justify-self: stretch; width: auto; }
}

@media (min-width: 1024px) and (max-height: 860px) {
  #ve-co-so { padding-block: 36px; }
  #giay-to { padding-block: clamp(32px, 6vh, 56px); }
  #giay-to .head { margin-bottom: 22px; }
  #giay-to .h2 { font-size: clamp(40px, 6.8vh, 60px); }
  .about .head { margin-bottom: 18px; }
  .about .h2 { font-size: clamp(38px, 6.4vh, 56px); }
  .about__lead { margin-bottom: 16px; font-size: 16.5px; line-height: 1.65; }
  .place { padding: 14px 22px; }
  .gallery { height: clamp(360px, calc(100vh - 150px), 620px); }
}

@media (min-width: 1024px) and (max-height: 600px) {
  .head, .about .head { margin-bottom: 16px; }
  #giay-to { padding-block: 26px; }
  #giay-to .h2 { font-size: 34px; }
  #giay-to .head { margin-bottom: 14px; }
  .docs__note { margin-top: 10px; }
  .place__cu { display: none; } /* cửa sổ rất thấp: bỏ dòng đối chiếu giấy tờ để phần Về cơ sở vừa một màn */
  #ve-co-so { padding-block: 24px; }
  .about .h2 { font-size: 32px; }
  .about__lead { margin-bottom: 12px; font-size: 15px; line-height: 1.55; }
  .place { padding: 10px 18px; }
  .gallery { height: clamp(300px, calc(100vh - 110px), 620px); }
  .doc { padding: 16px 20px; }
}

/* Màn rất rộng (27 inch, cửa sổ toàn màn hình): nới khung, phóng chữ và ảnh cho cân */
@media (min-width: 1760px) {
  .wrap, .hero__in { width: min(100% - 160px, 1400px); margin-inline: auto; }
  .ruou { max-width: min(1240px, calc((100vh - var(--top-h) - 110px) * 2.3)); }
  .h2 { font-size: 78px; }
}
@media (min-width: 2200px) {
  .wrap, .hero__in { width: min(100% - 240px, 1600px); margin-inline: auto; }
}

/* Điện thoại màn thấp (iPhone SE đời đầu): bỏ biểu tượng trên đầu (tên đã có), chữ đè ảnh ít hơn để ảnh không bị che */
@media (max-width: 639px) and (max-height: 600px) {
  .hero__emblem { display: none; }
  .title { margin-top: -40px; }
  .arch { width: min(80vw, 340px, calc((100vh - 356px) * .886 + 12px)); width: min(80vw, 340px, calc((100svh - 356px - env(safe-area-inset-bottom, 0px)) * .886 + 12px)); }
}

/* Điện thoại rất hẹp */
@media (max-width: 370px) {
  .doc { grid-template-columns: 70px 1fr; gap: 14px; }
  .diem { gap: 16px; }
  .diem__t { font-size: 22px; }
  .diem__body p { font-size: 14.5px; }
  .seal { letter-spacing: .14em; gap: 8px; }
  .seal::before, .seal::after { width: 18px; }
  .bar a, .bar button { font-size: 11px; letter-spacing: -.01em; }
}

/* ===================== Tương tác ===================== */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Nút: bấm lún, nút vàng có vệt sáng lướt qua */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .3s ease, background-color .25s ease, border-color .25s ease, color .25s ease, filter .25s ease; }
.btn:active { transform: translateY(1px) scale(.975); }
.btn--gold::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg) translateX(0); transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn--line::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-flat);
  transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn--gold:active::after { transform: skewX(-18deg) translateX(460%); }
.btn--line:active { color: #1B1407; }
.btn--line:active::before { transform: scaleY(1); }

/* Khung ảnh, video: bấm giữ thì sáng viền, góc vàng dịch vào */
.frame { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .5s ease; }
.frame__in img, .frame__in video { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.frame__in::after { transition: inset .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.step:active .frame, .gallery figure:active .frame { border-color: var(--vang-sang); }
.step:active .frame__in::after, .gallery figure:active .frame__in::after { inset: 14px; opacity: 1; }


.doc, .place { transition: border-color .35s ease, box-shadow .45s ease; }
.doc, .place { cursor: pointer; } /* cả thẻ bấm được: giấy tờ mở bản giấy, địa chỉ mở chỉ đường */
.doc__paper:active, .doc:active .doc__paper { transform: rotate(0) scale(.97); }
.doc:active, .place:active { border-color: rgba(216,180,107,.7); background-color: rgba(216,180,107,.05); }
.place { transition: border-color .35s ease, box-shadow .45s ease, transform .2s ease; }
.place:active { transform: scale(.985); }


/* Chuột: chỉ áp dụng khi thiết bị có rê chuột thật */
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 36px -12px rgba(216,180,107,.7); transform: translateY(-2px); }
  .btn--gold:hover::after { transform: skewX(-18deg) translateX(460%); }
  .btn--line:hover { color: #1B1407; border-color: var(--vang-sang); transform: translateY(-2px); background: transparent; }
  .btn--line:hover::before { transform: scaleY(1); }
  .btn:hover:active { transform: translateY(0) scale(.975); }

  .step:hover .frame, .gallery figure:hover .frame { transform: translateY(-8px); border-color: var(--vang-sang); box-shadow: 0 34px 60px -26px rgba(0,0,0,.85), 0 0 36px -10px rgba(216,180,107,.35); }
  .step:hover .frame__in img, .step:hover .frame__in video, .gallery figure:hover .frame__in img { transform: scale(1.06); }
  .step:hover .frame__in::after, .gallery figure:hover .frame__in::after { inset: 14px; opacity: 1; }
  .gallery figure:hover figcaption { color: var(--vang-sang); }
  .ruou figure:hover .ruou__vom { transform: translateY(-8px); border-color: var(--vang-sang); box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.6), 0 34px 60px -24px rgba(0,0,0,.9), 0 0 44px -8px rgba(216,180,107,.45); }
  .ruou figure:hover img { transform: scale(1.06); }
  .ruou figure:hover .frame { transform: translateY(-6px); border-color: var(--vang-sang); }
  .ruou__doc:hover figcaption { color: var(--vang-sang); }

  .diem:hover .diem__arch { transform: translateY(-8px); border-color: var(--vang-sang); box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px rgba(216,180,107,.6), 0 34px 60px -24px rgba(0,0,0,.9), 0 0 44px -8px rgba(216,180,107,.45); }
  .diem:hover .diem__arch img, .diem:hover .diem__arch video { transform: scale(1.08); }
  .diem:hover .diem__icon { transform: translateY(-8px) rotate(-10deg) scale(1.08); box-shadow: 0 0 0 4px var(--rung), 0 0 0 5px var(--vang-sang), 0 0 26px rgba(216,180,107,.6); }
  .doc:hover { border-color: rgba(216,180,107,.6); box-shadow: 0 0 40px -18px rgba(216,180,107,.35); }
  .doc:hover .doc__paper { transform: rotate(0) translateY(-4px) scale(1.04); box-shadow: 6px 10px 0 -2px rgba(216,180,107,.18), 0 20px 30px -12px rgba(0,0,0,.8); }
  .doc:hover .doc__paper::after { opacity: 1; } /* rê chuột: giấy lắc nhẹ đáp lại rồi thẳng lên, viền sáng giữ nguyên */
  .place:hover { border-color: var(--vang); box-shadow: 0 0 40px -18px rgba(216,180,107,.45); }
  .sheet__opt { transition: background-color .25s ease, border-color .25s ease, padding .3s ease; }
  .sheet__opt:hover { border-color: var(--vang); padding-left: 22px; }
  .top__brand img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .top__brand:hover img { transform: rotate(-12deg) scale(1.08); }
  .top__phone { transition: color .25s ease; }
  .top__phone:hover { color: #fff3cf; }
  .foot__info a:hover { color: #fff3cf; }
  .contact__list a:hover { background: rgba(216,180,107,.06); padding-left: 12px; }
  .contact__list a:hover::after { opacity: 1; transform: translateX(4px); }
}
.gallery figcaption { transition: color .3s ease; }

/* Thanh trên cùng: thu gọn khi cuộn, vạch vàng báo đã đọc tới đâu */
.top { transition: height .3s ease, background-color .3s ease, box-shadow .3s ease; }
.top::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--vang), var(--vang-sang)); transform-origin: left; transform: scaleX(var(--doc, 0));
}
@media (min-width: 1024px) {
  .top.is-scrolled { height: 64px; background: rgba(8,22,15,.96); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
}

/* Hiện dần khi cuộn tới (chỉ khi có JS) */
.js .rv { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
.js .rv.is-in { opacity: 1; transform: none; }

/* Đầu trang: vào lần lượt khi mở trang */
.js .hero__text > * { animation: len 1s cubic-bezier(.2,.7,.2,1) both; }
.js .hero__text > :nth-child(2) { animation-delay: .08s; }
.js .hero__text > :nth-child(3) { animation-delay: .16s; }
.js .hero__text > :nth-child(4) { animation-delay: .28s; }
.js .hero__text > :nth-child(5) { animation-delay: .38s; }
.js .arch { animation: vom 1.4s cubic-bezier(.2,.7,.2,1) .1s both; }
.js .title__l2 { background-size: 100% 220%; animation: anh-vang 3.6s ease-in-out .9s 1 both; }
@keyframes len { from { opacity: 0; transform: translateY(22px); } }
@keyframes vom { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes anh-vang { 0% { background-position: 0 100%; } 50% { background-position: 0 0; } 100% { background-position: 0 50%; } }

/* Khung vòm nghiêng theo chuột (JS đặt --mx, --my) */
.arch__in img { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -10px); transition: translate .6s cubic-bezier(.2,.7,.2,1); }
.arch { position: relative; }
.arch::before {
  content: ""; position: absolute; inset: -40px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(216,180,107,.22), transparent);
  translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 18px); transition: translate .6s cubic-bezier(.2,.7,.2,1);
}

/* Hộp thoại mở mượt */
.sheet[open] { animation: hop-len .35s cubic-bezier(.2,.7,.2,1); }
.viewer[open] { animation: hop-mo .3s ease; }
.sheet[open]::backdrop, .viewer[open]::backdrop { animation: hop-mo .3s ease; }
@keyframes hop-len { from { opacity: 0; transform: translateY(28px); } }
@keyframes hop-mo { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .arch__in img, .arch::before { translate: none; }
  .hero .mtn { transform: none !important; }
}

/* ===================== Nút nổi ===================== */
/* Điện thoại, máy tính bảng: chỉ còn nút lên đầu trang — liên hệ đã có thanh 5 nút dưới đáy, không lặp lại.
   Máy tính (không có thanh dưới): Zalo, Messenger, Gọi xếp dọc, rê chuột hiện nhãn; nút lên đầu trang ở dưới.
   Lề: điện thoại cách mép 16px, cách thanh dưới 24px; máy tính cách góc 40px (Material Design 16/24px, PNJ 35–50px). */
.fab {
  position: fixed; z-index: 35; right: 16px; bottom: calc(var(--bar-h) + var(--safe-b) + 24px);
  display: grid; justify-items: end; gap: 14px; pointer-events: none;
}
.fab__list { display: none; list-style: none; margin: 0; padding: 0; }
.fab__top {
  pointer-events: auto; position: relative; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10,28,19,.94); color: var(--vang-sang);
  box-shadow: inset 0 0 0 1px rgba(216,180,107,.6), 0 10px 24px -8px rgba(0,0,0,.65);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.86);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
}
.fab__top::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* vùng chạm rộng hơn nút */
.fab.show-top .fab__top { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Chum rượu: rượu dâng theo đoạn đã đọc (--p), mặt rượu gợn nhẹ, mũi tên bốc lên như hơi rượu */
.fab__chum { width: 32px; height: 32px; overflow: visible; transition: transform .25s ease; }
.fab__vo { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.fab__mieng { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fab__muc { transform: translateY(calc(25.5px - 10.5px * var(--p, 0))); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fab__song { animation: fab-song 2.8s linear infinite; }
.fab__len { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: fab-hoi 2.4s ease-in-out infinite; }
.fab__top:active .fab__chum { transform: scale(.9); }
.fab__top.is-bay .fab__len { animation: fab-vut .75s cubic-bezier(.2,.7,.2,1); }
@keyframes fab-song { to { transform: translateX(-10px); } }
@keyframes fab-hoi { 0%, 100% { transform: translateY(1px); opacity: .7; } 50% { transform: translateY(-1.5px); opacity: 1; } }
@keyframes fab-vut { 0% { transform: none; opacity: 1; } 40% { transform: translateY(-8px); opacity: 0; } 41% { transform: translateY(4px); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (min-width: 1024px) {
  .fab { right: 40px; bottom: 40px; }
  .fab__list { display: grid; gap: 14px; justify-items: end; }
  /* Nhãn ẩn vẫn chiếm chỗ: chỉ vòng tròn nhận chuột, không chặn bấm vào nội dung phía sau */
  .fab__list li { pointer-events: none; animation: fab-vao .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.9s + var(--k) * 90ms); }
  .fab__list li:nth-child(1) { --k: 0; }
  .fab__list li:nth-child(2) { --k: 1; }
  .fab__list li:nth-child(3) { --k: 2; }
  .fab__btn { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .fab__ico {
    pointer-events: auto; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(10,28,19,.94); border: 1px solid rgba(216,180,107,.6); color: var(--vang-sang);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.65);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .35s ease;
  }
  .fab__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .fab__ico b { font: 700 13px/1 var(--text); letter-spacing: -.01em; }
  .fab__ico .fab__bub { display: none; }
  .fab__btn--call .fab__ico { background: var(--gold-flat); border-color: transparent; color: #1B1407; }
  .fab__tip {
    padding: 9px 14px; border-radius: 999px; white-space: nowrap;
    background: rgba(10,28,19,.96); border: 1px solid rgba(216,180,107,.4); color: var(--kem);
    font: 500 14px/1 var(--text); box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
    opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .fab__btn:hover .fab__tip, .fab__btn:focus-visible .fab__tip { opacity: 1; transform: none; }
  .fab__btn:hover .fab__ico { transform: translateY(-3px) scale(1.06); border-color: var(--vang-sang); box-shadow: 0 16px 30px -10px rgba(0,0,0,.7), 0 0 22px -4px rgba(216,180,107,.5); }
  .fab__btn--call:hover .fab__ico { box-shadow: 0 16px 30px -10px rgba(0,0,0,.7), 0 0 26px -2px rgba(216,180,107,.7); }
  .fab__top { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s, box-shadow .35s ease; }
  .fab__top:hover { box-shadow: inset 0 0 0 1px var(--vang-sang), 0 16px 30px -10px rgba(0,0,0,.7), 0 0 22px -4px rgba(216,180,107,.5); }
  .fab__top:hover .fab__len { translate: 0 -2px; }
}
@keyframes fab-vao { from { opacity: 0; transform: translateX(24px); } }

/* ---------- Thông báo nhỏ (sao chép số trên máy tính) ---------- */
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--bar-h) + var(--safe-b) + 20px);
  max-width: calc(100% - 32px); margin: 0; padding: 12px 20px; border-radius: 999px; text-align: center;
  background: rgba(10,28,19,.97); border: 1px solid rgba(216,180,107,.55); color: var(--kem);
  font: 500 14.5px/1.35 var(--text); box-shadow: 0 16px 36px -12px rgba(0,0,0,.75);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 32px; } }

/* ---------- Tiêu đề phần: khi tiêu đề lên tới khoảng 3/4 màn hình (JS gắn is-ve), hình thoi xoay vào, nét vàng vẽ ra hai bên ---------- */
.js .orn::before, .js .orn::after { transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
.js .orn::before { transform-origin: right; } /* hai nét mọc ra từ hình thoi */
.js .orn::after { transform-origin: left; }
.js .orn i { transition: transform 1s cubic-bezier(.25,.8,.25,1); }
.js .head:not(.is-ve) .orn::before, .js .head:not(.is-ve) .orn::after { transform: scaleX(0); }
.js .head:not(.is-ve) .orn i { transform: rotate(-135deg) scale(0); }