:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0B1520;color:#E8EDF4;
  font-family:"Be Vietnam Pro",system-ui,"Segoe UI",sans-serif}
.thanh{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  background:rgba(8,16,26,.94);backdrop-filter:blur(10px);border-bottom:1px solid #1B2A3C;
  padding:11px 16px;padding-top:max(11px,env(safe-area-inset-top))}
.thanh a{color:#C9A227;text-decoration:none;font-size:13px;font-weight:600}
.thanh .ten{font-size:14px;font-weight:600;color:#E8EDF4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thanh .dem{margin-left:auto;font-size:12px;color:#8FA2B8;white-space:nowrap}
.bo{max-width:1180px;margin:0 auto;padding:18px 14px 60px}
.khung{position:relative;width:100%;margin:0 0 22px;border-radius:12px;overflow:hidden;
  background:#07172a;box-shadow:0 10px 34px rgba(0,0,0,.45);border:1px solid #1B2A3C}
.khung .so{position:absolute;left:10px;top:10px;z-index:5;font-size:11px;font-weight:700;letter-spacing:.1em;
  background:rgba(8,16,26,.72);color:#C9A227;padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.khung .nhan{position:absolute;right:10px;top:10px;z-index:5;font-size:11px;color:#C6D2E0;
  background:rgba(8,16,26,.72);padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px)}
/* Khung tỉ lệ cố định: slide bên trong giữ nguyên kích thước gốc rồi thu cả khung cho vừa.
   Đây là chỗ bảo đảm điện thoại và máy tính đều thấy đúng một bố cục. */
.trong{position:relative;width:100%;aspect-ratio:var(--tl);overflow:hidden}
.trong>.slide{position:absolute;left:0;top:0;width:var(--w);height:var(--h);background:#fff;
  transform:scale(var(--k));transform-origin:0 0}
/* Luật nền mà component deck-stage áp cho mỗi slide. Thiếu nó thì slide co lại theo
   chiều cao nội dung và mọi thứ đặt tuyệt đối bên trong sẽ rơi sai chỗ. */
.trong>.slide>section{position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;box-sizing:border-box!important;overflow:hidden;
  opacity:1!important;visibility:visible!important;pointer-events:auto}
.ghi{margin:-12px 0 24px;padding:13px 15px;border-left:3px solid #C9A227;background:#0F1E2E;border-radius:0 10px 10px 0;
  font-size:13.5px;line-height:1.55;color:#C6D2E0;display:none}
body.hien-ghi .ghi{display:block}
.nut{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:#17293C;color:#C6D2E0;
  border:0;cursor:pointer}
.nut[aria-pressed="true"]{background:#C9A227;color:#0B1520}

.chim{position:fixed;inset:0;pointer-events:none;z-index:9;background-repeat:repeat;opacity:.9}
.nhacnho{position:fixed;left:50%;bottom:26px;transform:translate(-50%,10px);opacity:0;transition:.2s;
  background:#C9A227;color:#0B1520;font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;z-index:50;pointer-events:none}
.nhacnho.hien{opacity:1;transform:translate(-50%,0)}
.khung,.slide,.slide *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (max-width:640px){.bo{padding:12px 10px 40px}.khung{margin-bottom:16px}}