:root {
  --nen-trang: #1d1c19;
  --giay: #f3f0e8;
  --giay-mo: rgba(243, 240, 232, 0.92);
  --muc: #2c2a26;
  --muc-phu: #55504a;
  --muc-vua: #45403a;
  --vien: rgba(60, 50, 40, 0.14);
  --reu: #4a5a3c;
  --reu-nhat: #e4e6d6;
  --lien-ket: #3d5a80;
  --kinh: rgba(22, 18, 15, 0.44); /* lớp kính mờ tối đè lên cảnh chạng vạng */
  --kinh-vien: rgba(255, 236, 210, 0.16);
  --chu-sang: #f2ead9;
  --chu-sang-phu: rgba(242, 234, 217, 0.74);
  --anh-den: #f0c987;
  --chu: 'Source Serif 4', Georgia, serif;
  --chu-nut: 'Be Vietnam Pro', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --nen-trang: #121110; }
}
:root[data-theme="dark"] { --nen-trang: #121110; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--nen-trang); color: var(--muc); font-family: var(--chu); }
/* vh đứng trước dvh: Chrome dưới 108, Safari dưới 15.4 không hiểu dvh, thiếu dòng vh thì khung sân rộng 0 */
.khung { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.san { position: relative; width: min(100vw, calc(100vh * 9 / 16)); width: min(100vw, calc(100dvh * 9 / 16)); aspect-ratio: 9 / 16; max-height: 100vh; max-height: 100dvh; overflow: hidden; background: #1a1714; }
#ve { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } /* kéo trên cảnh là xoay nhìn, không cuộn trang */
button { font-family: var(--chu-nut); color: var(--muc); cursor: pointer; }
button:focus-visible { outline: 2px solid var(--lien-ket); outline-offset: 2px; }
button:disabled { cursor: default; opacity: 0.5; }
svg { fill: none; stroke: var(--muc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.lop-ten { position: absolute; inset: 0; pointer-events: none; }
.ten-noi { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 13px; font-style: italic; color: var(--chu-sang); text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 1px 8px rgba(0, 0, 0, 0.6); transition: opacity 0.3s ease; }
.ten-noi.cua-toi { font-style: normal; font-size: 14px; }
.ten-noi.cua-toi i { font-size: 12px; color: var(--chu-sang-phu); }

.giao-dien { position: absolute; inset: 0; pointer-events: none; }
.giao-dien > * { pointer-events: auto; }
.thanh-tren { position: absolute; left: 16px; right: 16px; top: 12px; display: flex; align-items: center; gap: 8px; }
.the-tieu-de, .nut-vuong, .thanh-duoi, .the-gio, .loi { background: var(--kinh); border: 1px solid var(--kinh-vien); color: var(--chu-sang); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
.thanh-tren svg, .thanh-duoi svg { stroke: var(--chu-sang); }
.the-tieu-de { flex-grow: 1; min-width: 0; padding: 7px 12px; border-radius: 12px; }
.tieu-de { font-size: 16px; font-weight: 500; line-height: 20px; }
.phu { font-family: var(--chu-nut); font-size: 12px; line-height: 17px; color: var(--chu-sang-phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nut-chu-sang { padding: 2px 0; background: none; border: 0; font: inherit; color: var(--anh-den); text-decoration: underline; text-underline-offset: 2px; }
.nut-vuong { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 12px; }
.nut-vuong svg { width: 22px; height: 22px; }

.the-gio { position: absolute; left: 16px; right: 16px; top: 72px; padding: 10px 14px 12px; text-align: center; border-radius: 14px; }
.tieu-de-gio { font-size: 17px; font-weight: 500; line-height: 24px; }
.the-gio p { margin: 2px 0 8px; font-size: 13.5px; line-height: 20px; color: var(--chu-sang-phu); }
.the-gio .nut-phu { min-height: 40px; margin-top: 0; color: var(--chu-sang); border-color: var(--kinh-vien); }
.loi { position: absolute; left: 24px; right: 24px; bottom: 92px; padding: 10px 14px; text-align: center; border-radius: 12px; font-size: 14px; line-height: 20px; }

.thanh-duoi { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 4px; border-radius: 14px; }
.thanh-duoi button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; background: transparent; border: 0; border-radius: 10px; font-size: 12px; color: var(--chu-sang); white-space: nowrap; }
.thanh-duoi button svg { width: 22px; height: 22px; }
.thanh-duoi svg.hat { stroke-width: 1.4; }
.thanh-duoi button[aria-pressed="true"] { background: rgba(240, 201, 135, 0.2); }
.thanh-duoi button:active, .nut-vuong:active { background: rgba(240, 201, 135, 0.16); }

.tam { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; overflow-y: auto; padding: 16px 20px 24px; background: var(--giay); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(30, 25, 20, 0.18); }
.dau-tam { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dau-tam h2 { margin: 0; font-size: 19px; font-weight: 500; line-height: 26px; }
.nut-dong { background: transparent; border: 0; }
.tam p { margin: 6px 0 12px; font-size: 14.5px; line-height: 22px; color: var(--muc-vua); }
.tam p.nho, .nho { font-size: 14px; color: var(--muc-phu); }
.ghi-chu { font-family: var(--chu-nut); font-size: 12px; line-height: 17px; color: var(--muc-phu); }
.hang-so { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
.so-lon { font-size: 30px; line-height: 36px; }
.so-vua { font-size: 22px; line-height: 30px; margin-top: 4px; }
.nut-chinh { width: 100%; min-height: 48px; margin-top: 12px; background: var(--reu); border: 0; border-radius: 10px; font-size: 14px; color: var(--giay); }
.nut-phu { width: 100%; min-height: 44px; margin-top: 12px; background: transparent; border: 1px solid rgba(60, 50, 40, 0.3); border-radius: 10px; font-size: 13.5px; }
.nut-phu[aria-pressed="true"] { background: var(--reu-nhat); border-color: var(--reu); }
.nut-chu { min-height: 40px; padding: 6px 4px; background: transparent; border: 0; font-size: 13px; color: var(--lien-ket); text-decoration: underline; }
.nut-mo-lon { display: block; margin: 0 auto; padding: 0; background: transparent; border: 0; }
.nut-mo-lon svg { width: 200px; height: 144px; stroke: none; transition: transform 0.08s ease; }
.nut-mo-lon:active svg { transform: scale(0.96); }
svg.chuoi { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; stroke-width: 1; }
svg.chuoi path { stroke: none; }
.ds { list-style: none; margin: 6px 0 0; padding: 0; }
.ds li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(60, 50, 40, 0.12); font-size: 14px; }
.ds li i { color: var(--muc-phu); text-align: right; }
.ds-chon { display: flex; flex-direction: column; gap: 6px; }
.ds-chon button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; text-align: left; background: transparent; border: 1px solid rgba(60, 50, 40, 0.22); border-radius: 10px; font-size: 13.5px; line-height: 19px; }
.ds-chon button::before { content: ''; flex-shrink: 0; width: 14px; height: 14px; border-radius: 7px; border: 1.5px solid var(--reu); }
.ds-chon button[aria-pressed="true"] { background: var(--reu-nhat); border-color: var(--reu); }
.ds-chon button[aria-pressed="true"]::before { background: var(--reu); }

.man-vao { position: absolute; inset: 0; background: rgba(40, 36, 32, 0.34); display: flex; align-items: flex-end; padding: 16px; }
.the-vao { width: 100%; padding: 22px 22px 20px; background: var(--giay); border-radius: 18px; box-shadow: 0 12px 32px rgba(30, 25, 20, 0.22); }
.the-vao h1 { margin: 0; font-size: 27px; font-weight: 500; line-height: 34px; }
.the-vao p { margin: 8px 0 14px; font-size: 15px; line-height: 23px; color: var(--muc-vua); }
.the-vao p.ghi-chu { margin: 12px 0 2px; }
.hang-ten { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ten-toi { font-size: 26px; line-height: 34px; font-style: italic; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .ten-noi, .nut-mo-lon svg { transition: none; } }

/* Tấm tiếng: thanh chỉnh to nhỏ */
.hang-muc { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; color: var(--muc-vua); }
.hang-muc input[type="range"] { width: 100%; accent-color: #c9a24a; }
.hang-chon { display: flex; align-items: center; gap: 8px; }
.nguon-tieng { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muc-phu); }
.nguon-tieng summary { cursor: pointer; color: var(--muc-vua); }
.nguon-tieng ul { margin: 6px 0 0; padding-left: 18px; }
.nguon-tieng a { color: var(--lien-ket); }
.nguon-tieng a:focus-visible, .nguon-tieng summary:focus-visible { outline: 2px solid var(--lien-ket); outline-offset: 2px; }