/* ======================================================
   MODULE: KHÁCH HÀNG & LỊCH HẸN  (light theme, same as order)
   ====================================================== */

/* Page wrapper — overlays the entire screen just like om-overlay */
.kh-overlay{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;flex-direction:column;}
.kh-overlay.open{display:flex;}

/* Top-bar inside KH module reuses .om-topbar/.om-topbtn etc. from order */
.kh-topbar{background:#1a1a1a;color:#fff;height:48px;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;}
.kh-logo-area{display:flex;align-items:center;gap:8px;}
.kh-back-btn{background:#2a2a2a;color:#ccc;border:none;padding:6px 13px;border-radius:5px;font-family:var(--font);font-size:12px;cursor:pointer;font-weight:500;}
.kh-back-btn:hover{background:#3a3a3a;color:#fff;}

/* Tab bar */
.kh-tabs{background:var(--white);border-bottom:1px solid var(--border);display:flex;padding:0 20px;gap:0;flex-shrink:0;}
.kh-tab{padding:12px 18px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-family:var(--font);white-space:nowrap;}
.kh-tab.on{color:var(--accent);border-color:var(--accent);}

/* Control bar */
.kh-controls{background:var(--white);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.kh-inp{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:7px 12px;font-family:var(--font);font-size:12px;color:var(--text);outline:none;}
.kh-inp:focus{border-color:var(--accent);}
.kh-inp::placeholder{color:var(--muted);}
.kh-sel{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:7px 12px;font-family:var(--font);font-size:12px;color:var(--text);outline:none;cursor:pointer;}
.kh-sel:focus{border-color:var(--accent);}

/* Scrollable content */
.kh-content{flex:1;overflow-y:auto;background:var(--bg);}

/* ---- Rank overview cards ---- */
.kh-rank-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:20px 20px 8px;}
.kh-rank-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:center;cursor:pointer;transition:all .2s;}
.kh-rank-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08);}

/* ---- Customer grid ---- */
.kh-cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;padding:8px 20px 24px;}
.kh-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s;}
.kh-card:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(224,122,60,.12);transform:translateY(-2px);}
.kh-card-hdr{padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);cursor:pointer;}
.kh-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#fff;flex-shrink:0;position:relative;}
.kh-rank-dot{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;border-radius:50%;border:2px solid var(--white);display:flex;align-items:center;justify-content:center;font-size:8px;}
.kh-card-body{padding:12px 16px;}
.kh-stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:10px;}
.kh-stat{background:#fafaf8;border:1px solid var(--border);border-radius:6px;padding:7px;text-align:center;}
.kh-stat-v{font-size:13px;font-weight:800;}
.kh-stat-l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:2px;}
.kh-rp-bar{height:5px;background:#f0f0ec;border-radius:3px;overflow:hidden;margin-top:4px;}
.kh-rp-fill{height:100%;border-radius:3px;transition:width .5s;}
.kh-svc-badges{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;}
.kh-svc-badge{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700;border:1px solid;}
.kh-return-alert{background:#fff0f0;border:1px solid #f5c0c0;border-radius:6px;padding:5px 10px;font-size:11px;color:var(--red);display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.kh-return-due{background:var(--gold-light);border:1px solid #e8d080;border-radius:6px;padding:5px 10px;font-size:11px;color:var(--gold);display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.kh-return-ok{background:var(--green-light);border:1px solid #a8dfc4;border-radius:6px;padding:5px 10px;font-size:11px;color:var(--green);display:flex;align-items:center;gap:5px;margin-bottom:8px;}

/* ---- Contact action buttons ---- */
.kh-actions{display:flex;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.kh-act{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border-radius:6px;border:none;cursor:pointer;font-family:var(--font);font-size:11px;font-weight:700;transition:all .15s;text-decoration:none;}
.kh-act-fb{background:#e8f0ff;color:#1877f2;}
.kh-act-fb:hover{background:#1877f2;color:#fff;}
.kh-act-tg{background:#e3f4fd;color:#229ED9;}
.kh-act-tg:hover{background:#229ED9;color:#fff;}
.kh-act-call{background:var(--green-light);color:var(--green);}
.kh-act-call:hover{background:var(--green);color:#fff;}
.kh-act-appt{background:var(--accent-light);color:var(--accent);}
.kh-act-appt:hover{background:var(--accent);color:#fff;}

/* ---- Staff/Sale assignment row ---- */
.kh-assign-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap;}
.kh-assign-tag{background:#f0f0ec;border-radius:4px;padding:2px 7px;font-size:10px;font-weight:700;color:var(--text);}

/* ---- Detail Modal ---- */
.kh-detail-mo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;align-items:center;justify-content:center;}
.kh-detail-mo.open{display:flex;}
.kh-detail-box{background:var(--white);border-radius:12px;width:700px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,.2);display:flex;flex-direction:column;}
.kh-detail-hdr{padding:20px 24px;border-bottom:1px solid var(--border);}
.kh-detail-body{padding:20px 24px;flex:1;}
.kh-detail-foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:#fafaf8;border-radius:0 0 12px 12px;}
.kh-hist-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
.kh-hist-table th{text-align:left;padding:6px 8px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);}
.kh-hist-table td{padding:7px 8px;border-bottom:1px solid var(--border);}
.kh-hist-table tr:last-child td{border-bottom:none;}
.kh-sec-lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--border);}

/* ---- Add Customer Modal ---- */
.kh-add-mo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;align-items:center;justify-content:center;}
.kh-add-mo.open{display:flex;}
.kh-add-box{background:var(--white);border-radius:12px;width:520px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,.2);padding:24px;}

/* ---- Rank rules view ---- */
.kh-rank-rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:20px;}
.kh-rule-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.kh-rule-inp{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:5px;font-family:var(--font);font-size:13px;outline:none;background:var(--white);}
.kh-rule-inp:focus{border-color:var(--accent);}
.kh-perk-row{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#fafaf8;border-radius:5px;margin-bottom:5px;}
.kh-perk-inp{background:none;border:none;font-family:var(--font);font-size:12px;flex:1;outline:none;color:var(--text);}
.kh-perk-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0;}

/* ---- Care config view ---- */
.kh-care-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding:20px;}
.kh-care-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.kh-care-inp{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:5px;font-family:var(--font);font-size:13px;outline:none;background:var(--white);}
.kh-care-inp:focus{border-color:var(--accent);}
.kh-tog{width:36px;height:20px;background:#ddd;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.kh-tog.on{background:var(--accent);}
.kh-tog::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s;}
.kh-tog.on::after{left:19px;}