/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Booking căn hộ
   Vỏ giao diện: bo góc lớn, glass, viền phản quang, ambient shadow, tracking hẹp.
   NGOẠI LỆ CÓ CHỦ Ý: ô UT1/UT2/UT3 giữ đúng màu file Excel gốc và contrast cao
   (yêu cầu gốc §5.2) — đây là màn đọc dưới áp lực, không phải màn để ngắm.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Nền & bề mặt */
  --bg:#f4f5f8;
  --bg-2:#eceef3;
  --surface:#fff;
  --surface-2:#fafbfc;
  --ink:#0a0f1c;                    /* dải hero sâu */
  --ink-2:#141b2d;

  /* Chữ */
  --fg:#0f1521;
  --fg-2:rgba(15,21,33,.64);
  --fg-3:rgba(15,21,33,.44);
  --on-ink:#f3f5f9;
  --on-ink-2:rgba(243,245,249,.66);

  /* Viền phản quang */
  --line:rgba(15,21,33,.085);
  --line-2:rgba(15,21,33,.14);
  --glow:rgba(99,102,241,.38);

  /* Chủ đạo & nhấn */
  --pri:#4338ca;
  --pri-2:#6366f1;
  --pri-soft:rgba(99,102,241,.10);
  --acc:#d9772e;
  --acc-soft:rgba(217,119,46,.12);

  --ok:#0f7a46; --ok-soft:rgba(15,122,70,.10);
  --warn:#b45309; --warn-soft:rgba(180,83,9,.12);
  --bad:#c0271f; --bad-soft:rgba(192,39,31,.10);

  /* Màu UT theo file Excel gốc — KHÔNG đổi */
  --ut1:#fce5cd; --ut1b:#d9772e;
  --ut2:#fff2cc; --ut2b:#c99a12;
  --ut3:#d9ead3; --ut3b:#4f8a3c;
  --giu:#ffe3a3; --qua:#ffc48a;

  /* Hình khối */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(10,15,28,.04);
  --sh-2:0 1px 2px rgba(10,15,28,.05), 0 10px 28px -10px rgba(10,15,28,.14);
  --sh-3:0 2px 4px rgba(10,15,28,.06), 0 24px 56px -16px rgba(10,15,28,.22);
  --sh-glow:0 0 0 1px var(--glow), 0 14px 40px -12px rgba(67,56,202,.34);

  /* Chuyển động — spring có overshoot nhẹ */
  --spring:cubic-bezier(.22,1.18,.34,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Chế độ TỐI là TUỲ CHỌN, không tự bật theo cài đặt máy.
   Lý do: ô UT1/UT2/UT3 buộc giữ màu Excel gốc (cam/vàng/xanh nhạt) theo yêu cầu
   gốc §5.2. Nền tối + màu ô sáng cố định = chữ chìm, đọc không nổi — đúng lỗi
   đã gặp ngày 21/08. Mặc định SÁNG; ai muốn tối thì bấm nút chuyển. */
:root[data-theme="dark"]{
    --bg:#080c15; --bg-2:#0c1220;
    --surface:rgba(255,255,255,.045);
    --surface-2:rgba(255,255,255,.026);
    --ink:#05080f; --ink-2:#0b1120;
    --fg:#eef1f6; --fg-2:rgba(238,241,246,.66); --fg-3:rgba(238,241,246,.42);
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
    --pri:#818cf8; --pri-2:#a5b4fc; --pri-soft:rgba(129,140,248,.14);
    --acc:#f0a563; --acc-soft:rgba(240,165,99,.14);
    --ok:#4ade80; --ok-soft:rgba(74,222,128,.13);
    --warn:#fbbf24; --warn-soft:rgba(251,191,36,.13);
    --bad:#f87171; --bad-soft:rgba(248,113,113,.13);
    --sh-2:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -10px rgba(0,0,0,.7);
    --sh-3:0 2px 4px rgba(0,0,0,.5), 0 24px 56px -16px rgba(0,0,0,.8);
}

/* Ở chế độ tối, ô bảng căn PHẢI giữ chữ mực đậm trên nền màu Excel,
   nếu không chữ "Chọn UT…" chìm hẳn. */
:root[data-theme="dark"] .board td.o{color:#1a1408}
:root[data-theme="dark"] .board td.o.trong{background:#1a2233;color:#93a4c0}
:root[data-theme="dark"] .board td.o.trong:hover{background:#24304a;color:#c7d4ea}
:root[data-theme="dark"] .board td.ma,
:root[data-theme="dark"] .board td.sl,
:root[data-theme="dark"] .board td.gia{background:#141c2b;color:var(--fg)}
:root[data-theme="dark"] .board td.o.chot,
:root[data-theme="dark"] .board td.o.ban{background:#2a1414 !important;color:#ff9b93}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1240px;margin:0 auto;padding:20px 18px 64px}

h1,h2,h3{margin:0;letter-spacing:-.022em;font-weight:680;line-height:1.18;color:var(--fg)}
h1{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.032em;font-weight:720}
h2{font-size:clamp(17px,2vw,21px)}
h3{font-size:15px;font-weight:660;letter-spacing:-.012em}
p{margin:.5em 0}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}

.muted{color:var(--fg-2);font-size:13.5px;line-height:1.5}
.dim{color:var(--fg-3);font-size:12.5px}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.tight{gap:8px}
.grow{flex:1 1 auto;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px}
.hide{display:none !important}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 88% -10%,rgba(99,102,241,.34) 0%,transparent 58%),
    radial-gradient(90% 120% at 4% 105%,rgba(217,119,46,.22) 0%,transparent 55%),
    linear-gradient(168deg,var(--ink-2),var(--ink));
  color:var(--on-ink);
  border-radius:var(--r-xl);
  padding:clamp(22px,4vw,38px);
  box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.08);
}
.hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 34%);
}
.hero h1{color:var(--on-ink)}
.hero .muted,.hero .dim{color:var(--on-ink-2)}
.hero .kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-ink-2);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(8px);
}

/* ── THẺ / BENTO ────────────────────────────────────────────────────────── */
.card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(15px,2vw,20px);box-shadow:var(--sh-2);
  backdrop-filter:blur(14px) saturate(140%);
  transition:transform .32s var(--spring),box-shadow .32s var(--ease),border-color .3s var(--ease);
}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--sh-glow);border-color:var(--line-2)}
.card.flat{box-shadow:var(--sh-1)}
.card.tint{background:linear-gradient(180deg,var(--pri-soft),transparent 60%),var(--surface)}

.bento{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.bento>*{grid-column:span 12}
@media(min-width:760px){
  .bento>.b4{grid-column:span 4}
  .bento>.b6{grid-column:span 6}
  .bento>.b8{grid-column:span 8}
  .bento>.b5{grid-column:span 5}
  .bento>.b7{grid-column:span 7}
}

/* ── NÚT ────────────────────────────────────────────────────────────────── */
button,.btn{
  font:inherit;font-weight:580;letter-spacing:-.008em;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--surface);color:var(--fg);
  border:1px solid var(--line-2);box-shadow:var(--sh-1);
  transition:transform .22s var(--spring),box-shadow .22s var(--ease),
             background .2s var(--ease),border-color .2s var(--ease),opacity .2s;
}
button:hover{transform:translateY(-1.5px);box-shadow:var(--sh-2);border-color:var(--pri-2)}
button:active{transform:translateY(0) scale(.985)}
button:focus-visible{outline:2px solid var(--pri-2);outline-offset:2px}
button.pri{background:linear-gradient(180deg,var(--pri-2),var(--pri));color:#fff;border-color:transparent}
button.pri:hover{box-shadow:var(--sh-glow)}
button.ok{background:var(--ok);color:#fff;border-color:transparent}
button.no{background:var(--bad-soft);color:var(--bad);border-color:transparent}
button.ghost{background:transparent;border-color:var(--line);box-shadow:none}
button.sm{padding:5px 10px;font-size:13px;border-radius:8px}
button.lg{padding:14px 22px;font-size:16px;border-radius:var(--r-md)}
button:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:var(--sh-1)}
button svg{flex:none}

/* ── NHẬP LIỆU ──────────────────────────────────────────────────────────── */
input,select,textarea{
  font:inherit;width:100%;padding:10px 12px;color:var(--fg);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--pri-2);background:var(--surface);
  box-shadow:0 0 0 3.5px var(--pri-soft);
}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
label{display:block;margin:13px 0 5px;font-size:13px;font-weight:620;letter-spacing:-.005em;color:var(--fg-2)}
label.inline{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--fg);margin:11px 0}
label.inline input{width:auto;margin-top:3px;accent-color:var(--pri)}
label .req{color:var(--bad)}
.hint{font-size:12px;color:var(--fg-3);margin-top:5px;line-height:1.45}
.err{color:var(--bad);font-size:13px;margin-top:6px;font-weight:520}

/* Ô bị máy chủ trả về là sai — tô viền đỏ để khách thấy ngay phải sửa chỗ nào.
   Đặt bởi danhDauOSai() trong trang-chu.blade.php. */
.o-sai{
  border-color:var(--bad) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent) !important;
}
label.inline.o-sai{
  border:1px solid var(--bad);border-radius:8px;
  padding:6px 8px;margin-left:-8px;margin-right:-8px;
}

.field-search{position:relative}
.field-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
.field-search input{padding-left:40px}

/* ── TAB ────────────────────────────────────────────────────────────────── */
.tabs{
  display:flex;gap:4px;flex-wrap:wrap;margin:16px 0;padding:5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.tabs button{
  border:1px solid transparent;background:transparent;box-shadow:none;
  padding:7px 14px;border-radius:9px;color:var(--fg-2);font-weight:580;
}
.tabs button:hover{transform:none;background:var(--surface);border-color:var(--line);color:var(--fg)}
.tabs button.on{background:var(--surface);color:var(--pri);border-color:var(--line-2);box-shadow:var(--sh-1)}

/* ── HUY HIỆU ───────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3.5px 10px;border-radius:999px;font-size:12px;font-weight:640;
  letter-spacing:-.004em;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg-2);
}
.badge.sap{background:var(--pri-soft);color:var(--pri);border-color:transparent}
.badge.nhan{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge.dong{background:var(--surface-2);color:var(--fg-3)}
.badge.do{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot.pulse{animation:pulse 1.9s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* ── SỐ LIỆU ────────────────────────────────────────────────────────────── */
.stat{display:flex;gap:26px;flex-wrap:wrap}
.stat>div{min-width:76px}
.stat .lb{font-size:11.5px;font-weight:620;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3)}
.stat .vl{font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}

.bar{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pri-2),var(--pri));
  transition:width .8s var(--spring)}

/* ── BẢNG ───────────────────────────────────────────────────────────────── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}
.scroll::-webkit-scrollbar{height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
th,td{padding:9px 11px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
th{
  background:var(--surface-2);font-weight:620;font-size:11.5px;letter-spacing:.045em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;position:sticky;top:0;z-index:2;
  backdrop-filter:blur(8px);
}
tbody tr{transition:background .18s var(--ease)}
tbody tr:hover{background:var(--pri-soft)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.data{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}

/* ── BẢNG CĂN HỘ — giữ đúng màu Excel gốc, contrast cao ────────────────── */
.board{font-size:13px}
.board td,.board th{border:1px solid var(--line);border-bottom:1px solid var(--line)}
.board tbody tr:hover{background:transparent}
.board td.tang{
  background:var(--ink);color:var(--on-ink);font-weight:660;white-space:nowrap;
  position:sticky;left:0;z-index:1;letter-spacing:-.01em;
}
.board td.ma{background:var(--surface-2);font-weight:660;white-space:nowrap;text-align:center;font-size:12.5px}
.board td.lbl{
  color:#fff;font-weight:680;font-size:12px;letter-spacing:.03em;text-align:center;
  position:sticky;left:0;z-index:1;
}
.board tr.p1 td.lbl{background:var(--ut1b)}
.board tr.p2 td.lbl{background:var(--ut2b);color:#241c00}
.board tr.p3 td.lbl{background:var(--ut3b)}
.board tr.p1 td.o{background:var(--ut1)}
.board tr.p2 td.o{background:var(--ut2)}
.board tr.p3 td.o{background:var(--ut3)}
.board td.o{
  position:relative;
  min-width:108px;text-align:center;color:#1a1408;font-weight:560;font-size:12.5px;line-height:1.35;
  transition:box-shadow .2s var(--ease),transform .2s var(--spring);
}
.board td.o.trong{background:var(--surface-2);color:var(--fg-3);cursor:pointer;font-weight:500}
.board td.o.trong:hover{background:var(--pri-soft);color:var(--pri);box-shadow:inset 0 0 0 2px var(--pri-2)}
.board td.o.giu{background:var(--giu) !important;font-weight:660}
.board td.o.qua{background:var(--qua) !important;font-weight:660}
.board td.o.chot{background:var(--surface) !important;box-shadow:inset 0 0 0 2px var(--bad);color:var(--bad);font-weight:700}
.board td.o.ban{background:var(--bad-soft) !important;box-shadow:inset 0 0 0 2px var(--bad);color:var(--bad);font-weight:700}
/* Ô của một căn ĐÃ BÁN ở mức ưu tiên khác — BK-10 §3. Không tô đỏ như ô đã
   chốt: ô này KHÔNG phải người mua được căn, nó là người đã hụt. Làm mờ và gạch
   ngang cho mắt bỏ qua ngay, nhưng vẫn đọc được tên vì vòng ráp căn còn dùng. */
.board td.o.ban-ut-khac{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}
.board td.o.ban-ut-khac .nho{display:block;text-decoration:none;font-size:10.5px;opacity:.9}
.board td.sl{background:var(--surface-2);text-align:center;font-weight:660;color:var(--fg-2)}
.board td.gia{background:var(--surface-2);text-align:center;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.board td.spacer{border:none;height:12px;background:transparent}

/* ── ĐỒNG HỒ ────────────────────────────────────────────────────────────── */
.clock{font-variant-numeric:tabular-nums;font-weight:660;letter-spacing:-.01em}
.clock.warn{color:var(--bad)}
.big-clock{
  font-size:clamp(30px,5vw,46px);font-weight:740;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.big-clock.warn{color:var(--bad)}

/* ── LỚP PHỦ ────────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,10,20,.5);backdrop-filter:blur(7px);
  animation:fadeIn .24s var(--ease);
}
.modal .box{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(18px,3vw,26px);max-width:580px;width:100%;max-height:88vh;overflow:auto;
  box-shadow:var(--sh-3);animation:popIn .42s var(--spring);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

.toast{
  position:fixed;left:50%;bottom:24px;z-index:200;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;max-width:92vw;
  padding:12px 18px;border-radius:var(--r-md);font-size:14px;font-weight:560;
  background:var(--ink);color:var(--on-ink);border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--sh-3);animation:toastIn .46s var(--spring);
}
.toast.bad{background:var(--bad);border-color:transparent;color:#fff}
.toast.good{background:var(--ok);border-color:transparent;color:#fff}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ── THANH ĐẦU DÍNH ─────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:60;margin:-20px -18px 16px;padding:11px 18px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}

/* ── HIỆN DẦN ───────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .62s var(--spring)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ── HƯỚNG DẪN THAO TÁC ─────────────────────────────────────────────────── */
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:14px 0}
.bento.co{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}
.bento.co>*{grid-column:auto}
.step{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 15px 14px 52px;box-shadow:var(--sh-1);
}
.step b{display:block;font-size:14.5px;font-weight:660;letter-spacing:-.012em;margin-bottom:2px}
.step span{font-size:13px;color:var(--fg-2);line-height:1.45}
.step i{
  position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:13px;font-weight:700;background:var(--pri);color:#fff;
}
.tip{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--pri-soft);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 14px;font-size:13.5px;color:var(--fg-2);line-height:1.5;margin:10px 0;
}
.tip svg{flex:none;color:var(--pri);margin-top:1px}
.tip b{color:var(--fg)}

.key{
  display:inline-block;padding:1px 7px;border-radius:6px;font-size:12px;font-weight:640;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);
}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;font-size:12.5px;color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:15px;height:15px;border-radius:4px;border:1px solid var(--line-2);flex:none}

/* ── THANH HÀNH ĐỘNG DÍNH ───────────────────────────────────────────────── */
/* ── THANH THƯƠNG HIỆU (BK-09) ──────────────────────────────────────────────
   Sinh ra ngày 27/08/2026 khi app rời khỏi iframe của thevela.net sang tên
   miền riêng booking.thevela.net. Trong iframe, khách vẫn thấy header + menu
   của website dự án nên luôn có đường về; đứng một mình thì app là ngõ cụt —
   vào rồi không có cách nào quay lại trang dự án ngoài nút Back.

   🔴 CỐ Ý KHÔNG `position:sticky`. Thanh `.actionbar` ngay dưới đã dính ở
      `top:0`; cho thanh này dính nữa là phải dời mốc của actionbar, kéo theo
      mọi phép cuộn-tới-phần-tử trong app. Thanh thương hiệu là lối thoát, không
      phải công cụ dùng liên tục — cuộn lên đầu trang gặp nó là đủ.
   ────────────────────────────────────────────────────────────────────────── */
.brandbar{
  background:var(--ink);color:var(--on-ink);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brandbar .inner{
  max-width:1240px;margin:0 auto;padding:11px 18px;
  display:flex;align-items:center;gap:14px;
}
.brandbar a{color:var(--on-ink);text-decoration:none}
.brandbar a:hover{text-decoration:none}
.brandbar .hieu{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(15px,2.2vw,19px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.brandbar .hieu:hover{opacity:.82}
.brandbar .ve{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:560;color:var(--on-ink-2);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.brandbar .ve:hover{color:var(--on-ink);border-color:rgba(255,255,255,.3)}
@media (max-width:520px){
  .brandbar .inner{padding:9px 14px;gap:10px}
  .brandbar .hieu{letter-spacing:.1em}
  .brandbar .ve{padding:5px 10px;font-size:12px}
  /* Trên màn hẹp chữ "Về trang dự án" ăn hết chỗ của tên dự án — bỏ chữ,
     giữ mũi tên. Vẫn bấm được, vẫn còn nhãn cho trình đọc màn hình. */
  .brandbar .ve span{display:none}
}

.actionbar{
  position:sticky;top:0;z-index:70;margin:0 -18px 16px;padding:11px 18px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.actionbar .inner{max-width:1240px;margin:0 auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip-gio{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  padding:8px 13px;border-radius:var(--r-sm);font-weight:600;font-size:13.5px;
  background:var(--pri-soft);border:1px solid var(--line-2);color:var(--pri);
}
.chip-gio.day{background:var(--ok-soft);color:var(--ok)}
.chip-gio b{font-variant-numeric:tabular-nums}

/* ── PHIẾU DÍNH BÊN PHẢI ────────────────────────────────────────────────── */
/* Panel phiếu: ĐẦU cố định – THÂN cuộn – ĐÁY ghim.
   Trước đây cả panel cuộn nên nút "Gửi phiếu booking" tụt khỏi mép dưới, khách
   phải cuộn trong một khung hẹp mới thấy. Nay nút luôn nằm trong tầm mắt. */
@media(min-width:1000px){
  /* CHUỖI FLEX PHẢI LIỀN MẠCH: .dinh → form → than-f/chan-f.
     Thiếu một mắt (như bản trước, quên đặt flex cho chính <form>) là đáy không
     ghim được và nút gửi văng hẳn ra ngoài thẻ. */
  .dinh{
    position:sticky;top:74px;height:calc(100vh - 92px);
    display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;
  }
  .dinh > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .dinh .than-f{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    margin-right:-8px;padding-right:8px;
  }
  .dinh .than-f::-webkit-scrollbar{width:7px}
  .dinh .than-f::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
  .dinh .chan-f{
    flex:none;border-top:1px solid var(--line);background:var(--surface);
    margin:0 calc(-1 * clamp(15px,2vw,20px));
    padding:12px clamp(15px,2vw,20px) 16px;
  }
}
/* Dưới 1000px panel là khối thường: đáy đi theo dòng chảy, không ghim. */
@media(max-width:999px){
  .dinh .chan-f{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
}
/* Gọn hơn: nhãn sát ô, bớt khoảng trắng thừa để form vừa một màn */
.dinh label{margin:9px 0 3px}
.dinh input,.dinh textarea,.dinh select{padding:8px 10px}
.dinh .hint{margin-top:3px}
.dinh h2{font-size:18px}

details.them{margin-top:10px}
details.them>summary{
  cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--pri);
  padding:7px 0;display:flex;align-items:center;gap:6px;
}
details.them>summary::-webkit-details-marker{display:none}
details.them>summary:before{content:'+';font-size:15px;line-height:1}
details.them[open]>summary:before{content:'–'}

/* Ô chọn ưu tiên trong phiếu */
.slot{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.slot .lbl{
  flex:none;width:42px;height:36px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:12.5px;color:#fff;
}
.slot.p1 .lbl{background:var(--ut1b)}
.slot.p2 .lbl{background:var(--ut2b);color:#241c00}
.slot.p3 .lbl{background:var(--ut3b)}
.slot input{flex:1 1 auto;font-weight:600;letter-spacing:.01em}
.slot input:placeholder-shown{font-weight:400}
.slot .xoa{flex:none;padding:7px 9px;border-radius:8px;box-shadow:none}

/* ── Ô TRỐNG IM LẶNG ────────────────────────────────────────────────────── */
/* Ô trống chỉ hiện dấu +, chữ "Chọn UT…" chỉ bật khi rê chuột.
   Nhờ vậy ô ĐÃ CÓ KHÁCH mới là thứ nổi lên khi đọc lướt. */
.board td.o.trong{font-size:16px;font-weight:400;color:var(--fg-3)}
.board td.o.trong .nhan{display:none;font-size:12px;font-weight:600}
.board td.o.trong .cong{display:inline}
.board td.o.trong:hover .nhan{display:inline}
.board td.o.trong:hover .cong{display:none}

/* ── THANH DƯỚI CHO ĐIỆN THOẠI ──────────────────────────────────────────── */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--line-2);
  box-shadow:0 -6px 24px -10px rgba(10,15,28,.28);
}
.mobilebar .inner{display:flex;gap:10px;align-items:center}
@media(max-width:999px){
  .mobilebar.on{display:block}
  body.co-bar{padding-bottom:76px}
}

/* ── BẢNG CĂN: MỖI TẦNG MỘT BẢNG, VỪA KHÍT KHÔNG KÉO NGANG ──────────────── */
/* Trước đây một bảng chung cho mọi tầng + 3 cột SL UT → tràn phải, khách phải
   kéo ngang mới thấy A.04.08. Nay tách từng tầng, table-layout:fixed, width
   100% nên LUÔN vừa khít mọi bề ngang. Số lượt UT dời lên tiêu đề tầng. */
.floor{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-1);margin-bottom:12px;
}
.floor .fh{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:9px 13px;background:var(--ink);color:var(--on-ink);
}
.floor .fh b{font-size:14.5px;font-weight:660;letter-spacing:-.015em}
.floor .fh .sl{font-size:12px;color:var(--on-ink-2);font-variant-numeric:tabular-nums}
.floor table{table-layout:fixed;width:100%;border-collapse:collapse}
.floor td{border:1px solid var(--line);padding:0}

.board td.ma{
  background:var(--surface-2);font-weight:680;text-align:center;
  font-size:12px;padding:7px 2px;white-space:nowrap;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--fg);
}
.board td.lbl{
  color:#fff;font-weight:700;font-size:11px;letter-spacing:.02em;text-align:center;padding:8px 2px;
}
.board td.o{
  text-align:center;color:#1a1408;font-weight:560;font-size:11.5px;line-height:1.3;
  padding:8px 3px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  transition:box-shadow .18s var(--ease);
}
.board td.gia{
  background:var(--surface-2);text-align:center;font-size:11px;padding:5px 2px;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* Ô trống chỉ hiện dấu "+" (mã căn đã ở tiêu đề cột, in lại 3 lần là thừa).
   Rê chuột mới đổi thành "Chọn UTn". */
.board td.o.trong{
  font-size:16px;font-weight:400;color:var(--fg-3);cursor:pointer;background:var(--surface-2);
}
.board td.o.trong:hover{box-shadow:inset 0 0 0 2px var(--pri-2);color:var(--pri)}
.board td.o.trong .nhan{display:none;font-size:11.5px;font-weight:640}
.board td.o.trong .cong{display:inline}
.board td.o.trong:hover .cong{display:none}
.board td.o.trong:hover .nhan{display:inline}

/* ── ĐIỆN THOẠI: bảng đổi thành DANH SÁCH THEO CĂN ─────────────────────── */
/* 8 cột trên màn 390px là không đọc nổi. Mỗi căn một dòng, 3 nút UT bấm thẳng. */
.ulist{display:flex;flex-direction:column}
.urow{
  display:flex;gap:8px;align-items:center;padding:9px 12px;
  border-top:1px solid var(--line);
}
.urow:first-child{border-top:none}
.urow .code{flex:none;width:74px;font-weight:660;font-size:13px;font-variant-numeric:tabular-nums}
.urow .code small{display:block;font-weight:400;font-size:11px;color:var(--fg-3)}
.urow .code small:empty{display:none}
.urow .uts{display:flex;gap:6px;flex:1 1 auto;flex-wrap:wrap}
.ut{
  position:relative;
  flex:1 1 0;min-width:74px;padding:7px 8px;border-radius:8px;text-align:center;
  font-size:11.5px;font-weight:640;line-height:1.25;border:1px solid transparent;color:#1a1408;
}
.ut.p1{background:var(--ut1)} .ut.p2{background:var(--ut2)} .ut.p3{background:var(--ut3)}
.ut.trong{background:var(--surface-2);color:var(--pri);border-color:var(--line-2);cursor:pointer}
.ut.trong:active{transform:scale(.97)}
.ut.giu{background:var(--giu) !important} .ut.qua{background:var(--qua) !important}
.ut.chot,.ut.ban{background:var(--bad-soft) !important;color:var(--bad);border-color:var(--bad)}
.ut small{display:block;font-weight:400;font-size:10.5px;opacity:.85}

/* ── Ô ĐANG CHỌN TRONG PHIẾU ────────────────────────────────────────────── */
/* Khách chọn 3 căn ở 3 chỗ khác nhau trên bảng dài — không đánh dấu thì
   không biết mình đã bấm cái nào. Bấm lại chính ô đó là bỏ chọn. */
.board td.o.dachon{
  background:var(--ok-soft) !important;
  box-shadow:inset 0 0 0 2px var(--ok);
  color:var(--ok);font-weight:700;font-size:12px;
}
.board td.o.dachon .cong,.board td.o.dachon .nhan{display:none !important}
.board td.o.dachon:before{content:'✓ ';font-weight:800}
.ut.dachon{
  background:var(--ok-soft) !important;border-color:var(--ok);
  color:var(--ok);font-weight:700;
}
/* Ô nhập bị trùng căn */
.slot input.trung{border-color:var(--bad);background:var(--bad-soft);color:var(--bad);font-weight:660}
.loi-chon{
  display:flex;gap:8px;align-items:flex-start;margin-top:10px;
  background:var(--bad-soft);border:1px solid var(--bad);border-radius:var(--r-sm);
  padding:9px 11px;font-size:12.5px;color:var(--bad);line-height:1.45;
}
.loi-chon svg{flex:none;margin-top:1px}

/* ═══ KHUNG QUẢN TRỊ: SIDEBAR DỌC ═══════════════════════════════════════════
   10 mục trên thanh ngang bị xuống 2 dòng, vừa xấu vừa khó nhắm. Sidebar dọc
   có NHÓM cho phép đọc lướt theo giai đoạn công việc, và còn chỗ cho mục mới. */
.shell{display:flex;min-height:100vh;align-items:flex-start}

/* 🔴 CUON NAM O .nav, KHONG NAM O .sidebar.
   Truoc day .sidebar tu cuon (overflow-y:auto). Man hinh thap hon chieu cao
   cua 10 muc menu thi khoi tai khoan + nut "Doi mat khau"/"Thoat" o day bi
   day xuong duoi tam nhin — nguoi dung khong thay duong dang xuat, va khong
   nghi ra la phai cuon RIENG thanh ben. Nay chan sidebar dinh cung, chi danh
   sach muc cuon. */
.sidebar{
  flex:none;width:250px;align-self:stretch;position:sticky;top:0;
  height:100vh;overflow:hidden;z-index:90;
  background:linear-gradient(178deg,#161d3f 0%,#0d1230 55%,#0a0e26 100%);
  color:#eef1f8;border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;
}
.sidebar .nav::-webkit-scrollbar{width:6px}
.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}

.brand{display:flex;gap:11px;align-items:center;padding:18px 16px 14px}
.brand .mark{
  width:36px;height:36px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(150deg,var(--pri-2),var(--pri));
  box-shadow:0 6px 18px -6px rgba(99,102,241,.7);
}
.brand b{font-size:15px;font-weight:680;letter-spacing:-.02em;line-height:1.15;display:block}
.brand small{font-size:11.5px;color:rgba(238,241,248,.55)}

.nav{padding:4px 10px 10px;flex:1 1 auto;min-height:0;overflow-y:auto}
.nav .grp{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(238,241,248,.38);padding:15px 8px 6px;
}
.nav a{
  display:flex;gap:10px;align-items:center;
  padding:9px 11px;margin-bottom:2px;border-radius:11px;cursor:pointer;
  color:rgba(238,241,248,.74);font-size:13.5px;font-weight:560;letter-spacing:-.008em;
  border:1px solid transparent;text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease),transform .2s var(--spring);
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none;transform:translateX(2px)}
.nav a.on{
  background:#fff;color:#12173a;font-weight:680;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.nav a.on svg{color:var(--pri)}
.nav a svg{flex:none;opacity:.9}
.nav a .cham{
  margin-left:auto;min-width:20px;height:19px;padding:0 6px;border-radius:99px;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  background:var(--bad);color:#fff;
}
.nav a.on .cham{background:var(--bad)}

.side-foot{
  flex:none;                       /* luon dinh o day, khong co lai */
  padding:12px 14px 16px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;color:rgba(238,241,248,.6);
}
.side-foot .who{display:flex;gap:9px;align-items:center;margin-bottom:10px}
.side-foot .ava{
  width:32px;height:32px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;
  background:linear-gradient(150deg,#7c8cf8,#4338ca);
}
.side-foot .who b{color:#fff;font-size:13px;font-weight:640;display:block;line-height:1.2}
/* Dong vai tro (#toiVai) dung class .dim toan cuc — ma `.dim{color:var(--fg-3)}`
   lat theo theme. Trong sidebar (luon nen toi) thi mot trong hai giao dien se
   mat chu. Ghi cung mau sang, giong het `.who b` ngay tren. */
.side-foot .who .dim,
.side-foot #toiVai{color:rgba(238,241,248,.62);font-size:12px}

/* 🔴 SIDEBAR LUON NEN TOI O CA HAI GIAO DIEN — chu trong no phai TU DAT MAU
   SANG, khong duoc dung var(--fg)/var(--line).

   Bay da tra gia (28/08/2026): `button{color:var(--fg)}` va
   `button.ghost{border-color:var(--line)}` lat theo theme. O giao dien Toi thi
   --fg la #eef1f6 nen ba nut Sang / Doi mat khau / Thoat hien ro; chuyen sang
   giao dien Sang thi --fg thanh #0f1521 — CHU DEN TREN NEN XANH DAM, nut coi
   nhu bien mat. Nguoi dung bao "khong thay cho nao thoat ra", va o giao dien
   Toi thi khong ai tai hien duoc.

   `.nut-thu` o khoi brand von da ghi cung mau sang nen khong dinh — day la ly
   do loi chi xuat hien o chan sidebar. Them mot phan tu vao .side-foot thi
   nho ghi mau cung y het cach nay. */
.side-foot button{
  color:rgba(238,241,248,.92);
  border-color:rgba(255,255,255,.18);
  background:transparent;
}
.side-foot button:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.32);
}
.side-foot button svg{opacity:.9}

.main{flex:1 1 auto;min-width:0;padding:0 clamp(14px,2vw,26px) 60px}
.topbar-a{
  position:sticky;top:0;z-index:70;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:13px 0;margin-bottom:4px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.topbar-a h1{font-size:21px;letter-spacing:-.028em;margin:0}
.burger{display:none;padding:8px 10px}

@media(max-width:1000px){
  .sidebar{
    position:fixed;left:0;top:0;transform:translateX(-100%);
    transition:transform .3s var(--spring);box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  .sidebar.mo{transform:none}
  .burger{display:inline-flex}
  .main{padding-left:14px}
  .man-che{position:fixed;inset:0;background:rgba(6,10,20,.5);z-index:85;backdrop-filter:blur(3px)}
}

/* ═══ LỚP PHỦ ĐANG TẢI ═════════════════════════════════════════════════════
   Apps Script mất ~1,5–3s mỗi lượt gọi. Không báo gì thì người dùng tưởng
   bấm hụt và bấm lại. Chỉ hiện sau 250ms để lần tải nhanh không bị nháy. */
.dangtai{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(5px);
  animation:fadeIn .18s var(--ease);
}
.dangtai .hop{
  display:flex;gap:13px;align-items:center;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:16px 22px;box-shadow:var(--sh-3);animation:popIn .36s var(--spring);
}
.dangtai b{font-size:14.5px;font-weight:640;letter-spacing:-.01em;display:block}
.dangtai span{font-size:12.5px;color:var(--fg-2)}
.spin{
  width:26px;height:26px;flex:none;border-radius:50%;
  border:2.5px solid var(--pri-soft);border-top-color:var(--pri);
  animation:quay .7s linear infinite;
}
@keyframes quay{to{transform:rotate(360deg)}}

/* Vạch tiến trình mảnh trên đỉnh — báo hoạt động cả khi không có lớp phủ */
.thanhtai{
  position:fixed;top:0;left:0;height:2.5px;z-index:160;width:0;
  background:linear-gradient(90deg,var(--pri-2),var(--acc));
  transition:width .3s var(--ease),opacity .3s;
}

/* ── SIDEBAR THU HẸP (chỉ icon) ─────────────────────────────────────────── */
/* Nhường ~180px cho vùng nội dung — đủ để bảng danh sách booking không tràn. */
.sidebar.hep{width:68px}
.sidebar.hep .brand span:not(.mark),
.sidebar.hep .nav a span:not(.cham),
.sidebar.hep .grp,
.sidebar.hep .side-foot .who span,
.sidebar.hep .side-foot button span{display:none}
.sidebar.hep .brand{justify-content:center;padding:18px 0 14px}
.sidebar.hep .nav{padding:10px 9px}
.sidebar.hep .nav a{justify-content:center;padding:11px 0;position:relative}
.sidebar.hep .nav a .cham{
  position:absolute;top:4px;right:6px;margin:0;min-width:17px;height:17px;font-size:10px;padding:0 4px;
}
.sidebar.hep .side-foot{padding:12px 8px}
.sidebar.hep .side-foot .who{justify-content:center;margin-bottom:8px}
.sidebar.hep .side-foot .row{flex-direction:column;gap:6px}
.sidebar.hep .side-foot button{width:100%;padding:8px 0}
.nut-thu{
  margin-left:auto;background:rgba(255,255,255,.08);border:none;box-shadow:none;
  color:rgba(238,241,248,.7);padding:6px;border-radius:8px;
}
.nut-thu:hover{background:rgba(255,255,255,.16);color:#fff;transform:none}
.sidebar.hep .nut-thu{display:none}

/* ── BẢNG GỌN: KHÔNG XUỐNG DÒNG ────────────────────────────────────────── */
/* Cột nào cũng nowrap; cột dài thì cắt bằng "…" và giữ đủ nội dung ở title. */
.tb-gon td,.tb-gon th{white-space:nowrap;padding:7px 10px;font-size:13px}
.tb-gon td.ten{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.tb-gon td.nho{font-size:12px;color:var(--fg-2)}
.tb-gon .ut-list{font-variant-numeric:tabular-nums;font-size:12.5px}
.tb-gon .ut-list b{font-weight:640}
.tb-gon .ut-list i{font-style:normal;color:var(--fg-3);margin:0 3px}
/* Ba cột UT1/UT2/UT3 tách rời — BK-10 §4. UT1 đậm hơn hai cột kia vì nút Khoá
   đỏ ở cuối dòng luôn khoá đúng ô UT1: người bấm phải thấy nó trước tiên. */
.tb-gon td.ut{font-variant-numeric:tabular-nums;font-size:12.5px;text-align:center}
.tb-gon td.ut1{font-weight:680}
.tb-gon td.ut b{font-weight:inherit}
.tb-gon td.ut .dim{color:var(--fg-3)}
.tb-gon th.ut{text-align:center;font-size:11.5px;letter-spacing:.02em}

/* Nút chỉ-icon trên một hàng, không bao giờ xuống dòng */
.hang-nut{display:flex;gap:5px;flex-wrap:nowrap;justify-content:flex-end}
.ico-btn{
  width:31px;height:31px;padding:0;flex:none;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
}
.ico-btn svg{margin:0}
.ico-btn.ok{background:var(--ok);color:#fff;border-color:transparent}
.ico-btn.no{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.ico-btn.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}

@media(max-width:640px){
  .wrap{padding:14px 12px 48px}
  .topbar{margin:-14px -12px 12px;padding:9px 12px}
  .stat{gap:16px}
  th,td{padding:7px 9px}
}

/* ── Ô VỪA ĐỔI Ở LƯỢT LÀM MỚI NGẦM ──────────────────────────────────────── */
/* Bảng tự làm mới 15 giây một lần. Trước đây cả bảng được dựng lại và chạy lại
   hiệu ứng hiện dần → khách thấy trang "giật giật" và mất chỗ đang rê chuột.
   Nay chỉ ô nào ĐỔI THẬT mới nháy viền một cái — mắt vẫn bắt được thay đổi mà
   phần còn lại của bảng đứng yên tuyệt đối.
   Dùng ::after chứ không dùng box-shadow trực tiếp: ô .chot/.ban đã xài
   box-shadow inset cho viền đỏ, đè lên là mất viền đó. */
.board td.o.doi::after,.ut.doi::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--acc);animation:oDoi 1.5s var(--ease) forwards;
}
@keyframes oDoi{0%{opacity:0}10%{opacity:1}65%{opacity:1}100%{opacity:0}}