body{margin:0;font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;background:#f3f4f7;color:#0b1424}
input,button,select,textarea,table,svg text{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
a{text-decoration:none}
button{font-family:inherit}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:#0b1424}
.login form{width:100%;max-width:380px;background:#fff;border-radius:14px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.login .logo{display:flex;justify-content:center;background:#0b1424;border-radius:10px;padding:14px}
.login .logo img{width:100%;max-width:210px;height:auto}
.login h1{margin:4px 0 0;font-size:22px}
.login label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#5b6678}
.login input{padding:11px 12px;border:1px solid #e1e5ec;border-radius:8px;font:inherit;font-size:15px;color:#0b1424}
.login input:focus{outline:2px solid #d46a45;outline-offset:-1px}
.login button{padding:12px 16px;border:0;border-radius:8px;background:#d46a45;color:#0b1424;font:inherit;font-weight:600;font-size:15px;cursor:pointer;min-height:44px}
.login button:disabled{opacity:.6;cursor:wait}
.login .err{font-size:13px;color:#9b2626;background:#f9e2e0;border-radius:8px;padding:10px 12px}
.boot{min-height:100vh;display:flex;align-items:center;justify-content:center;color:#5b6678}
.toastbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0b1424;color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;z-index:50;max-width:90vw}

#topbar{position:fixed;top:0;left:0;height:3px;width:0;background:#d46a45;z-index:100;opacity:0;pointer-events:none}
#topbar.on{opacity:1;width:85%;transition:width 4s cubic-bezier(.1,.7,.2,1),opacity .1s}
.page-in{animation:pagein .2s ease-out both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
a,button,input,select,textarea,tr,[onclick]{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}
button:active{transform:scale(.98)}
.toastbar{animation:toastin .2s ease-out both}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#pwm{position:fixed;inset:0;background:rgba(11,20,36,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:80;animation:pagein .18s ease-out both}
#pwm .pwbox{width:100%;max-width:380px;background:#fff;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
#pwm h2{margin:0;font-size:18px}
#pwm label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#5b6678}
#pwm input{padding:10px 12px;border:1px solid #e1e5ec;border-radius:8px;font:inherit;font-size:15px;color:#0b1424}
#pwm input:focus{outline:2px solid #d46a45;outline-offset:-1px}
#pwm .err{font-size:13px;color:#9b2626;background:#f9e2e0;border-radius:8px;padding:10px 12px}
#pwm .row{display:flex;gap:10px;justify-content:flex-end}
#pwm button{padding:10px 16px;border:0;border-radius:8px;background:#d46a45;color:#0b1424;font:inherit;font-weight:600;cursor:pointer;min-height:44px}
#pwm button.ghost{background:#eceff4;color:#3b4558}
#pwm button:disabled{opacity:.6;cursor:wait}

/*tts-resp*/
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-thumb{background:#cdd3de;border-radius:4px}
@media (max-width:820px){
.tts-side{flex:1 1 100% !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;padding:8px 12px !important;gap:6px !important;position:sticky;top:0;z-index:30}
.tts-side .tts-logo{padding:0 !important;flex:0 0 auto;margin-right:6px}
.tts-side .tts-logo img{width:92px !important}
.tts-side a{padding:0 !important;width:40px;height:40px;flex:0 0 40px !important;justify-content:center !important;gap:0 !important}
.tts-side a span{display:none !important}
.tts-side .tts-user{margin:0 0 0 auto !important;padding:0 !important;border-top:0 !important;gap:4px !important}
.tts-side .tts-user>span{display:none !important}
.tts-side .tts-ver{display:none !important}
.tts-main{padding:16px 14px 28px !important;gap:14px !important}
.tts-main h1{font-size:24px !important}
.tts-row{flex-wrap:wrap !important}
.tts-banner{flex:1 1 100% !important}
.tts-sum{display:none !important}
.tts-pop{position:fixed !important;left:8px !important;right:8px !important;top:64px !important;width:auto !important;max-height:calc(100vh - 80px);overflow:auto}
.tts-pre{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px !important}
.tts-pre button{height:30px !important;padding:0 4px !important;font-size:12px !important;min-width:0}
.tts-pop{left:50% !important;right:auto !important;transform:translateX(-50%);width:min(340px,calc(100vw - 16px)) !important;padding:10px 12px !important;gap:8px !important}
.tts-mon{flex:1 1 100% !important}
.tts-mon[data-mk="0"]{display:none !important}
.tts-mon button[aria-label]{visibility:visible !important;font-size:16px !important;padding:2px 6px !important}
.tts-mon button:not([aria-label]){height:34px !important;font-size:13.5px !important}
.tts-calfoot{padding-top:8px !important}
.tts-calfoot button{flex:1 1 auto;height:38px !important}
.tts-dt{flex-wrap:wrap !important}
.tts-dt>select,.tts-dt>button:first-child{flex:1 1 100% !important;max-width:none !important;border-right:0 !important;border-bottom:1px solid #e1e5ec !important;justify-content:space-between}
.tts-segs{margin-left:0 !important;flex:1 1 100% !important;flex-wrap:wrap !important;justify-content:flex-start !important;white-space:normal !important}
.tts-root{align-content:flex-start !important;min-height:100vh !important}
.tts-segs *{white-space:nowrap}
.tts-segs>div{flex-wrap:nowrap !important;flex:1 1 100%;min-width:0}
.tts-segs>div button{flex:1 1 auto;padding:0 4px !important;font-size:12.5px !important;min-width:0;height:32px !important}
.tts-kstrip{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) !important}
.tts-kstrip>div{padding:10px 10px !important;gap:0 !important;min-width:0;overflow:hidden;container-type:inline-size}
.tts-kstrip>div:first-child{padding:10px 10px !important;min-width:max-content !important;overflow:visible !important;container-type:normal !important}
.tts-kstrip .tts-kicon{display:none !important}
.tts-kfit{font-size:var(--fit,18px) !important;white-space:nowrap;line-height:1.3 !important}
.tts-knum{white-space:nowrap}
.tts-klab{font-size:12px !important;white-space:nowrap}
.tts-ktiles{padding:10px 14px 14px !important;gap:8px !important;grid-template-rows:none !important}
.tts-ktiles>div{padding:10px 12px !important;gap:6px !important;min-width:0;container-type:inline-size}
.tts-ktiles .tts-ticon{display:none !important}
.tts-tlab{font-size:clamp(10px,9cqi,13px) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tts-tnum{font-size:clamp(14px,16cqi,24px) !important;white-space:nowrap}
.tts-tnum span{font-size:0.6em !important}
.tts-cod-k td:nth-child(2){grid-column:1 / -1}
.tts-act{flex-wrap:wrap !important;gap:2px 16px !important}
.tts-act>*{white-space:nowrap}
.tts-wrap{overflow:visible !important;max-height:none !important}
.tts-tbl{min-width:0 !important;width:100% !important;table-layout:auto !important}
.tts-tbl,.tts-tbl tbody,.tts-tbl tr,.tts-tbl td{display:block}
.tts-tbl tr:first-child{display:none !important}
.tts-tbl tr{display:grid !important;grid-template-columns:1fr 1fr;gap:8px 14px;padding:12px 14px;margin:0 0 10px;background:#f7f8fb !important;border:1px solid #e1e5ec;border-radius:12px}
.tts-tbl td{display:block !important;border:0 !important;padding:0 !important;text-align:left !important;white-space:normal !important;min-width:0;width:auto !important;font-size:14px;color:#0b1424}
.tts-tbl td::before{display:block;margin-bottom:2px;content:attr(data-label);font-size:11.5px;font-weight:500;color:#7a8599}
.tts-tbl td:first-child{grid-column:1 / -1;font-weight:600;font-size:15px;padding-bottom:8px !important;border-bottom:1px dashed #d5dbe5 !important}
.tts-tbl td:first-child::before{content:none}
.tts-tbl td:last-child{grid-column:1 / -1;display:flex !important;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding-top:8px !important;border-top:1px dashed #d5dbe5 !important}
.tts-tabs:not([data-more="1"]) a[data-tab]:not([data-tab="0"]):not([data-tab="1"]):not([data-tab="2"]):not([data-tab="4"]):not([data-tab="9"]):not([data-act="1"]){display:none !important}
.tts-don-k tr{grid-template-columns:minmax(0,1fr) auto !important;cursor:pointer;align-items:center}
.tts-don-k td{display:none !important}
.tts-don-k td:first-child{display:flex !important;align-items:center;grid-column:1 !important;grid-row:1;border-bottom:0 !important;padding-bottom:0 !important}
.tts-don-k td:first-child::after{content:"";flex:0 0 auto;width:7px;height:7px;border-right:2px solid #7a8599;border-bottom:2px solid #7a8599;transform:rotate(45deg);margin:-4px 0 0 10px}
.tts-don-k td:last-child{grid-column:2 !important;grid-row:1;border-top:0 !important;padding-top:0 !important;justify-content:flex-end}
.tts-don-k td:last-child::before{content:none !important}
.tts-don-k tr[data-open="1"]{grid-template-columns:1fr 1fr !important}
.tts-don-k tr[data-open="1"] td{display:block !important}
.tts-don-k tr[data-open="1"] td:first-child{display:flex !important}
.tts-don-k tr[data-open="1"] td:last-child{display:flex !important}
.tts-don-k tr[data-open="1"] td:first-child::after{transform:rotate(-135deg);margin-top:4px}
.tts-don-k tr[data-open="1"] td[data-first="1"]{grid-column:1 / -1;padding-top:10px !important;border-top:1px dashed #d5dbe5 !important}
.tts-don-k tr[data-open="1"] td[data-wide="1"]{grid-column:1 / -1}
.tts-don-a tr{grid-template-columns:minmax(0,1fr) auto !important;cursor:pointer;align-items:center}
.tts-don-a td{display:none !important}
.tts-don-a td:nth-child(2){display:flex !important;align-items:center;grid-column:1 !important;grid-row:1;font-weight:600;font-size:15px}
.tts-don-a td:nth-child(2)::before{content:none !important}
.tts-don-a td:nth-child(2)::after{content:"";flex:0 0 auto;width:7px;height:7px;border-right:2px solid #7a8599;border-bottom:2px solid #7a8599;transform:rotate(45deg);margin:-4px 0 0 10px}
.tts-don-a td:last-child{grid-column:2 !important;grid-row:1;border-top:0 !important;padding-top:0 !important;justify-content:flex-end}
.tts-don-a td:last-child::before{content:none !important}
.tts-don-a tr[data-open="1"]{grid-template-columns:1fr 1fr !important}
.tts-don-a tr[data-open="1"] td{display:block !important}
.tts-don-a tr[data-open="1"] td:nth-child(2),.tts-don-a tr[data-open="1"] td:last-child{display:flex !important}
.tts-don-a tr[data-open="1"] td:nth-child(2)::after{transform:rotate(-135deg);margin-top:4px}
.tts-don-a tr[data-open="1"] td:first-child{grid-column:1 / -1;grid-row:2;font-size:14px;font-weight:400;border-bottom:0 !important;padding-bottom:0 !important;padding-top:10px !important;border-top:1px dashed #d5dbe5 !important}
.tts-don-a tr[data-open="1"] td:first-child::before{content:attr(data-label)}
.tts-don-a tr[data-open="1"] td:nth-child(3),.tts-don-a tr[data-open="1"] td:nth-child(10),.tts-don-a tr[data-open="1"] td:nth-child(11),.tts-don-a tr[data-open="1"] td:nth-child(12){grid-column:1 / -1}
}
.tts-only-m{display:none}
@media (max-width:820px){
.tts-only-m{display:inline}
.tts-only-d{display:none !important}
.tts-cust tr{grid-template-columns:minmax(0,1fr) auto !important;align-items:center;gap:10px !important;padding:12px 14px !important}
.tts-cust td{display:none !important}
.tts-cust td:nth-child(3),.tts-cust td:last-child,.tts-cust tr.tts-tot td:first-child{display:block !important;grid-column:auto !important;border:0 !important;padding:0 !important}
.tts-cust tr.tts-tot td:nth-child(3){display:none !important}
.tts-cust td::before{content:none !important}
.tts-cust td:nth-child(3),.tts-cust tr.tts-tot td:first-child{font-weight:600;font-size:15px;min-width:0}
.tts-cust td:last-child{font-weight:700;font-size:15px;color:#b4532f;text-align:right !important;white-space:nowrap !important}
.tts-chips{flex-wrap:nowrap !important;gap:6px !important;width:100%}
.tts-chips>*{flex:1 1 auto;padding:0 6px !important;min-width:0;white-space:nowrap}
.tts-chips-wrap{flex:1 1 100% !important;min-width:0 !important}
.tts-cust{flex:1 1 100% !important}
.tts-cust tr.tts-tot{display:none !important}
}
/*tts-resp-end*/
@media (max-width:820px){html,body{overflow-x:hidden}.boot{min-height:60vh}}
/* Bảng đơn: ghim cột, kéo độ rộng; menu trái thu gọn */
@media (min-width:821px){.tts-stl{position:sticky;left:0;z-index:2;background:#fff;box-shadow:inset -1px 0 0 #eceff4}.tts-str{position:sticky;right:0;z-index:2;background:#fff;box-shadow:inset 1px 0 0 #eceff4}th.tts-stl,th.tts-str{z-index:4}}
.tts-rz:hover,.tts-rz:active{background:linear-gradient(90deg,transparent 4px,#e8622c 4px,#e8622c 6px,transparent 6px)}@media (max-width:820px){.tts-rz{display:none}}
@media (min-width:821px){.tts-side{transition:flex-basis .2s ease,padding .2s ease}.tts-sidebtn{position:fixed;top:50%;left:248px;z-index:40;width:18px;height:64px;margin-top:-32px;padding:0 2px 0 0;border:0;border-radius:0 12px 12px 0;background:#0b1424;color:#d46a45;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:3px 0 10px rgba(11,20,36,.18);transition:left .2s ease}.tts-sidebtn::before,.tts-sidebtn::after{content:"";position:absolute;left:0;width:10px;height:20px;background:transparent;pointer-events:none}.tts-sidebtn::before{top:-20px;border-bottom-left-radius:10px;box-shadow:0 10px 0 0 #0b1424}.tts-sidebtn::after{bottom:-20px;border-top-left-radius:10px;box-shadow:0 -10px 0 0 #0b1424}.tts-sidebtn svg{transition:transform .25s ease}.tts-side[data-mini="1"] .tts-sidebtn{left:72px}.tts-side[data-mini="1"] .tts-sidebtn svg{transform:rotate(180deg)}.tts-logo-full,.tts-logo-mini{height:82px;box-sizing:border-box}.tts-side[data-mini="1"]{flex-basis:72px !important;padding:20px 10px !important}.tts-side[data-mini="1"] .tts-logo{padding:0 0 38px !important;align-items:center}.tts-side[data-mini="1"] .tts-logo-full{display:none !important}.tts-side[data-mini="1"] .tts-logo-mini{display:flex !important}.tts-side[data-mini="1"] a{justify-content:center !important;padding:10px 0 !important;gap:0 !important}.tts-side[data-mini="1"] a span{display:none !important}.tts-side[data-mini="1"] .tts-navh{font-size:0 !important;padding:0 !important;height:1px;background:#24324d;margin:10px 8px !important}.tts-side[data-mini="1"] .tts-ver{display:none !important}.tts-side[data-mini="1"] .tts-user{margin-top:auto !important;flex-direction:column !important;padding:12px 0 0 !important;gap:6px !important}.tts-side[data-mini="1"] .tts-user>span{display:none !important}}
@media (max-width:820px){.tts-sidebtn,.tts-logo-full{display:none !important}.tts-logo-mini{display:flex !important;height:auto !important;padding:0 !important}.tts-side .tts-logo .tts-logo-mini img{width:40px !important}}
/*tts-fx*/
@keyframes fxfade{from{opacity:0}to{opacity:1}}
@keyframes fxpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fxdrop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fxbar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fx-ov{animation:fxfade .18s ease-out both}
.fx-pop{animation:fxpop .26s cubic-bezier(.2,.8,.2,1) both}
.fx-drop{animation:fxdrop .18s cubic-bezier(.2,.8,.2,1) both;transform-origin:top center}
.fx-bar{transform-origin:bottom;animation:fxbar .7s cubic-bezier(.2,.8,.2,1) both}
.tts-main button,.tts-main a,.tts-side a,.tts-main input,.tts-main select{transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease}
.tts-side a:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.07)}
@media (min-width:821px){
.tts-tbl tr:not(:first-child) td{transition:background-color .14s ease}
.tts-tbl tr:not(:first-child):hover td{background-color:#fbf6f2}
.tts-tbl tr:not(:first-child):hover td.tts-stl,.tts-tbl tr:not(:first-child):hover td.tts-str{background-color:#fbf6f2}
}
@media (prefers-reduced-motion:reduce){.fx-ov,.fx-pop,.fx-drop,.fx-bar{animation:none!important}}
/*tts-fx-end*/
/*tts-shell*/
@media (min-width:821px){.tts-root{height:100vh !important;min-height:0 !important;flex-wrap:nowrap !important;overflow:hidden !important}.tts-side{height:100vh;overflow-y:auto;overflow-x:hidden;flex-shrink:0 !important}.tts-main{height:100vh !important;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}}
/*tts-shell-end*/

.tts-stcard{transition:border-color .15s ease,box-shadow .15s ease}.tts-stcard:hover{border-color:#d46a45 !important;box-shadow:0 6px 16px rgba(11,20,36,.07)}

.tts-twbar{transition:width .6s cubic-bezier(.2,.7,.2,1)}.tts-main .fx-bar,.tts-twh{transition:height .55s cubic-bezier(.2,.7,.2,1),background-color .3s ease}.tts-seg{transition:background-color .2s ease,color .2s ease}
