/* ============================================================
   Sa Mộc Miên — Drawing to Laser
   Design tokens (Brand 2026: Dark Walnut / Chocolate Brown / Soft Apricot)
   Font: "Be Vietnam Pro" (UI/body — thiết kế riêng cho chữ Việt, dấu rõ ràng)
         "Lora" (tiêu đề — serif ấm, italic tự nhiên, hỗ trợ đầy đủ dấu tiếng Việt)
   Bảng màu đã kiểm tra độ tương phản WCAG AA (>= 4.5:1) cho mọi cặp chữ/nền.
   ============================================================ */
:root{
  --ink:#2b1a0d;       /* chữ chính — 15.9:1 trên nền paper */
  --paper:#fdf5ea;     /* nền chính */
  --cream:#fffaf3;     /* nền thẻ/panel */
  --apricot:#ffe2c0;   /* nền nhấn (header, badge) */
  --rust:#8a3f10;      /* accent / nút chính — dùng được cho cả chữ và nền nút */
  --sage:#654733;      /* chữ phụ ấm — dùng cho trạng thái, ghi chú nhỏ */
  --line:#d9c2a3;       /* viền */
  --muted:#5c4a3a;      /* chữ phụ — 7.8:1 trên nền paper, đủ rõ để đọc lâu */
  --font-ui:"Be Vietnam Pro","Trebuchet MS",Tahoma,Arial,sans-serif;
  --font-display:"Lora",Georgia,"Times New Roman",serif;
  --shadow-soft:0 8px 20px rgba(43,26,13,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--rust)}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px;border-radius:4px}
::selection{background:var(--apricot);color:var(--ink)}

/* ---------- Header ---------- */
body>header{height:94px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--apricot)}
.brand{border:0;background:none;display:flex;align-items:center;gap:12px}
.brand img{width:166px;height:76px;object-fit:contain}
nav{display:flex;gap:20px;align-items:center}
nav span{font-size:12px;font-weight:600;color:var(--sage)}
nav button,.actions>button,.dashhead button,.pin button:not(.primary){border:1px solid var(--line);background:#ffffffb3;border-radius:99px;padding:10px 18px;font-size:13px;font-weight:600;color:var(--ink)}
nav button:hover,.actions>button:hover{background:#fff}

/* ---------- Welcome ---------- */
.welcome{min-height:calc(100vh - 94px);padding:11vh 8vw;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(255,226,192,.55),rgba(253,245,234,.85)),repeating-linear-gradient(45deg,transparent 0 28px,rgba(138,63,16,.035) 28px 30px)}
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--rust);font-weight:700;text-transform:uppercase}
.welcome h1,.success h1{font:600 clamp(40px,6vw,72px)/1.15 var(--font-display);margin:22px 0;letter-spacing:-.005em}
.welcome h1 em,.success h1 em{font-style:italic;font-weight:600;color:var(--rust)}
.welcome>p:not(.eyebrow){font:17px/1.75 var(--font-ui);color:var(--muted);max-width:520px}
.primary{border:0;border-radius:99px;background:var(--rust);color:#fff;padding:16px 26px;font-size:15px;font-weight:700;box-shadow:var(--shadow-soft)}
.primary:hover{background:#6f330d}
.primary:disabled{opacity:.5;box-shadow:none}
.tips{margin-top:56px;font-size:12px;line-height:1.9;color:var(--muted)}
.stones{position:absolute;right:10vw;top:22%;width:28vw;height:38vw;border-radius:46% 54% 42% 58%;background:linear-gradient(145deg,#c39b75,#654733);box-shadow:inset -18px -20px 36px #3f1900,18px 22px 40px rgba(63,25,0,.25);display:grid;place-items:center}
.stones:before,.stones:after{content:"";position:absolute;inset:12%;border:2px solid rgba(255,226,192,.55);transform:rotate(45deg)}
.stones:after{inset:25%;transform:rotate(0)}
.stones span{z-index:2;color:var(--apricot);font-size:70px}

/* ---------- Flow / steps ---------- */
.flow{max-width:1150px;margin:auto;padding:38px 30px 70px}
.narrow{max-width:780px}
.steps{display:flex;justify-content:center;margin-bottom:50px}
.steps span{display:flex;align-items:center;font-size:11px;font-weight:600;color:#a8998a}
.steps span:not(:last-child):after{content:"";width:60px;height:1px;background:var(--line);margin:0 12px}
.steps i{width:25px;height:25px;border:1px solid;border-radius:50%;display:grid;place-items:center;font-style:normal;margin-right:7px}
.steps .active{color:var(--rust)}
.steps .active i{background:var(--rust);color:white;border-color:var(--rust)}
.flow h2{font:600 clamp(28px,4vw,38px)/1.2 var(--font-display);margin:0;color:var(--ink)}
.flow h2 small{font:italic 500 17px var(--font-display);color:var(--rust);margin-right:6px}
.lead{color:var(--muted);font-size:15px;margin-top:10px}

/* ---------- Product cards ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.card{border:1px solid var(--line);background:var(--cream);border-radius:18px;padding:25px;text-align:left;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.card.selected{border:2px solid var(--rust);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.shape{width:120px;height:180px;margin:0 auto 22px;background:linear-gradient(145deg,#bc906e,#654733);box-shadow:inset -10px -14px 24px #3f1900;color:var(--apricot);display:grid;place-items:center;font:30px var(--font-display)}
.shape.oval{border-radius:50%}
.shape.circle{height:140px;width:140px;border-radius:50%;margin-top:20px;margin-bottom:42px}
.shape.square{height:145px;width:145px;border-radius:18px;margin-top:18px;margin-bottom:39px}
.shape.rect{height:175px;border-radius:17px}
.shape.natural{height:175px;border-radius:61% 39% 48% 52%/46% 52% 48% 54%}
.shape.mini{height:118px;width:86px;border-radius:52% 48% 45% 55%;margin-top:32px;margin-bottom:43px;position:relative}
.shape.mini:before{content:"";position:absolute;top:8px;width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px #654733}
.card h3{font:700 22px var(--font-ui);margin:0;color:var(--ink)}
.card p,.card small{color:var(--muted);display:block;margin:8px 0;font-size:13px}
.card em{display:inline-block;margin-top:12px;padding:6px 10px;border-radius:99px;background:var(--apricot);color:var(--rust);font-size:10px;font-style:normal;font-weight:700;letter-spacing:.06em}
.actions{display:flex;justify-content:space-between;margin-top:35px}

/* ---------- Info form ---------- */
.form{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:30px;margin-top:30px;display:grid;gap:24px}
.form label{font-size:13px;font-weight:700;color:var(--ink)}
.form input,.form textarea{width:100%;display:block;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 2px;font-size:17px;color:var(--ink)}
.form input:focus-visible,.form textarea:focus-visible{outline:0;border-bottom-color:var(--rust)}

/* ---------- Studio / drawing workspace ---------- */
.studiohead{height:75px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--apricot)}
.studiohead>b{font-weight:700;font-size:16px}
.studiohead>b small{display:block;color:var(--sage);font-size:11px;margin-top:4px;font-weight:500}
.workspace{height:calc(100vh - 169px);display:grid;grid-template-columns:90px 1fr 220px}
.workspace>aside{background:var(--apricot);border-right:1px solid var(--line);padding:18px 10px}
.workspace aside button{width:100%;border:0;background:none;border-radius:10px;padding:12px;font-size:24px;color:var(--ink)}
.workspace aside button small{display:block;font-size:10px;margin-top:2px;font-weight:600}
.workspace aside button.active{background:#fff;color:var(--rust)}
.canvas{background:#ded4c2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.canvas>p{font-size:11px;letter-spacing:.14em;color:var(--sage);font-weight:600;text-align:center;padding:0 20px}
#board{height:min(68vh,600px);max-width:65vw;background:#fffaf3;box-shadow:0 18px 45px rgba(60,50,38,.2);touch-action:none}
#board.square{border-radius:15px}
#board.natural{border-radius:56% 44% 47% 53%}
#board.mini{border-radius:50%;max-height:58vh}
#board rect{fill:none;stroke:#b18a55;stroke-width:.25;stroke-dasharray:1 1}
#board path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.canvas>small{color:var(--sage);margin-top:10px;font-size:12px;font-weight:600}
.widths{background:var(--apricot);border-left:1px solid var(--line);padding:25px 18px}
.widths h3{font:600 18px var(--font-display);margin:0 0 14px}
.widths button{width:100%;display:grid;grid-template-columns:35px 1fr auto;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;padding:12px;margin-bottom:8px;font-size:13px}
.widths button>span{width:25px;background:var(--ink);border-radius:2px}
.widths button.active{border-color:var(--rust);background:#f8eee8}
.widths button small{color:var(--muted);font-weight:500}
.workshop-note{margin-top:25px;padding:15px;border:1px solid var(--line);background:#fff5e8;border-radius:10px}
.workshop-note b{font-size:10px;letter-spacing:.14em;color:var(--rust);font-weight:700}
.workshop-note p{font-size:13px;line-height:1.6;color:var(--muted);margin:6px 0 0}

/* ---------- Preview ---------- */
.preview{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;margin-top:30px}
.mock,.summary{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:30px}
.mock{min-height:480px;display:grid;place-items:center}
.mockstone{width:240px;height:370px;border-radius:50%;background:linear-gradient(145deg,#ddd1ba,#a99b83);box-shadow:inset -14px -18px 35px #94866f,15px 20px 35px rgba(200,188,170,.6);padding:24px}
.mockstone.circle{width:280px;height:280px}
.mockstone.square{width:260px;height:260px;border-radius:34px}
.mockstone.rect{width:230px;height:340px;border-radius:26px}
.mockstone.natural{width:250px;height:340px;border-radius:61% 39% 48% 52%/46% 52% 48% 54%}
.mockstone.mini{width:150px;height:200px;border-radius:52% 48% 45% 55%}
.mockstone svg,.design svg{width:100%;height:100%}
.summary h3{font:600 22px var(--font-display);margin:0 0 10px}
.summary dl div,.detail dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:13px;color:var(--muted)}
.summary dd,.detail dd{margin:0;font-weight:700;color:var(--ink)}
.check{display:flex;gap:9px;margin:24px 0;font:14px/1.6 var(--font-ui);color:var(--muted)}
.wide{width:100%}
#error,.error{color:var(--rust);font-size:13px;font-weight:600}

/* ---------- Success ---------- */
.success{min-height:calc(100vh - 94px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.success>i{width:60px;height:60px;border:1px solid var(--rust);border-radius:50%;display:grid;place-items:center;color:var(--rust);font-size:25px}
.success h1{font-size:clamp(34px,5vw,52px)}
.success p{color:var(--muted);font-size:16px;max-width:460px}

/* ---------- Staff PIN ---------- */
.pin{min-height:calc(100vh - 94px);display:grid;place-items:center}
.pin>div{width:min(400px,90vw);background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:35px;text-align:center}
.pin>div>b{display:block;font-size:12px;letter-spacing:.15em;color:var(--rust);font-weight:700;text-transform:uppercase}
.pin h1{font:600 28px var(--font-display);margin:12px 0}
.pin p{color:var(--muted);font-size:14px}
.pin input{width:100%;border:1px solid var(--line);border-radius:10px;padding:15px 48px 15px 15px;text-align:center;font-size:22px;background:#fff}
.pin-field{position:relative;margin:15px 0}
.pin-field input{margin:0}
.pin-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none!important;background:transparent!important;padding:6px!important;font-size:18px!important;line-height:1;cursor:pointer;color:var(--muted)!important}
.pin button{margin-top:10px}

/* ---------- Language switch ---------- */
.lang-switch{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;gap:2px;background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:4px;box-shadow:0 8px 24px rgba(43,26,13,.16)}
.lang-switch button{border:none;background:transparent;border-radius:99px;padding:7px 15px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);cursor:pointer}
.lang-switch button.active{background:var(--rust);color:#fff}
@media (max-width:600px){.lang-switch{right:12px;bottom:12px}.lang-switch button{padding:6px 12px;font-size:11px}}

/* ---------- Dashboard ---------- */
.dashboard{max-width:1200px;margin:auto;padding:40px}
.dashhead{display:flex;justify-content:space-between;align-items:flex-start}
.dashhead h1{font:600 clamp(28px,4vw,38px) var(--font-display);margin:6px 0 25px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats>div{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:20px}
.stats b{font:700 32px var(--font-ui);display:block;color:var(--rust)}
.stats span{font-size:12px;color:var(--muted);font-weight:600}
.orders{margin-top:20px;background:var(--cream);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.orders>button{width:100%;display:grid;grid-template-columns:1fr 180px 130px 20px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:18px 22px}
.orders>button:hover{background:#f4ead9}
.orders span b{font-size:14px}
.orders span small{display:block;color:var(--muted);margin-top:4px;font-size:13px}
.orders time{font-size:12px;color:var(--muted)}
.orders em{font-size:11px;background:var(--apricot);color:var(--sage);padding:7px 11px;border-radius:99px;font-style:normal;font-weight:700;width:max-content}
.empty{text-align:center;padding:80px}
.empty h2{font:600 24px var(--font-display)}
.empty p{color:var(--muted)}

/* ---------- Order detail drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(43,26,13,.5);display:flex;justify-content:flex-end}
.detail{width:min(440px,95vw);height:100%;background:var(--paper);padding:36px;overflow:auto}
.detail>#close{float:right;border:0;background:none;font-size:25px;color:var(--ink)}
.detail h2{font:600 26px var(--font-display);clear:both}
.design{height:300px;background:#ddd4c4;border-radius:15px;padding:25px}
.statusbuttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.statusbuttons button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:12px;font-weight:600;font-size:13px}

/* ---------- Responsive ---------- */
@media(max-width:800px){
  body>header{height:82px}
  .brand img{width:135px;height:68px}
  nav span{display:none}
  .welcome{padding:70px 25px}
  .stones{opacity:.15;width:70vw;height:80vw;right:-25vw}
  .products,.preview{grid-template-columns:1fr}
  .steps span{font-size:0}
  .steps span:not(:last-child):after{width:30px}
  .workspace{grid-template-columns:65px 1fr;height:calc(100vh - 157px)}
  .widths{display:none}
  #board{max-width:78vw;max-height:65vh}
  .stats{grid-template-columns:1fr 1fr}
  .orders>button{grid-template-columns:1fr 80px}
  .orders time,.orders em{display:none}
}