/* =====================================================================
   CRM Đồng hồ & Kính mắt — bảng màu lấy từ mặt số đồng hồ:
   xanh mặt số, kim đồng thau, vỏ thép chải xước, mặt lume ngà.
   ===================================================================== */

:root{
  --muc:      #12161C;   /* mực in  */
  --muc-2:    #56606E;   /* chữ phụ */
  --muc-3:    #8B95A3;   /* chữ mờ  */
  --nen:      #EDEFF1;   /* nền thép chải */
  --the:      #FFFFFF;   /* mặt thẻ */
  --vien:     #DCE0E5;
  --vien-2:   #EBEEF1;
  --chinh:    #16324F;   /* xanh mặt số */
  --chinh-2:  #22456B;
  --dong:     #A8763E;   /* kim đồng thau */
  --dong-mo:  #F4EADD;
  --xanh:     #2E6F4E;
  --xanh-mo:  #E4F0EA;
  --do:       #B23A32;
  --do-mo:    #F8E7E5;
  --vang:     #9A6B10;
  --vang-mo:  #FBF0D8;
  --bong:     0 1px 2px rgba(18,22,28,.06), 0 8px 24px -12px rgba(18,22,28,.18);
  --r:        10px;
  --sidebar:  248px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--muc);
  background:var(--nen);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0 0 .5rem; font-weight:650; letter-spacing:-.011em; }
h1{ font-size:1.5rem; } h2{ font-size:1.25rem; } h3{ font-size:1.05rem; } h4{ font-size:.95rem; }
a{ color:var(--chinh); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 .75rem; }

/* Số liệu tiền tệ — chữ có chân, chữ số đều cột, gạch chân đồng thau */
.so-tien{
  font-family:'Newsreader', Georgia, serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  letter-spacing:-.01em;
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- Khung trang ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:var(--chinh); color:#C9D4E0;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{
  padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.09);
}
.brand-name{
  font-family:'Newsreader', Georgia, serif;
  font-size:1.1rem; color:#fff; line-height:1.2; display:block;
}
.brand-sub{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dong); }

.nav{ padding:10px 0 24px; flex:1; }
.nav-nhom{
  padding:16px 18px 6px; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(201,212,224,.5);
}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 18px; color:#C9D4E0; font-size:.875rem; position:relative;
}
.nav a:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
/* vạch chỉ giờ trên vành mặt số = mục đang mở */
.nav a.active{ background:rgba(255,255,255,.09); color:#fff; font-weight:600; }
.nav a.active::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; background:var(--dong);
}
.nav-ico{ width:18px; text-align:center; opacity:.85; font-size:1rem; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background:var(--the); border-bottom:1px solid var(--vien);
  padding:0 22px; height:58px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
}
.topbar .tieu-de{ font-weight:650; font-size:1rem; }
.topbar .day{ flex:1; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--nen); border:1px solid var(--vien);
  border-radius:999px; padding:4px 12px; font-size:.8rem; color:var(--muc-2);
}
.noi-dung{ padding:22px; max-width:1500px; width:100%; }

/* ---------- Thẻ ---------- */
.card{
  background:var(--the); border:1px solid var(--vien);
  border-radius:var(--r); box-shadow:var(--bong); margin-bottom:18px;
}
.card-head{
  padding:14px 18px; border-bottom:1px solid var(--vien-2);
  display:flex; align-items:center; gap:12px;
}
.card-head h3{ margin:0; }
.card-head .day{ flex:1; }
.card-body{ padding:18px; }
.card-body.chat{ padding:0; }

/* ---------- Ô số liệu ---------- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.stat{ background:var(--the); border:1px solid var(--vien); border-radius:var(--r); padding:16px 18px; }
.stat-nhan{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muc-3); }
.stat-so{
  font-family:'Newsreader', Georgia, serif; font-size:1.85rem; line-height:1.15;
  font-variant-numeric:tabular-nums; margin-top:6px; color:var(--muc);
}
.stat-chan{
  margin-top:10px; padding-top:8px; border-top:1px solid var(--dong-mo);
  font-size:.78rem; color:var(--muc-2);
}
.stat-chan b{ color:var(--dong); }

/* ---------- Bảng ---------- */
.bang-cuon{ overflow-x:auto; }
table.bang{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.bang th{
  text-align:left; font-weight:600; font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muc-3);
  padding:10px 14px; border-bottom:1px solid var(--vien); white-space:nowrap;
  background:#FAFBFC;
}
table.bang td{ padding:10px 14px; border-bottom:1px solid var(--vien-2); vertical-align:middle; }
table.bang tbody tr:hover{ background:#FAFBFC; }
table.bang tbody tr:last-child td{ border-bottom:0; }
table.bang .phai{ text-align:right; }
table.bang .giua{ text-align:center; }
table.bang tfoot td{
  padding:11px 14px; font-weight:650; border-top:2px solid var(--muc);
  background:#FAFBFC;
}

/* ---------- Nút ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--vien); background:var(--the); color:var(--muc);
  padding:7px 14px; border-radius:8px; font-size:.86rem; font-weight:500;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{ background:var(--nen); text-decoration:none; }
.btn-primary{ background:var(--chinh); border-color:var(--chinh); color:#fff; }
.btn-primary:hover{ background:var(--chinh-2); border-color:var(--chinh-2); }
.btn-dong{ background:var(--dong); border-color:var(--dong); color:#fff; }
.btn-dong:hover{ background:#916431; border-color:#916431; }
.btn-nguy{ background:var(--do); border-color:var(--do); color:#fff; }
.btn-nguy:hover{ background:#9A312A; }
.btn-nho{ padding:4px 10px; font-size:.8rem; border-radius:6px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Nhãn trạng thái ---------- */
.badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.74rem; font-weight:600; line-height:1.6; white-space:nowrap;
}
.badge-secondary{ background:var(--nen);    color:var(--muc-2); }
.badge-success  { background:var(--xanh-mo);color:var(--xanh); }
.badge-warning  { background:var(--vang-mo);color:var(--vang); }
.badge-danger   { background:var(--do-mo);  color:var(--do); }
.badge-info     { background:#E5EDF6;       color:var(--chinh); }
.badge-dark     { background:#E2E5E9;       color:var(--muc); }
.badge-dong     { background:var(--dong-mo);color:var(--dong); }

/* ---------- Biểu mẫu ---------- */
.hang{ display:flex; gap:14px; flex-wrap:wrap; }
.o{ margin-bottom:14px; flex:1; min-width:180px; }
.o label{ display:block; font-size:.78rem; font-weight:600; color:var(--muc-2); margin-bottom:5px; }
.o .goi-y{ font-size:.75rem; color:var(--muc-3); margin-top:4px; }
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=email],input[type=search],select,textarea{
  width:100%; padding:8px 11px; font-size:.88rem; font-family:inherit; color:var(--muc);
  background:var(--the); border:1px solid var(--vien); border-radius:8px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--chinh); box-shadow:0 0 0 3px rgba(22,50,79,.12);
}
input[readonly]{ background:var(--nen); color:var(--muc-2); }
textarea{ min-height:76px; resize:vertical; }
.tien-input{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Thông báo ---------- */
.alert{ padding:11px 15px; border-radius:8px; margin-bottom:16px; font-size:.87rem; border:1px solid; }
.alert-success{ background:var(--xanh-mo); border-color:#C3DFD0; color:var(--xanh); }
.alert-danger { background:var(--do-mo);   border-color:#EFC9C5; color:var(--do); }
.alert-warning{ background:var(--vang-mo); border-color:#E8D5A6; color:var(--vang); }
.alert-info   { background:#E5EDF6;        border-color:#C7D8EA; color:var(--chinh); }

/* ---------- Vặt ---------- */
.text-muted{ color:var(--muc-2); }
.text-mo{ color:var(--muc-3); }
.nho{ font-size:.8rem; }
.phai{ text-align:right; }
.giua{ text-align:center; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.day{ flex:1; }
.flex{ display:flex; align-items:center; gap:10px; }
.flex-cuoi{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.empty-mark{
  font-family:'Newsreader', Georgia, serif; font-size:3rem; color:var(--dong); line-height:1;
}
.trong{ padding:44px 20px; text-align:center; color:var(--muc-2); }

/* ---------- Trang đăng nhập ---------- */
.dang-nhap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1100px 520px at 50% -12%, #22456B 0%, transparent 62%),
    var(--chinh);
  padding:24px;
}
.dn-hop{ width:100%; max-width:390px; }
.dn-the{ background:var(--the); border-radius:14px; padding:30px 28px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); }
.dn-vanh{
  display:flex; justify-content:center; gap:5px; margin-bottom:20px;
}
.dn-vanh i{ width:2px; height:11px; background:var(--dong); opacity:.35; display:block; }
.dn-vanh i:nth-child(3){ height:17px; opacity:1; }
.dn-ten{ font-family:'Newsreader', Georgia, serif; font-size:1.35rem; text-align:center; margin-bottom:3px; }
.dn-phu{ text-align:center; color:var(--muc-3); font-size:.8rem; margin-bottom:22px; }

/* ---------- In phiếu ---------- */
@media print{
  .sidebar,.topbar,.khong-in{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:0; }
  .noi-dung{ padding:0; }
}

@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:-100%; z-index:60; transition:left .2s; }
  .sidebar.mo{ left:0; }
  .nut-menu{ display:inline-flex !important; }
}
.nut-menu{ display:none; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}
:focus-visible{ outline:2px solid var(--dong); outline-offset:2px; }