/* ===== An Hương — tone xanh lá lợt · vàng rất lợt · trắng ===== */
:root{
  --green-050:#F2F8EF;   /* xanh lá rất lợt — nền */
  --green-100:#E4F0DD;   /* xanh lá lợt — khối */
  --green-200:#CBE2C0;   /* viền xanh */
  --green-600:#4E7C4A;   /* xanh lá đậm — nút, nhấn */
  --green-700:#3B6139;   /* chữ đậm */
  --cream:#FDFAE8;       /* vàng rất lợt — ngày chay */
  --cream-edge:#EFE6B8;
  --white:#FFFFFF;
  --ink:#2F3E2C;
  --muted:#7A8A74;
  --red:#C0563F;
  --amber:#B58A2C;
  --radius:14px;
  --shadow:0 1px 3px rgba(47,62,44,.08), 0 6px 20px rgba(47,62,44,.06);
  font-size:15px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--green-050); color:var(--ink);
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1,h2,.brand-name,.cal-title,.day-title{font-family:"Lora",Georgia,serif; color:var(--green-700)}
h2{font-size:1.15rem;margin:0 0 12px}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:.86rem}

/* ===== Đăng nhập ===== */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--green-100),var(--green-050) 55%,var(--cream));z-index:50}
.login-card{background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:38px 42px;width:min(380px,92vw);text-align:center}
.lotus{font-size:2.6rem}
.brand{margin:.2em 0 0;font-size:2rem;letter-spacing:.02em}
.brand-sub{margin:.2em 0 1.4em;color:var(--muted)}
.login-card form{text-align:left}
.login-card label{display:block;margin-bottom:12px;font-weight:500}

/* ===== Thanh trên ===== */
.topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--white);border-bottom:1px solid var(--green-200);padding:10px 20px;position:sticky;top:0;z-index:20}
.topbar-brand{display:flex;align-items:center;gap:10px}
.lotus-sm{font-size:1.7rem}
.brand-name{font-size:1.25rem;line-height:1.1}
.brand-tag{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.tab{border:none;background:none;padding:9px 14px;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:500;color:var(--ink)}
.tab:hover{background:var(--green-100)}
.tab.active{background:var(--green-600);color:#fff}
.badge{background:var(--amber);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 7px;margin-left:4px}
.topbar-user{display:flex;align-items:center;gap:8px}
#meName{font-weight:600;color:var(--green-700)}

main{padding:20px;max-width:1280px;margin:0 auto}
.card{background:var(--white);border:1px solid var(--green-200);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}

/* ===== Nút & form ===== */
.btn{border:none;border-radius:10px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;transition:filter .12s}
.btn:hover{filter:brightness(.96)}
.btn-primary{background:var(--green-600);color:#fff}
.btn-ghost{background:var(--green-100);color:var(--green-700)}
.btn-sm{padding:6px 11px;font-size:.85rem}
.btn-block{width:100%}
.btn-danger{background:#F6E3DE;color:var(--red)}
.btn-warn{background:var(--cream);color:var(--amber);border:1px solid var(--cream-edge)}
input,select,textarea{
  width:100%;padding:8px 10px;margin-top:4px;border:1px solid var(--green-200);border-radius:9px;
  font:inherit;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus,.btn:focus-visible,.tab:focus-visible{outline:2px solid var(--green-600);outline-offset:1px}
label{font-size:.9rem;font-weight:500;display:block}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 14px;margin-bottom:12px}
.form-error{color:var(--red);font-size:.88rem;min-height:1.2em;margin:6px 0}
.form-ok{color:var(--green-600);font-size:.88rem;min-height:1.2em;margin-top:8px}

/* ===== Lịch ===== */
.cal-layout{display:grid;grid-template-columns:minmax(420px,1.4fr) minmax(320px,1fr);gap:18px;align-items:start}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cal-title{flex:1;text-align:center;font-size:1.3rem;font-weight:600}
.cal-legend{display:flex;gap:18px;font-size:.8rem;color:var(--muted);margin:4px 0 10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dot-chay{background:var(--cream);border:1px solid var(--cream-edge)}
.dot-bar{background:var(--green-600)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-weekdays div{text-align:center;font-size:.78rem;font-weight:600;color:var(--muted);padding:2px 0}
.cal-weekdays .sun{color:var(--red)}
.cal-cell{
  position:relative;background:var(--white);border:1px solid var(--green-200);border-radius:10px;
  min-height:74px;padding:6px 7px 14px;cursor:pointer;text-align:left;font:inherit;transition:box-shadow .12s}
.cal-cell:hover{box-shadow:0 0 0 2px var(--green-200)}
.cal-cell.out{opacity:.38}
.cal-cell.today{border-color:var(--green-600);box-shadow:inset 0 0 0 1px var(--green-600)}
.cal-cell.selected{background:var(--green-100);border-color:var(--green-600)}
.cal-cell.chay{background:var(--cream);border-color:var(--cream-edge)}
.cal-cell.chay.selected{background:#F4EFC9}
.cal-day-num{font-weight:600}
.cal-cell .guests{font-size:.72rem;color:var(--muted)}
.cal-lunar{
  position:absolute;right:5px;bottom:14px;font-size:.66rem;font-weight:600;
  background:var(--white);border:1px solid var(--cream-edge);color:var(--amber);
  border-radius:6px;padding:0 4px;line-height:1.5}
.cal-bar{position:absolute;left:6px;right:6px;bottom:5px;height:5px;background:var(--green-100);border-radius:99px;overflow:hidden}
.cal-bar i{display:block;height:100%;background:var(--green-600);border-radius:99px}
.cal-bar i.warn{background:var(--amber)}
.cal-bar i.full{background:var(--red)}

/* ===== Bảng khung giờ trong ngày ===== */
.day-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.day-title{font-size:1.15rem}
.day-sub{font-size:.82rem;color:var(--amber);font-weight:600}
.slot-list{display:flex;flex-direction:column;gap:8px;max-height:66vh;overflow:auto}
.slot{border:1px solid var(--green-200);border-radius:10px;padding:8px 10px;background:var(--white)}
.slot-top{display:flex;align-items:center;gap:10px}
.slot-time{font-weight:700;color:var(--green-700);width:52px}
.slot-bar{flex:1;height:9px;background:var(--green-100);border-radius:99px;overflow:hidden}
.slot-bar i{display:block;height:100%;background:var(--green-600)}
.slot-bar i.warn{background:var(--amber)}
.slot-bar i.full{background:var(--red)}
.slot-num{font-size:.8rem;color:var(--muted);width:88px;text-align:right}
.slot-res{margin-top:6px;border-top:1px dashed var(--green-200);padding-top:6px;display:flex;flex-direction:column;gap:5px}
.res-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem}
.res-main{flex:1;min-width:150px}
.res-name{font-weight:600}
.res-chip{font-size:.72rem;border-radius:999px;padding:1px 8px;font-weight:600}
.chip-booked{background:var(--green-100);color:var(--green-700)}
.chip-notified{background:var(--cream);color:var(--amber);border:1px solid var(--cream-edge)}
.chip-arrived{background:var(--green-600);color:#fff}
.chip-noshow{background:#F6E3DE;color:var(--red)}
.res-detail{font-size:.78rem;color:var(--muted);width:100%}
.icon-btn{border:none;background:var(--green-100);border-radius:8px;cursor:pointer;padding:4px 8px;font-size:.8rem}
.icon-btn:hover{filter:brightness(.95)}

/* ===== Sắp đến giờ ===== */
.up-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--green-200);
  border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--white)}
.up-row.soon{background:var(--cream);border-color:var(--cream-edge)}
.up-time{font-weight:700;color:var(--green-700);min-width:110px}
.up-main{flex:1;min-width:200px}
.up-actions{display:flex;gap:6px;flex-wrap:wrap}
.empty{color:var(--muted);text-align:center;padding:26px 0}

/* ===== Thống kê ===== */
.stat-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem}
.stat-filter input{width:auto;margin-top:0}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 20px}
.stat-card{border:1px solid var(--green-200);border-radius:12px;padding:12px 14px;background:var(--green-050)}
.stat-card.cream{background:var(--cream);border-color:var(--cream-edge)}
.stat-num{font-size:1.6rem;font-weight:700;color:var(--green-700);font-family:"Lora",serif}
.stat-label{font-size:.8rem;color:var(--muted)}

/* ===== Bảng ===== */
.table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.9rem}
.table th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  border-bottom:2px solid var(--green-200);padding:7px 8px}
.table td{border-bottom:1px solid var(--green-100);padding:8px}
.table tr:hover td{background:var(--green-050)}
.mini-bar{display:inline-block;width:90px;height:7px;background:var(--green-100);border-radius:99px;overflow:hidden;vertical-align:middle;margin-right:6px}
.mini-bar i{display:block;height:100%;background:var(--green-600)}

/* ===== Cài đặt ===== */
.settings-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(380px,1.6fr);gap:18px;align-items:start}
.rule-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.9rem;
  background:var(--green-050);border:1px solid var(--green-200);border-radius:10px;padding:12px}
.rule-form input,.rule-form select{width:auto;margin-top:0}
.weekday-picks{display:inline-flex;gap:6px;flex-wrap:wrap}
.weekday-picks label{display:inline-flex;align-items:center;gap:3px;font-weight:500;background:var(--white);
  border:1px solid var(--green-200);border-radius:8px;padding:3px 8px;cursor:pointer}
.weekday-picks input{width:auto;margin:0}
.rule-time{color:var(--muted)}
.rule-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}
.entry-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;
  background:var(--white);border:1px solid var(--green-200);border-radius:8px;padding:7px 10px}
.entry-row input,.entry-row select{width:auto;margin-top:0}
.slot-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem;margin:4px 0}
.slot-divider::before,.slot-divider::after{content:"";flex:1;border-top:1px dashed var(--green-200)}
.slot.past{opacity:.55}

/* ===== Nhân viên ===== */
.perm-box{border:1px solid var(--green-200);border-radius:10px;padding:10px 14px;margin:8px 0 4px}
.perm-box legend{font-size:.82rem;color:var(--muted);padding:0 6px}
.perm-box label{display:inline-flex;align-items:center;gap:6px;margin:4px 14px 4px 0;font-weight:500}
.perm-box input{width:auto;margin:0}
.perm-tags{display:flex;gap:4px;flex-wrap:wrap}
.perm-tag{font-size:.7rem;background:var(--green-100);color:var(--green-700);border-radius:999px;padding:1px 8px}

/* ===== Modal & toast ===== */
.modal{position:fixed;inset:0;background:rgba(47,62,44,.35);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.modal-box{background:var(--white);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;width:min(620px,96vw);max-height:92vh;overflow:auto}
.modal-sm{width:min(400px,96vw)}
.modal-box label{margin-bottom:8px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.cap-info{font-size:.85rem;color:var(--green-700);background:var(--green-050);border:1px solid var(--green-200);border-radius:8px;padding:7px 10px;margin-top:8px;min-height:1em}
.cap-info.full{color:var(--red);background:#FBF0ED;border-color:#EFCFC5}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green-700);color:#fff;
  padding:10px 20px;border-radius:999px;box-shadow:var(--shadow);z-index:60;font-weight:500}

@media (max-width:980px){
  .cal-layout,.settings-layout{grid-template-columns:1fr}
  .topbar{gap:10px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}