/* ============================================================
   SakuraTool · Hệ thống thiết kế "Sơn mài & Bảng cầu"
   Nền sơn mài ấm · chỉ vàng · hạt cầu đỏ/lục
   Không gradient chữ, không glassmorphism, không emoji hệ thống.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
  /* Màu — mỗi màu có một nhiệm vụ, không dùng lẫn */
  --ink:    #15110F;   /* nền trang, đen ngả nâu như vóc sơn mài */
  --raise:  #1C1714;   /* bề mặt nổi */
  --lac:    #26141A;   /* panel, ngả huyết dụ */
  --bone:   #EDE4D6;   /* chữ chính */
  --dim:    #948A7C;   /* chữ phụ */
  --gold:   #B8912F;   /* chỉ vàng: đường kẻ, trạng thái đang chọn */
  --verm:   #C8402F;   /* hạt Tài · lỗi · nguy hiểm */
  --jade:   #4E8C6E;   /* hạt Xỉu · thành công */
  --line:   rgba(184,145,47,.20);
  --line-s: rgba(237,228,214,.08);

  --ff:  'Be Vietnam Pro', system-ui, sans-serif;
  --fm:  'JetBrains Mono', ui-monospace, monospace;

  --r:   4px;    /* panel: gần vuông */
  --rb:  999px;  /* hạt cầu: tròn tuyệt đối — tương phản có chủ đích */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}
body{
  min-height:100dvh;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ff);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Vân dệt rất mờ — bề mặt vải chứ không phải kính */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(237,228,214,.014) 3px 4px),
    repeating-linear-gradient(0deg, transparent 0 3px,rgba(237,228,214,.010) 3px 4px);
}
body > *{position:relative;z-index:1;}

a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
img,svg{display:block;}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ── Chữ ─────────────────────────────────────────────────── */
.display{
  font-weight:900;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(2.4rem,11vw,4rem);
}
.display .thin{font-weight:400;letter-spacing:-.03em;}

h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.15;}
h1{font-size:1.55rem;}
h2{font-size:1.15rem;}
h3{font-size:.95rem;}

/* Nhãn kiểu sổ cái — dấu hiệu nhận dạng của cả site */
.eyebrow{
  font-family:var(--fm);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--gold);
}
.meta{font-family:var(--fm);font-size:.68rem;color:var(--dim);letter-spacing:.04em;}
.num{font-family:var(--fm);font-weight:700;font-variant-numeric:tabular-nums;}
.dim{color:var(--dim);}
.small{font-size:.8rem;}

/* ── Bố cục ──────────────────────────────────────────────── */
.wrap{width:100%;max-width:520px;margin:0 auto;padding:24px 18px 48px;}
.wrap-wide{max-width:1180px;}
.stack{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;align-items:center;gap:10px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.grow{flex:1;min-width:0;}

/* Đường kẻ chỉ vàng — phân đoạn, không trang trí */
.hair{height:1px;background:var(--line);border:0;margin:18px 0;}
.hair-s{height:1px;background:var(--line-s);border:0;margin:12px 0;}

/* ── Panel ───────────────────────────────────────────────── */
.panel{
  background:var(--lac);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
}
.panel-flat{background:var(--raise);}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}

/* ── Hạt cầu · yếu tố nhận diện ──────────────────────────── */
.bead{
  width:14px;height:14px;border-radius:var(--rb);flex:none;
  background:var(--raise);border:1px solid var(--line-s);
}
.bead.t{background:var(--verm);border-color:transparent;}
.bead.x{background:var(--jade);border-color:transparent;}
.bead.sm{width:9px;height:9px;}

.board{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,14px);
  gap:5px;justify-content:start;overflow-x:auto;padding:2px;
  scrollbar-width:none;
}
.board::-webkit-scrollbar{display:none;}
.board .bead{animation:beadIn .5s backwards;}
@keyframes beadIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}

/* Dải hạt chạy ngang — dùng ở mép trên trang công khai */
.ribbon{display:flex;gap:6px;overflow:hidden;padding:2px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}

/* ── Nút ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:2px;
  font-weight:800;font-size:.88rem;letter-spacing:-.01em;
  border:1px solid var(--line);color:var(--bone);
  transition:background .15s,border-color .15s,transform .1s;
}
.btn:hover{border-color:var(--gold);background:rgba(184,145,47,.07);}
.btn:active{transform:translateY(1px);}
.btn-solid{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.btn-solid:hover{background:#fff;border-color:#fff;}
.btn-danger{color:var(--verm);border-color:rgba(200,64,47,.4);}
.btn-danger:hover{background:rgba(200,64,47,.1);border-color:var(--verm);}
.btn-ok{color:var(--jade);border-color:rgba(78,140,110,.4);}
.btn-ok:hover{background:rgba(78,140,110,.1);border-color:var(--jade);}
.btn-sm{padding:6px 12px;font-size:.74rem;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ── Trường nhập ─────────────────────────────────────────── */
.field{display:block;margin-bottom:14px;}
.field > span{
  display:block;font-family:var(--fm);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--dim);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border-radius:2px;
  background:var(--ink);border:1px solid var(--line-s);
  font-size:.92rem;transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);outline:none;
}
.field input::placeholder{color:#5C554D;}
.field textarea{min-height:88px;resize:vertical;}
.field select{appearance:none;background-image:none;}
.field-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.field-row .field{flex:1;min-width:130px;margin-bottom:0;}

/* ── Nhãn trạng thái ─────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;
  border:1px solid var(--line-s);color:var(--dim);
}
.tag-ok{color:var(--jade);border-color:rgba(78,140,110,.4);}
.tag-warn{color:var(--gold);border-color:rgba(184,145,47,.4);}
.tag-bad{color:var(--verm);border-color:rgba(200,64,47,.4);}

/* ── Thông báo ───────────────────────────────────────────── */
.note{
  padding:11px 14px;border-radius:2px;font-size:.84rem;
  border-left:2px solid var(--dim);background:var(--raise);margin-bottom:14px;
}
.note-ok{border-left-color:var(--jade);color:#A6D3BC;}
.note-bad{border-left-color:var(--verm);color:#EDA79E;}
.note-warn{border-left-color:var(--gold);color:#E0C77E;}

/* ── Bảng sổ cái ─────────────────────────────────────────── */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.ledger{width:100%;border-collapse:collapse;font-size:.82rem;white-space:nowrap;}
.ledger th{
  font-family:var(--fm);font-size:.6rem;font-weight:700;text-align:left;
  text-transform:uppercase;letter-spacing:.14em;color:var(--dim);
  padding:8px 12px;border-bottom:1px solid var(--line);
}
.ledger td{padding:11px 12px;border-bottom:1px solid var(--line-s);vertical-align:middle;}
.ledger tr:last-child td{border-bottom:none;}
.ledger tbody tr:hover td{background:rgba(184,145,47,.04);}
.ledger .num{font-size:.8rem;}

/* ── Trạng thái rỗng ─────────────────────────────────────── */
.empty{text-align:center;padding:40px 20px;color:var(--dim);}
.empty strong{display:block;color:var(--bone);font-size:.95rem;margin-bottom:4px;}

/* ── Biểu tượng ──────────────────────────────────────────── */
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ico-sm{width:16px;height:16px;}
.ico-lg{width:26px;height:26px;}

/* ── Đang tải: ba hạt cầu ────────────────────────────────── */
.loading{display:flex;gap:7px;justify-content:center;align-items:center;padding:44px 0;}
.loading i{width:11px;height:11px;border-radius:var(--rb);background:var(--gold);
  animation:beadPulse 1.1s infinite ease-in-out;}
.loading i:nth-child(2){animation-delay:.16s;background:var(--verm);}
.loading i:nth-child(3){animation-delay:.32s;background:var(--jade);}
@keyframes beadPulse{0%,80%,100%{opacity:.25;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}

/* ── Thanh điều hướng trên ───────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(21,17,15,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1180px;margin:0 auto;padding:0 16px;height:56px;
  display:flex;align-items:center;gap:12px;}
.brand{display:flex;align-items:baseline;gap:7px;font-weight:900;letter-spacing:-.04em;font-size:1rem;}
.brand em{font-style:normal;color:var(--gold);}

/* ── Thẻ điều hướng dạng ô ───────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.tile{
  display:flex;flex-direction:column;gap:8px;padding:16px;
  background:var(--raise);border:1px solid var(--line-s);border-radius:var(--r);
  transition:border-color .15s,background .15s;
}
.tile:hover{border-color:var(--gold);background:var(--lac);}
.tile b{font-size:.9rem;font-weight:800;letter-spacing:-.01em;}
.tile span{font-size:.74rem;color:var(--dim);line-height:1.35;}
.tile .ico{color:var(--gold);}

/* ── Chỉ số ──────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;}
.stat{background:var(--raise);border:1px solid var(--line-s);border-radius:var(--r);
  padding:14px;border-top:2px solid var(--gold);}
.stat b{display:block;font-family:var(--fm);font-weight:700;font-size:1.5rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.stat span{font-family:var(--fm);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--dim);}

/* ── Cặp khoá/giá trị ────────────────────────────────────── */
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-s);font-size:.85rem;}
.kv:last-child{border-bottom:none;}
.kv dt{color:var(--dim);}
.kv dd{text-align:right;font-family:var(--fm);font-size:.8rem;}

@media(min-width:640px){
  body{font-size:15.5px;}
  .wrap{padding:32px 24px 64px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ============================================================
   Lớp chuyển động
   Bật bằng class .motion trên <html> (script nhỏ trong <head>).
   Không có JS hoặc người dùng tắt hiệu ứng -> mọi thứ hiện đủ, chỉ là không động.
   ============================================================ */

/* ── Hiện dần khi cuộn tới ────────────────────────────────── */
html.motion [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
html.motion [data-reveal].is-in{opacity:1;transform:none;}
html.motion [data-reveal="left"]{transform:translateX(-18px);}
html.motion [data-reveal="scale"]{transform:scale(.965);}

/* Con lần lượt hiện, không cùng lúc */
html.motion [data-stagger] > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
html.motion [data-stagger].is-in > *{opacity:1;transform:none;}
html.motion [data-stagger].is-in > *:nth-child(1){transition-delay:.04s}
html.motion [data-stagger].is-in > *:nth-child(2){transition-delay:.10s}
html.motion [data-stagger].is-in > *:nth-child(3){transition-delay:.16s}
html.motion [data-stagger].is-in > *:nth-child(4){transition-delay:.22s}
html.motion [data-stagger].is-in > *:nth-child(5){transition-delay:.28s}
html.motion [data-stagger].is-in > *:nth-child(6){transition-delay:.34s}
html.motion [data-stagger].is-in > *:nth-child(n+7){transition-delay:.40s}

/* ── Tiêu đề lớn: từng chữ nhô lên ────────────────────────── */
.ch{display:inline-block;white-space:pre;}
html.motion .ch{
  opacity:0;transform:translateY(.5em) rotate(2deg);
  animation:chRise .68s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes chRise{to{opacity:1;transform:none;}}

/* ── Dải hạt trôi ngang ───────────────────────────────────── */
html.motion .ribbon-flow{overflow:hidden;}
html.motion .ribbon-flow > .ribbon{animation:drift 34s linear infinite;width:max-content;}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Hạt cầu thở nhẹ, thỉnh thoảng đảo màu ────────────────── */
html.motion .board .bead{transition:background .5s ease, transform .35s ease;}
html.motion .board .bead.flip{transform:scale(1.28);}
html.motion .bead.pulse{animation:beadBreath 3.4s ease-in-out infinite;}
@keyframes beadBreath{0%,100%{opacity:1}50%{opacity:.55}}

/* ── Nút: vệt sáng quét qua khi rê chuột ──────────────────── */
.btn{position:relative;overflow:hidden;}
.btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(237,228,214,.16) 50%,transparent 62%);
  transform:translateX(-130%);
}
html.motion .btn:hover::after{transition:transform .62s ease;transform:translateX(130%);}
.btn-solid::after{background:linear-gradient(105deg,transparent 38%,rgba(21,17,15,.10) 50%,transparent 62%);}

/* ── Panel: viền chỉ vàng chạy dọc mép trên khi hiện ra ───── */
.panel{position:relative;}
.panel::before{
  content:'';position:absolute;top:-1px;left:0;height:1px;width:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
html.motion .panel.is-in::before{width:100%;transition:width .9s cubic-bezier(.2,.7,.3,1) .12s;}

/* ── Ô, thẻ: nhấc nhẹ khi rê ──────────────────────────────── */
.tile,.panel,.stat{transition:border-color .2s, background .2s, transform .25s cubic-bezier(.2,.7,.3,1);}
html.motion .tile:hover,html.motion .stat:hover{transform:translateY(-3px);}
html.motion a.panel:hover{transform:translateY(-3px);}

/* ── Bảng: dòng trượt sang khi rê ─────────────────────────── */
html.motion .ledger tbody tr{transition:background .18s, transform .18s;}
html.motion .ledger tbody tr:hover{transform:translateX(3px);}

/* ── Biểu tượng xoay nhẹ khi rê vào thẻ ───────────────────── */
html.motion .tile .ico,html.motion a.panel .ico{transition:transform .3s cubic-bezier(.2,.7,.3,1);}
html.motion .tile:hover .ico,html.motion a.panel:hover .ico{transform:rotate(-8deg) scale(1.12);}

/* ── Nội dung tab admin đổi mượt ──────────────────────────── */
html.motion .tab-fade{animation:tabIn .38s cubic-bezier(.2,.7,.3,1);}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Nhãn trạng thái vừa đổi: nháy một cái ────────────────── */
html.motion .note{animation:noteIn .42s cubic-bezier(.2,.7,.3,1);}
@keyframes noteIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ── Ánh sáng theo con trỏ trên panel lớn ─────────────────── */
html.motion .glow{position:relative;isolation:isolate;}
html.motion .glow::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(184,145,47,.10),transparent 70%);
  transition:opacity .3s;
}
html.motion .glow:hover::after{opacity:1;}

/* Người dùng tắt hiệu ứng: hiện đủ, đứng yên */
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger] > *,.ch{opacity:1 !important;transform:none !important;}
}