/* ============================================================
   VICM Booking Calendar — front-end styles
   TẤT CẢ selector đều bắt đầu bằng #vicm-booking để KHÔNG đụng theme.
   ============================================================ */
#vicm-booking{
  --paper:#F4F0E8; --paper-2:#FBF8F2; --ink:#1B1A16; --ink-soft:#56524A;
  --line:#D9D1C2; --line-strong:#C3B9A5;
  --green:#1F5A47; --green-tint:#E4EEE8; --clay:#B85533; --clay-tint:#F4E2D9;
  --gold:#B9892E; --gold-tint:#F2E8D2; --slate:#3A4654; --slate-tint:#E1E5EA;
  --plum:#7A3B5E; --plum-tint:#EFDFE8;
  --today:#1F5A47; --shadow:0 18px 50px -28px rgba(27,26,22,.55);
  --radius:14px; --dur:.42s; --ease:cubic-bezier(.16,1,.3,1);
  font-family:'Archivo',system-ui,sans-serif; color:var(--ink); line-height:1.5;
  position:relative; max-width:1180px; margin:0 auto;
}
#vicm-booking *{box-sizing:border-box}

/* ── Masthead ── */
#vicm-booking .mast{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:22px;border-bottom:2px solid var(--ink);flex-wrap:wrap;margin:0}
#vicm-booking .brand{display:flex;align-items:center;gap:14px}
#vicm-booking .logo{width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:900;font-size:20px;
  background:var(--ink);color:var(--paper-2);letter-spacing:-.04em}
#vicm-booking .brand h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.5rem,1rem+2vw,2.3rem);
  line-height:.95;letter-spacing:-.02em;margin:0}
#vicm-booking .brand .kicker{font-size:.66rem;text-transform:uppercase;letter-spacing:.34em;
  color:var(--ink-soft);font-weight:600;margin-bottom:3px}
#vicm-booking .mast .meta{text-align:right;font-size:.78rem;color:var(--ink-soft)}
#vicm-booking .mast .meta b{font-family:'Fraunces',serif;font-style:italic;color:var(--green);font-weight:500}
#vicm-booking .role-tag{display:inline-block;margin-top:6px;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;font-weight:700}
#vicm-booking .role-tag.mgr{background:var(--green-tint);color:var(--green);border:1px solid var(--green)}
#vicm-booking .role-tag.pub{background:var(--gold-tint);color:var(--gold);border:1px solid var(--gold)}

/* ── Toolbar ── */
#vicm-booking .toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;
  margin:26px 0 18px;flex-wrap:wrap}
#vicm-booking .monthnav{display:flex;align-items:center;gap:14px}
#vicm-booking .filterbar{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-soft)}
#vicm-booking .filterbar select{width:auto;padding:6px 10px;font-size:.82rem}
#vicm-booking .cell.vicm-dim{opacity:.26}
#vicm-booking .cell.vicm-dim:hover{opacity:.6}
#vicm-booking .monthnav h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.7rem;letter-spacing:-.01em;
  min-width:230px;margin:0}
#vicm-booking .monthnav h2 span{color:var(--ink-soft);font-weight:400;font-style:italic}
#vicm-booking .navbtn{width:40px;height:40px;border:1.5px solid var(--line-strong);background:var(--paper-2);
  border-radius:50%;cursor:pointer;font-size:1rem;color:var(--ink);transition:all var(--dur) var(--ease);
  display:grid;place-items:center}
#vicm-booking .navbtn:hover{background:var(--ink);color:var(--paper-2);transform:translateY(-2px)}

/* segmented view toggle (chỉ hiện cho quản lý) */
#vicm-booking .viewtoggle{display:inline-flex;background:var(--paper-2);border:1.5px solid var(--line-strong);
  border-radius:999px;padding:4px;position:relative}
#vicm-booking .viewtoggle button{position:relative;z-index:2;border:0;background:transparent;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.82rem;padding:8px 18px;border-radius:999px;
  color:var(--ink-soft);transition:color var(--dur) var(--ease);display:flex;align-items:center;gap:7px}
#vicm-booking .viewtoggle button.on{color:var(--paper-2)}
#vicm-booking .viewtoggle .pill{position:absolute;z-index:1;top:4px;bottom:4px;border-radius:999px;
  background:var(--green);transition:all var(--dur) var(--ease);box-shadow:0 4px 14px -6px var(--green)}

/* ── Layout ── */
#vicm-booking .grid-main{display:grid;grid-template-columns:1fr 290px;gap:26px;align-items:start}
@media(max-width:880px){#vicm-booking .grid-main{grid-template-columns:1fr}}

/* ── Calendar ── */
#vicm-booking .cal{background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
#vicm-booking .dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--ink)}
#vicm-booking .dow span{padding:11px 8px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);text-align:center;font-weight:600;opacity:.85}
#vicm-booking .dow span:last-child{color:var(--clay)}
#vicm-booking .days{display:grid;grid-template-columns:repeat(7,1fr)}
#vicm-booking .cell{min-height:104px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px 9px;position:relative;transition:background var(--dur) var(--ease);overflow:hidden}
#vicm-booking .cell:nth-child(7n){border-right:0}
#vicm-booking .cell.pad{background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(0,0,0,.018) 7px,rgba(0,0,0,.018) 14px)}
#vicm-booking .cell.past{opacity:.55}
/* Ngày đã qua: gạch chéo "đã qua" (khớp ô chú thích). :not(.booked) để sự kiện đã qua giữ màu loại sự kiện. */
#vicm-booking .cell.past:not(.booked){background:repeating-linear-gradient(45deg,#ece8e1,#ece8e1 5px,#dcd6cb 5px,#dcd6cb 10px)}
#vicm-booking .cell .dnum{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;line-height:1}
#vicm-booking .cell.weekend .dnum{color:var(--clay)}
#vicm-booking .cell.today .dnum{background:var(--today);color:#fff;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.85rem}
#vicm-booking .cell.free.clickable{cursor:pointer}
#vicm-booking .cell.free.clickable:hover{background:var(--green-tint)}
#vicm-booking .cell.free.clickable:hover::after{content:"+ Đặt lịch";position:absolute;bottom:8px;left:9px;
  font-size:.66rem;font-weight:700;color:var(--green);letter-spacing:.02em}
#vicm-booking .cell.booked{background:var(--ev-tint,var(--clay-tint))}
#vicm-booking .cell.booked.mid{cursor:default}

/* event chip */
#vicm-booking .chip{margin-top:7px;border-left:3px solid var(--ev,var(--clay));padding:4px 6px;border-radius:4px;
  background:rgba(255,255,255,.6);font-size:.7rem;line-height:1.25;display:flex;flex-direction:column;gap:1px}
#vicm-booking .chip .t{font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#vicm-booking .chip .s{color:var(--ink-soft);font-size:.64rem}
#vicm-booking .cont{margin-top:8px;font-size:.64rem;color:var(--ink-soft);font-style:italic;
  display:flex;align-items:center;gap:4px}
#vicm-booking .cont::before{content:"";width:14px;height:2px;background:var(--ev,var(--clay));border-radius:2px}
#vicm-booking .booked-public{margin-top:9px;font-size:.7rem;font-weight:700;color:var(--clay);
  display:flex;align-items:center;gap:5px}
#vicm-booking .booked-public .dot{width:7px;height:7px;border-radius:50%;background:var(--clay)}

/* ── Sidebar ── */
#vicm-booking .side{display:flex;flex-direction:column;gap:20px}
#vicm-booking .card{background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:18px 18px 20px}
#vicm-booking .card h3{font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;margin:0 0 14px;
  display:flex;align-items:center;gap:8px}
#vicm-booking .card h3::before{content:"";width:8px;height:8px;background:var(--green);border-radius:2px;transform:rotate(45deg)}
#vicm-booking .legend{display:flex;flex-direction:column;gap:9px;font-size:.8rem}
#vicm-booking .legend .row{display:flex;align-items:center;gap:10px}
#vicm-booking .sw{width:18px;height:18px;border-radius:5px;border:1px solid var(--line-strong);flex:none}
#vicm-booking .types{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#vicm-booking .types .tg{font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid}
#vicm-booking .up{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto}
#vicm-booking .up .item{padding:11px 0;border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:4px}
#vicm-booking .up .item:last-child{border-bottom:0}
#vicm-booking .up .up-top{display:flex;align-items:baseline;gap:9px}
#vicm-booking .up .up-date{font-family:'Fraunces',serif;font-weight:600;color:var(--green);white-space:nowrap;font-size:.98rem;flex:none}
#vicm-booking .up .up-name{font-weight:600;font-size:.85rem;line-height:1.25}
#vicm-booking .up .up-sub{display:flex;align-items:center;gap:8px;justify-content:space-between}
#vicm-booking .up .up-sub .by{font-size:.72rem;color:var(--ink-soft)}
#vicm-booking .up .badge{font-size:.6rem;font-weight:700;padding:1px 7px;border-radius:999px;display:inline-block;flex:none}
#vicm-booking .empty-note{font-size:.78rem;color:var(--ink-soft);font-style:italic;padding:6px 0}
#vicm-booking .auto{font-size:.74rem;color:var(--ink-soft);line-height:1.55}
#vicm-booking .auto b{color:var(--ink)}
#vicm-booking .auto .ln{display:flex;gap:9px;padding:7px 0;border-bottom:1px dashed var(--line)}
#vicm-booking .auto .ln:last-child{border-bottom:0}
#vicm-booking .auto .ic{flex:none;font-size:1rem}

/* ── Modal ── */
#vicm-booking .overlay{position:fixed;inset:0;background:rgba(27,26,22,.46);backdrop-filter:blur(3px);
  z-index:99999;display:none;align-items:flex-start;justify-content:center;padding:6vh 18px;overflow:auto}
#vicm-booking .overlay.open{display:flex;animation:vicmfade .3s var(--ease)}
@keyframes vicmfade{from{opacity:0}to{opacity:1}}
#vicm-booking .overlay .modal{display:block;position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:0;float:none;
  background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:18px;
  max-width:520px;width:100%;height:auto;box-shadow:var(--shadow);overflow:hidden;
  z-index:1;opacity:1;visibility:visible;transform:none;animation:vicmrise .45s var(--ease)}
@keyframes vicmrise{from{transform:translateY(24px) scale(.97);opacity:0}to{transform:none;opacity:1}}
#vicm-booking .modal .head{background:var(--ink);color:var(--paper);padding:20px 24px;position:relative}
#vicm-booking .modal .head .kk{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;opacity:.7}
#vicm-booking .modal .head h3{font-family:'Fraunces',serif;font-size:1.45rem;font-weight:600;margin:3px 0 0}
#vicm-booking .modal .head .x{position:absolute;top:16px;right:18px;background:transparent;border:0;color:var(--paper);
  font-size:1.5rem;cursor:pointer;opacity:.8;line-height:1}
#vicm-booking .modal .body{padding:22px 24px 8px}
#vicm-booking .fr{margin-bottom:15px}
#vicm-booking .fr.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
#vicm-booking label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft);margin-bottom:5px}
#vicm-booking input,#vicm-booking select,#vicm-booking textarea{width:100%;font-family:'Archivo',sans-serif;font-size:.92rem;padding:10px 12px;
  border:1.5px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--ink);transition:border var(--dur)}
#vicm-booking textarea{resize:vertical;min-height:64px;line-height:1.45}
#vicm-booking input:focus,#vicm-booking select:focus,#vicm-booking textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
#vicm-booking .hint{font-size:.7rem;color:var(--ink-soft);margin-top:5px;display:flex;align-items:center;gap:6px}
#vicm-booking .err{color:var(--clay);font-size:.74rem;margin-bottom:10px;display:none;font-weight:600}
#vicm-booking .modal .foot{padding:8px 24px 22px;display:flex;gap:12px;justify-content:flex-end}
#vicm-booking .btn{font-family:'Archivo',sans-serif;font-weight:700;font-size:.86rem;padding:11px 22px;border-radius:10px;
  cursor:pointer;border:1.5px solid var(--ink);transition:all var(--dur) var(--ease)}
#vicm-booking .btn.ghost{background:transparent;color:var(--ink)}
#vicm-booking .btn.ghost:hover{background:var(--line)}
#vicm-booking .btn.primary{background:var(--green);border-color:var(--green);color:#fff}
#vicm-booking .btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px var(--green)}
#vicm-booking .btn[disabled]{opacity:.55;cursor:wait}
#vicm-booking .btn.danger{background:var(--clay);border-color:var(--clay);color:#fff}
#vicm-booking .btn.danger:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px var(--clay)}
#vicm-booking .btn.danger.confirm{background:#8f3a20;border-color:#8f3a20}
#vicm-booking .drow{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
#vicm-booking .drow:last-child{border-bottom:0}
#vicm-booking .drow .k{color:var(--ink-soft);min-width:120px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;flex:none}
#vicm-booking .drow .v{font-weight:600}
#vicm-booking .dbadge{display:inline-block;font-size:.66rem;font-weight:700;padding:2px 9px;border-radius:999px}

/* ── Toast (thông báo nổi GIỮA màn hình, cỡ lớn) ── */
#vicm-booking .toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);
  background:var(--ink);color:var(--paper-2);padding:28px 32px;border-radius:18px;z-index:100000;
  box-shadow:0 34px 90px -24px rgba(27,26,22,.72);max-width:540px;width:calc(100% - 40px);
  opacity:0;visibility:hidden;pointer-events:none;border:1px solid rgba(255,255,255,.08);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
  display:flex;gap:18px;align-items:flex-start}
#vicm-booking .toast.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#vicm-booking .toast .ic{font-size:2.1rem;flex:none;line-height:1}
#vicm-booking .toast .t{font-family:'Fraunces',serif;font-weight:600;font-size:1.28rem;margin-bottom:7px;line-height:1.2}
#vicm-booking .toast .s{font-size:.96rem;opacity:.9;line-height:1.6}
#vicm-booking .toast .s b{color:var(--gold);font-weight:700}

/* Nút đếm ngược + đóng (×): vòng tròn vơi dần hiện số giây còn lại; hover → dấu ×; bấm = tắt ngay */
@property --cd { syntax:'<percentage>'; inherits:false; initial-value:100%; }
#vicm-booking .toast-x{--cd:100%;flex:none;align-self:flex-start;margin-left:6px;position:relative;
  width:38px;height:38px;border:0;padding:0;cursor:pointer;border-radius:50%;
  background:conic-gradient(var(--gold) var(--cd),rgba(255,255,255,.16) 0);
  display:grid;place-items:center;transition:--cd 1s linear,transform .2s var(--ease)}
#vicm-booking .toast-x::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
#vicm-booking .toast-x .cd,#vicm-booking .toast-x .xmark{position:relative;z-index:1;
  color:var(--paper-2);font-family:'Archivo',sans-serif;font-weight:700;line-height:1}
#vicm-booking .toast-x .cd{font-size:.86rem}
#vicm-booking .toast-x .xmark{display:none;font-size:1.3rem}
#vicm-booking .toast-x:hover{transform:scale(1.08)}
#vicm-booking .toast-x:hover .cd{display:none}
#vicm-booking .toast-x:hover .xmark{display:inline}
#vicm-booking .toast-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

#vicm-booking .footnote{margin-top:30px;text-align:center;font-size:.74rem;color:var(--ink-soft);font-style:italic}
#vicm-booking .pub-banner{display:none;background:var(--gold-tint);border:1px solid var(--gold);color:#7a5a16;
  border-radius:10px;padding:10px 16px;font-size:.8rem;margin-bottom:16px;align-items:center;gap:9px}
#vicm-booking.public .pub-banner{display:flex}
/* Ẩn danh (mode rút gọn): bấm ngày TRỐNG → mời liên hệ giữ chỗ (hotline). Ngày có sự kiện chỉ hiện "Đã có sự kiện", KHÔNG bấm xem chi tiết. */
#vicm-booking.public .cell.free.clickable{cursor:pointer}
#vicm-booking.public .cell.free.clickable:hover{background:var(--green-tint)}
#vicm-booking.public .cell.free.clickable:hover::after{content:"Giữ chỗ →";position:absolute;bottom:8px;left:9px;
  font-size:.62rem;font-weight:700;color:var(--green);letter-spacing:.02em}
#vicm-booking.public #vicm-upCard,#vicm-booking.public #vicm-autoCard{display:none}

/* trạng thái tải */
#vicm-booking .loading{padding:50px;text-align:center;color:var(--ink-soft);font-style:italic}