:root{
  --nen:#faf7f4; --the:#ffffff; --vien:#eadfd5; --vien2:#f0e6dc;
  --muc:#0b0b0b; --muc2:#52514e; --mo:#898781; --luoi:#e1e0d9;
  --brand:#c85a12;
  --tot:#0ca30c; --tin:#2a78d6; --canh:#fab219; --nang:#d03b3b;
  --p1:#d99a66; --p2:#d1783c; --p3:#bc5f18; --p4:#a24e0f;
  --p5:#87400c; --p6:#6c3208; --p7:#512505;
  --ray-tot:#dcf2dc; --ray-tin:#dbe9fa; --ray-canh:#fdf0d3;
  --ray-nang:#f9e1e1; --ray-th:#f2e6da;
  --bong:0 1px 2px rgba(120,80,40,.05),0 6px 18px -12px rgba(120,80,40,.16);
  --bong2:0 1px 2px rgba(120,80,40,.06),0 12px 26px -14px rgba(120,80,40,.26);
  --cao:13px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--nen);color:var(--muc);
 font:14px/1.45 system-ui,'Segoe UI',Arial,sans-serif;
 background-image:radial-gradient(900px 380px at 12% -8%,#fdeee0 0%,transparent 60%),
                  radial-gradient(760px 340px at 88% -6%,#e8f0fb 0%,transparent 62%);
 background-attachment:fixed}
table{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- HEADER + NAV */
header{background:var(--the);border-bottom:1px solid var(--vien);
 padding:11px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 position:sticky;top:0;z-index:40;height:auto;min-height:58px;
 box-shadow:0 1px 0 rgba(120,80,40,.05)}
header:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
 background:linear-gradient(90deg,var(--p2),var(--brand) 45%,var(--p5))}
header .brand{font-weight:700;font-size:16.5px;color:var(--brand);
 white-space:nowrap;letter-spacing:-.2px}
nav{margin-left:auto;display:flex;gap:3px;align-items:center;flex-wrap:wrap}
nav a{padding:7px 13px;border-radius:9px;text-decoration:none;font-size:13.5px;
 font-weight:600;color:var(--muc2);white-space:nowrap;
 transition:background .15s,color .15s}
nav a:hover{background:#f6efe8;color:var(--muc)}
nav a.active{background:linear-gradient(135deg,var(--p2),var(--brand));color:#fff;
 box-shadow:0 2px 7px rgba(200,90,18,.28)}
nav a.active:hover{color:#fff}

/* menu tron - gom Tai khoan / Nhat ky / Doi mat khau / Thoat */
.tron{position:relative;margin-left:6px}
.tron>button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
 background:linear-gradient(135deg,var(--p3),var(--p5));color:#fff;
 font:700 13px/1 system-ui,'Segoe UI',Arial,sans-serif;letter-spacing:.3px;
 display:flex;align-items:center;justify-content:center;
 box-shadow:0 2px 8px rgba(120,60,20,.3);transition:transform .15s,box-shadow .15s}
.tron>button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(120,60,20,.38)}
.tron>button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tron .hop{position:absolute;right:0;top:calc(100% + 9px);min-width:206px;
 background:var(--the);border:1px solid var(--vien);border-radius:12px;
 box-shadow:0 12px 34px -10px rgba(90,60,30,.32);padding:6px;display:none;z-index:60}
.tron.mo .hop{display:block}
.tron .hop .ai{padding:9px 11px 10px;border-bottom:1px solid var(--vien2);
 margin-bottom:5px}
.tron .hop .ai b{display:block;font-size:13.5px;color:var(--muc)}
.tron .hop .ai span{font-size:11.5px;color:var(--mo)}
.tron .hop a{display:block;padding:9px 11px;border-radius:8px;font-size:13.5px;
 font-weight:600;color:var(--muc2);text-decoration:none;white-space:nowrap}
.tron .hop a:hover{background:#f6efe8;color:var(--muc)}
.tron .hop a.thoat{color:var(--nang)}
.tron .hop a.thoat:hover{background:#fdeceb}
.tron .hop hr{border:0;border-top:1px solid var(--vien2);margin:5px 0}
nav .me{display:none}          /* ten nguoi dung da nam trong menu tron */

/* ---------------------------------------------------------- KHUNG TRANG */
.wrap,.boc,.container{max-width:1240px;margin:18px auto;padding:0 18px}

.the,.card,.khung,.box{background:var(--the);border:1px solid var(--vien);
 border-radius:var(--cao);padding:16px 17px;box-shadow:var(--bong);
 transition:box-shadow .18s}
.the:hover,.card:hover,.khung:hover{box-shadow:var(--bong2)}

h1{font-size:20px;font-weight:700;letter-spacing:-.3px;margin:0 0 3px}
h2{font-size:16px;font-weight:700;margin:0 0 3px}
h3{font-size:14px;font-weight:600;margin:0 0 3px;color:var(--muc)}
.sub,.mota{font-size:11.5px;color:var(--mo);margin:0 0 13px}
.nho{font-size:11.5px;color:var(--mo)}
.dam{font-weight:700}

/* ---------------------------------------------------------- NUT */
button,.btn,input[type=submit]{background:linear-gradient(135deg,var(--p2),var(--brand));
 color:#fff;border:0;padding:9px 16px;border-radius:9px;font-size:13.5px;
 font-weight:600;cursor:pointer;font-family:inherit;
 box-shadow:0 2px 7px rgba(200,90,18,.24);transition:transform .14s,box-shadow .14s,opacity .14s}
button:hover,.btn:hover,input[type=submit]:hover{transform:translateY(-1px);
 box-shadow:0 5px 14px rgba(200,90,18,.32)}
button:active,.btn:active{transform:translateY(0)}
button:disabled,.btn:disabled{background:#cfc6bd;box-shadow:none;cursor:not-allowed;
 transform:none;opacity:.85}
.btn.phu,button.phu{background:var(--the);color:var(--brand);
 border:1px solid var(--vien);box-shadow:none}
.btn.phu:hover,button.phu:hover{background:#fdf6f0;box-shadow:var(--bong)}

/* ---------------------------------------------------------- FORM */
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=email],select,textarea{
 padding:8px 11px;border:1px solid #ddd2c7;border-radius:9px;
 font:inherit;font-size:13.5px;background:var(--the);color:var(--muc);
 transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);
 box-shadow:0 0 0 3px rgba(200,90,18,.13)}
label{font-size:12px;color:var(--muc2);font-weight:600}

/* ---------------------------------------------------------- BANG */
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 9px;border-bottom:1px solid var(--luoi);text-align:left;
 font-size:10.5px;color:var(--mo);font-weight:700;text-transform:uppercase;
 letter-spacing:.4px;background:transparent}
td{padding:8px 9px;border-bottom:1px solid #f4efea;vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:nth-child(even) td{background:#fcfaf8}
tbody tr:hover td,tbody tr:nth-child(even):hover td{background:#fdf7f1}

/* ---------------------------------------------------------- CHIP / DAI */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
 color:var(--muc2);white-space:nowrap;padding:3px 9px 3px 7px;border-radius:20px;
 background:var(--nenchip,#f6f2ee);font-weight:600}
.chip i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dai,.msg{padding:9px 14px;border-radius:9px;font-size:12.5px;margin-bottom:14px;
 line-height:1.6}
.dai.vang,.msg.canh{background:#fffaef;border:1px solid #f3e3bb;
 border-left:4px solid var(--canh);color:#7a5c00}
.dai.do,.msg.err{background:#fdf0ef;border:1px solid #f4cbc9;
 border-left:4px solid var(--nang);color:#98211f}
.msg.ok{background:#f1faf1;border:1px solid #cfe8cf;
 border-left:4px solid var(--tot);color:#1c6b1c}

@media(max-width:700px){
  header{padding:10px 14px}
  header .brand{font-size:14.5px}
  nav a{padding:6px 10px;font-size:12.5px}
  .wrap,.boc,.container{padding:0 14px;margin:14px auto}
}