/* giao-dien.css — Hệ thống giao diện Ngọc lục bảo & Vàng (chuyển từ bản GAS CSS.html) */
  /* ===== Token màu: Ngọc lục bảo & Vàng ===== */
  :root {
    --em-950: #011c17;
    --em-900: #022a22;
    --em-800: #03392e;
    --em-700: #04503f;
    --em-600: #006b57;
    --em-500: #009278;
    --em-300: #5fd3b6;
    --gold-700: #a87600;
    --gold-600: #e6ac0c;
    --gold-500: #ffc626;
    --gold-300: #ffe08a;
    --gold-100: #fff6d6;
    --ink: #201e1d;
    --ivory: #f8f3e3;
    --ivory-70: rgba(248, 243, 227, .72);
    --ivory-45: rgba(248, 243, 227, .45);
    --line: rgba(255, 198, 38, .22);
    --glass: rgba(255, 255, 255, .05);
    --glass-2: rgba(255, 255, 255, .09);
    --danger: #E57373;
    --radius: 12px;
    --radius-sm: 8px;
    --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px; --space-5: 30px; --space-6: 40px;
    --shadow-md: 0 3px 10px rgba(0, 0, 0, .28);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .4);
    --font: 'Source Serif 4', Georgia, serif;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; }
  body {
    min-height: 100vh;
    font-family: var(--font);
    color: var(--ivory);
    background-color: var(--em-950);
    background-image:
      radial-gradient(1200px 600px at 50% -10%, rgba(0, 146, 120, .55), transparent 70%),
      radial-gradient(800px 500px at 100% 100%, rgba(255, 198, 38, .08), transparent 70%),
      linear-gradient(180deg, var(--em-900), var(--em-950));
    background-attachment: fixed;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
  }
  button { all: unset; cursor: pointer; box-sizing: border-box; }
  button:disabled { opacity: .45; cursor: not-allowed; }
  :focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
  h1, h2 { margin: 0; }

  .thanh-tai {
    position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent) no-repeat;
    background-size: 40% 100%;
    animation: chay-tai 1.1s linear infinite;
  }
  @keyframes chay-tai { from { background-position: -40% 0; } to { background-position: 140% 0; } }

  /* ===== Nút dùng chung ===== */
  .nut-icon {
    width: 44px; height: 44px; display: grid; place-items: center; flex: none;
    border-radius: var(--radius); font-size: 22px; color: var(--gold-300);
    box-shadow: inset 0 0 0 1.5px var(--line);
  }
  .nut-icon:hover { background: var(--glass-2); }
  .nut-phu {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: var(--radius);
    color: var(--gold-300); font-weight: 600; font-size: 16px;
    box-shadow: inset 0 0 0 1.5px var(--gold-500);
  }
  .nut-phu i { font-size: 20px; }
  .nut-phu:hover { background: rgba(255, 198, 38, .1); }
  .nut-chinh {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 28px; border-radius: var(--radius);
    background: var(--gold-500); color: var(--ink); font-weight: 600; font-size: 17px;
    box-shadow: var(--shadow-md);
  }
  .nut-chinh i { font-size: 20px; }
  .nut-chinh:hover { background: color-mix(in srgb, var(--gold-500) 88%, var(--ink)); }
  .nut-vien-do {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: var(--radius);
    color: var(--danger); font-weight: 600; font-size: 16px;
    box-shadow: inset 0 0 0 1.5px rgba(229, 115, 115, .7);
  }
  .nut-vien-do i { font-size: 20px; }
  .nut-vien-do:hover { background: rgba(229, 115, 115, .12); }
  .dang-xu-ly { pointer-events: none; opacity: .75; }
  .dang-xu-ly i { animation: xoay 1s linear infinite; }

  /* ===== Đầu trang ===== */
  .dau-trang {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
  }
  .thuong-hieu { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  /* Logo BIDV (chữ trắng + hoa vàng) + vạch ngăn mảnh với tên chương trình */
  .logo-anh {
    flex: none; display: block; height: 52px; width: auto;
    padding-right: var(--space-4); border-right: 1px solid rgba(248, 243, 227, .25);
  }
  .chu-thuong-hieu { flex: 1; min-width: 0; }
  .ten-don-vi { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ten-su-kien {
    margin-top: 2px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Tên quá dài dù đã co nhỏ nhất → cho xuống tối đa 2 dòng (JS bật class này) */
  .ten-su-kien.hai-dong {
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .cong-cu { display: flex; gap: var(--space-2); flex: none; }

  /* ===== Thanh quay số: dropdown giải · thông tin · nút quay (dính đáy màn hình) ===== */
  .thanh-quay {
    position: sticky; bottom: var(--space-3); z-index: 10;
    display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) auto auto;
    align-items: center; gap: var(--space-5);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(4, 80, 63, .96), rgba(2, 42, 34, .97));
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
    backdrop-filter: blur(6px);
  }
  .nhan-nho { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-70); }
  .khung-chon { position: relative; display: block; }
  .khung-chon i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--gold-300); pointer-events: none; }
  .o-chon {
    appearance: none; -webkit-appearance: none; width: 100%; height: 54px; padding: 0 44px 0 16px;
    border: 0; border-radius: var(--radius); cursor: pointer;
    background: rgba(255, 255, 255, .08); color: var(--ivory);
    box-shadow: inset 0 0 0 1.5px var(--gold-500);
    font: 600 19px var(--font);
  }
  .o-chon:focus { outline: 2px solid var(--gold-500); outline-offset: 2px; }
  .o-chon:disabled { opacity: .6; cursor: not-allowed; }
  .o-chon option { background: var(--em-900); color: var(--ivory); font-weight: 400; }
  .thong-tin-quay { min-width: 0; }
  .o-chon-nho { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
  .o-chon-nho option { background: var(--em-900); color: var(--ivory); }

  /* Số to đang quay, đặt cạnh nút QUAY SỐ */
  .bang-so { display: flex; gap: 8px; }
  .o-so {
    position: relative; overflow: hidden;
    width: 62px; height: 82px; display: grid; place-items: center;
    border-radius: var(--radius-sm); color: var(--em-900);
    font-size: 54px; font-weight: 700; line-height: 1;
    background: linear-gradient(180deg, #fffaf0 0%, var(--gold-300) 45%, var(--gold-500) 100%);
    box-shadow: 0 0 0 2px rgba(255, 198, 38, .25), 0 8px 20px rgba(0, 0, 0, .4), inset 0 -5px 0 rgba(168, 118, 0, .25);
  }
  .o-so::after { content: ''; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent); pointer-events: none; }
  .bang-so.chot .o-so { animation: bat-len .6s cubic-bezier(.2, 1.5, .4, 1) both; }
  .bang-so.chot .o-so:nth-child(2) { animation-delay: .08s; }
  .bang-so.chot .o-so:nth-child(3) { animation-delay: .16s; }
  .bang-so.chot .o-so:nth-child(4) { animation-delay: .24s; }
  .bang-so.chot .o-so:nth-child(5) { animation-delay: .32s; }

  /* Huy hiệu đếm trên nút Kết quả */
  .huy-hieu-dem {
    min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center;
    border-radius: 11px; background: var(--gold-500); color: var(--ink); font-size: 13px; font-weight: 700;
  }

  .nut-quay {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-width: 240px; padding: 22px 36px; border-radius: var(--radius);
    color: var(--ink); font-size: 26px; font-weight: 700; letter-spacing: .1em;
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
    box-shadow: 0 8px 0 var(--gold-700), 0 14px 30px rgba(0, 0, 0, .45);
    transition: transform .08s, box-shadow .08s;
  }
  .nut-quay i { font-size: 30px; }
  .nut-quay:not(:disabled) { animation: hao-quang 2.4s ease-in-out infinite; }
  .nut-quay:not(:disabled):hover { filter: brightness(1.06); }
  .nut-quay:not(:disabled):active { transform: translateY(5px); box-shadow: 0 3px 0 var(--gold-700), 0 8px 18px rgba(0, 0, 0, .4); }
  body.dang-quay .nut-quay i { animation: xoay 1s linear infinite; }
  .con-lai { font-size: 17px; color: var(--ivory); }
  .goi-y { margin-top: 2px; font-size: 13px; color: var(--ivory-45); }

  /* ===== Nội dung: sơ đồ bàn (toàn chiều rộng) → thanh quay → kết quả ===== */
  .noi-dung {
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-4) var(--space-5) var(--space-6);
  }
  .tieu-de-khoi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); font-size: 18px; font-weight: 600; }
  .tieu-de-khoi > span:last-child { font-size: 14px; font-weight: 400; color: var(--ivory-70); }
  .tieu-de-khoi .chinh { display: inline-flex; align-items: center; gap: 6px; }
  .tieu-de-khoi .chinh i { color: var(--gold-500); font-size: 20px; }
  .so-do .tieu-de-khoi { justify-content: center; }

  /* Sơ đồ bàn là trung tâm: căn giữa, mỗi bàn co theo chiều cao màn hình để thấy đủ mọi hàng */
  .luoi-ban {
    --kt-ban: min(300px, calc((100dvh - 340px) / var(--so-hang, 2)));
    display: grid; justify-content: center;
    grid-template-columns: repeat(var(--so-cot, 5), minmax(0, var(--kt-ban)));
    gap: var(--space-2) var(--space-5);
  }
  .ban { position: relative; width: 100%; aspect-ratio: 1; justify-self: center; container-type: inline-size; }
  .mat-ban {
    position: absolute; inset: 23%; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #0d8a6e, var(--em-700) 60%, var(--em-800));
    box-shadow: inset 0 0 0 2px rgba(255, 198, 38, .55), inset 0 -8px 18px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .35);
    transition: box-shadow .3s;
  }
  .mat-ban .nhan { font-size: 6cqi; letter-spacing: .2em; color: var(--ivory-70); }
  .mat-ban .so-ban { font-size: 17cqi; font-weight: 600; line-height: 1; color: var(--gold-300); }
  .ban.co-trung .mat-ban { box-shadow: inset 0 0 0 2px var(--gold-500), 0 0 26px rgba(255, 198, 38, .3), 0 10px 24px rgba(0, 0, 0, .35); }

  .ghe {
    position: absolute; width: var(--ghe, 19cqi); aspect-ratio: 1;
    display: grid; place-items: center; transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--em-800); color: var(--ivory);
    font-size: var(--co-chu, 7.2cqi); font-weight: 600; line-height: 1;
    box-shadow: inset 0 0 0 1.5px rgba(255, 198, 38, .4);
    transition: background .2s, opacity .2s;
  }
  .ghe.trung { background: linear-gradient(145deg, var(--gold-300), var(--gold-500)); color: var(--ink); box-shadow: 0 0 12px rgba(255, 198, 38, .5); }
  .ghe.huy { background: transparent; color: var(--ivory-45); text-decoration: line-through; box-shadow: inset 0 0 0 1.5px rgba(229, 115, 115, .55); }
  body.dang-quay .ghe:not(.sang):not(.trung):not(.huy) { opacity: .6; }
  /* Số chưa có khách nhận: mờ, không tham gia quay */
  .ghe.chua-nhan { opacity: .28; box-shadow: inset 0 0 0 1px rgba(248, 243, 227, .25); }
  body.dang-quay .ghe.chua-nhan { opacity: .15; }
  .ghe.sang {
    z-index: 2; background: var(--gold-500); color: var(--ink); opacity: 1;
    transform: translate(-50%, -50%) scale(1.3); transition: none;
    box-shadow: 0 0 0 3px rgba(255, 198, 38, .35), 0 0 22px 6px rgba(255, 198, 38, .65);
  }
  .ghe.chot { z-index: 3; animation: nhip 1s ease-in-out infinite; }

  /* Danh sách kết quả trong ngăn kéo */
  .ds-ket-qua { display: flex; flex-direction: column; }
  .dong-kq {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .dong-kq.moi { animation: hien-dong .6s ease-out; }
  .huy-hieu-so {
    min-width: 64px; padding: 8px 10px; text-align: center; border-radius: var(--radius-sm);
    background: linear-gradient(145deg, var(--gold-300), var(--gold-500)); color: var(--ink);
    font-size: 20px; font-weight: 600;
  }
  .dong-kq .giai { font-size: 15px; font-weight: 600; }
  .dong-kq .meta { font-size: 13px; color: var(--ivory-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nut-huy { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--ivory-45); font-size: 20px; }
  .nut-huy:hover { color: var(--danger); background: rgba(229, 115, 115, .12); }
  .dong-kq.da-huy .huy-hieu-so { background: transparent; color: var(--ivory-45); text-decoration: line-through; box-shadow: inset 0 0 0 1.5px rgba(229, 115, 115, .55); }
  .dong-kq.da-huy .giai { color: var(--ivory-45); }
  .nhan-huy { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--danger); }
  .rong { padding: var(--space-5) 0; text-align: center; font-style: italic; color: var(--ivory-45); line-height: 1.6; }

  /* ===== Màn chúc mừng ===== */
  .lop-phu {
    position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-4);
    background: rgba(1, 20, 16, .84); backdrop-filter: blur(6px);
    animation: hien .3s ease-out;
  }
  .the-chuc-mung {
    position: relative; overflow: hidden; width: min(640px, 100%);
    padding: var(--space-6) var(--space-5); text-align: center; border-radius: var(--radius);
    background: radial-gradient(circle at 50% 0%, #0b7a62, var(--em-800) 70%);
    box-shadow: 0 0 0 2px var(--gold-500), 0 0 0 9px rgba(255, 198, 38, .14), var(--shadow-lg);
    animation: bung .55s cubic-bezier(.2, 1.4, .4, 1);
  }
  .the-chuc-mung::before {
    content: ''; position: absolute; inset: -60%; z-index: 0;
    background: repeating-conic-gradient(from 0deg, rgba(255, 198, 38, .10) 0 10deg, transparent 10deg 20deg);
    animation: xoay 24s linear infinite;
  }
  .the-chuc-mung > * { position: relative; z-index: 1; }
  .cm-nhan { font-size: 15px; letter-spacing: .32em; color: var(--gold-300); }
  .cm-giai { margin: 8px 0 4px; font-size: clamp(28px, 4vw, 44px); font-weight: 600; color: var(--gold-500); }
  .cm-so {
    font-size: clamp(84px, 14vw, 168px); font-weight: 700; line-height: 1.05; color: var(--gold-100);
    text-shadow: 0 0 32px rgba(255, 198, 38, .6), 0 5px 0 var(--gold-700);
  }
  .cm-ten { margin-top: var(--space-3); font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; color: var(--ivory); line-height: 1.15; }
  .cm-loi-chuc { max-width: 520px; margin: var(--space-2) auto 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; color: var(--gold-300); font-style: italic; }
  .cm-qua { min-height: 1.4em; margin-top: var(--space-2); font-size: 18px; font-style: italic; color: var(--ivory-70); }
  .cm-hang-nut { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
  .cm-hang-nut .nut-vien-do { background: rgba(1, 28, 23, .55); }

  /* ===== Màn mã QR nhận số ===== */
  .the-qr {
    width: min(900px, 100%); padding: var(--space-5); text-align: center; border-radius: var(--radius);
    background: radial-gradient(circle at 50% 0%, #0b7a62, var(--em-800) 70%);
    box-shadow: 0 0 0 2px var(--gold-500), 0 0 0 9px rgba(255, 198, 38, .14), var(--shadow-lg);
    animation: bung .4s ease-out;
  }
  .qr-tieu-de { margin: 6px 0 var(--space-4); font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--gold-500); }
  .khung-qr { display: inline-block; padding: 18px; border-radius: var(--radius); background: #fff; line-height: 0; }
  .khung-qr img, .khung-qr canvas { width: min(360px, 70vw) !important; height: auto !important; }
  .qr-than { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
  .qr-dem-khung { min-width: 220px; }
  .qr-dem-so {
    font-size: clamp(96px, 12vw, 160px); font-weight: 700; line-height: 1; color: var(--gold-100);
    text-shadow: 0 0 30px rgba(255, 198, 38, .55), 0 5px 0 var(--gold-700);
  }
  .qr-dem-so.nhay { animation: bat-len .5s cubic-bezier(.2, 1.5, .4, 1); }
  .qr-dem-nhan { margin-top: 8px; font-size: 22px; font-weight: 600; color: var(--gold-300); }
  .qr-dem-phu { margin-top: 4px; font-size: 16px; color: var(--ivory-70); }
  .qr-url { margin: var(--space-3) 0 var(--space-4); font-size: 13px; color: var(--ivory-45); word-break: break-all; }
  .qr-nut { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
  .nut-chon-so { background: var(--gold-500); color: var(--ink); box-shadow: none; }
  .nut-chon-so:hover { background: color-mix(in srgb, var(--gold-500) 88%, var(--ink)); }

  /* ===== Ngăn kéo cấu hình ===== */
  .lop-phu-mo { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: rgba(1, 20, 16, .6); animation: hien .2s; }
  .ngan-keo {
    display: flex; flex-direction: column; width: min(560px, 100%); height: 100%;
    background: var(--em-900); box-shadow: var(--shadow-lg), inset 1px 0 0 var(--line);
    animation: truot-vao .25s ease-out;
  }
  .nk-dau { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
  .nk-dau h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 600; }
  .nk-dau h2 i { color: var(--gold-500); }
  .nk-dau h2 #dem-kq { font-size: 15px; font-weight: 400; color: var(--ivory-70); }
  .nk-than { flex: 1; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-5); }
  .nk-chan { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
  .nk-chan > * { flex: 1; }
  .nhom { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
  .nhom legend { margin-bottom: var(--space-2); padding: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
  .luoi-truong { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .truong-rong { grid-column: 1 / -1; }
  .truong > span { display: block; margin-bottom: 5px; font-size: 14px; color: var(--ivory-70); }
  .o-nhap {
    width: 100%; height: 46px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07); color: var(--ivory);
    font: 400 16px var(--font); font-variant-numeric: tabular-nums;
  }
  .o-nhap::placeholder { color: var(--ivory-45); }
  .o-nhap-dai { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
  .o-nhap:focus { outline: 2px solid var(--gold-500); outline-offset: 0; background: rgba(255, 255, 255, .1); }
  .goi-y-truong { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ivory-45); }
  .goi-y-dau { margin: 0 0 6px; }
  .dong-giai {
    display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 8px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .dong-giai .phan-qua { grid-column: 1; }
  .dong-giai .o-nhap.so { text-align: right; font-weight: 600; }
  .o-giay { position: relative; }
  .o-giay .o-nhap { padding-right: 22px; }
  .o-giay::after { content: 's'; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ivory-45); pointer-events: none; }
  .dau-bang-giai {
    display: grid; grid-template-columns: minmax(0, 1fr) 80px 34px; gap: 8px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px; color: var(--ivory-45);
  }
  .dau-bang-giai span:nth-child(2) { text-align: right; }
  .nut-dong { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; }
  .nut-nho { width: 34px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--ivory-70); font-size: 18px; }
  .nut-nho:hover { background: var(--glass-2); }
  .nut-nho.xoa:hover { color: var(--danger); background: rgba(229, 115, 115, .12); }
  .hang-them { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
  .hang-them .goi-y-truong { margin-top: 0; }
  .vung-du-lieu { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ===== Hiệu ứng ===== */
  @keyframes xoay { to { transform: rotate(360deg); } }
  @keyframes bat-len { 0% { transform: scale(.6) rotateX(70deg); } 100% { transform: scale(1) rotateX(0); } }
  @keyframes hao-quang {
    0%, 100% { box-shadow: 0 8px 0 var(--gold-700), 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 198, 38, .0); }
    50% { box-shadow: 0 8px 0 var(--gold-700), 0 14px 30px rgba(0, 0, 0, .45), 0 0 34px 6px rgba(255, 198, 38, .45); }
  }
  @keyframes nhip {
    0%, 100% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 3px rgba(255, 198, 38, .4), 0 0 18px 4px rgba(255, 198, 38, .6); }
    50% { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 0 6px rgba(255, 198, 38, .2), 0 0 36px 12px rgba(255, 198, 38, .75); }
  }
  @keyframes hien { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bung { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes truot-vao { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes hien-dong { from { background: rgba(255, 198, 38, .25); } to { background: transparent; } }

  @media (prefers-reduced-motion: reduce) {
    .the-chuc-mung::before, .nut-quay:not(:disabled) { animation: none; }
  }

  /* ===== Đáp ứng màn hình ===== */
  @media (max-width: 1440px) {
    /* Nhường chỗ cho tên chương trình: Kết quả / Cấu hình chỉ còn icon */
    #nut-ket-qua .chu, #nut-cau-hinh .chu { display: none; }
    #nut-ket-qua, #nut-cau-hinh { padding: 0 12px; }
  }
  @media (max-width: 1100px) {
    .thanh-quay { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3) var(--space-4); }
    .thong-tin-quay { grid-row: 2; grid-column: 1 / -1; }
  }
  @media (max-width: 960px) {
    .dau-trang { padding: var(--space-3) 16px; }
    .cong-cu .nut-phu .chu { display: none; }
    .thanh-quay { padding: var(--space-3); }
    .noi-dung { padding: var(--space-4) 16px var(--space-6); }
    .luoi-ban { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); justify-content: stretch; }
  }
  @media (max-width: 560px) {
    .logo-anh { height: 34px; padding-right: var(--space-2); }
    .ten-don-vi { font-size: 12px; letter-spacing: .12em; }
    .ten-su-kien { font-size: 18px; }
    .cong-cu .nut-phu { padding: 0 12px; }
    .cong-cu .nut-phu .chu, #nut-toan-man-hinh { display: none; }
    .thanh-quay { grid-template-columns: minmax(0, 1fr); }
    .thong-tin-quay { grid-row: auto; }
    .bang-so { justify-content: center; }
    .o-so { width: 52px; height: 68px; font-size: 44px; }
    .nut-quay { min-width: 0; width: 100%; padding: 18px 24px; font-size: 22px; }
    .luoi-ban { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .luoi-truong { grid-template-columns: 1fr; }
    .nk-dau, .nk-than, .nk-chan { padding-left: 16px; padding-right: 16px; }
  }

/* ===== SweetAlert2 theo token (từ ThongBaoUI.html) ===== */
  /* Restyle SweetAlert2 theo token Ngọc lục bảo & Vàng */
  .swal2-popup { font-family: var(--font) !important; background: var(--em-900) !important; color: var(--ivory) !important; border-radius: var(--radius) !important; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg) !important; }
  .swal2-title { color: var(--gold-300) !important; font-weight: 600 !important; }
  .swal2-html-container { color: var(--ivory-70) !important; line-height: 1.55 !important; }
  .swal2-styled.swal2-confirm { background: var(--gold-500) !important; color: var(--ink) !important; font-weight: 600 !important; border-radius: var(--radius) !important; }
  .swal2-styled.swal2-cancel { background: transparent !important; color: var(--ivory) !important; border-radius: var(--radius) !important; box-shadow: inset 0 0 0 1.5px var(--ivory-45) !important; }
  .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(255, 198, 38, .4) !important; }
  .swal2-popup.swal2-toast { background: var(--em-800) !important; box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line) !important; }
  .swal2-popup.swal2-toast .swal2-title { color: var(--ivory) !important; font-size: 16px !important; }
  .swal2-timer-progress-bar { background: var(--gold-500) !important; }