/* DayThem — friendly green design tokens */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/88018aec.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cb239040.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/1430dc2c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/03650b25.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f30c3255.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f2403f91.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ad106392.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/69d89b5b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/7ef4de10.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/2bad6967.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/6f6747b8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/2125e2aa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* warm cream background */
  --bg: oklch(0.985 0.008 95);
  --surface: #ffffff;
  --surface-alt: oklch(0.97 0.012 95);

  /* friendly leaf green */
  --green-50:  oklch(0.97 0.022 150);
  --green-100: oklch(0.93 0.045 150);
  --green-200: oklch(0.86 0.075 150);
  --green-500: oklch(0.62 0.13 150);
  --green-600: oklch(0.55 0.13 150);
  --green-700: oklch(0.45 0.10 150);
  --green-900: oklch(0.28 0.05 150);

  /* warm coral for due / warning */
  --coral-50:  oklch(0.96 0.025 40);
  --coral-100: oklch(0.92 0.05 40);
  --coral-500: oklch(0.72 0.14 40);
  --coral-700: oklch(0.55 0.14 40);

  /* honey for active highlight */
  --honey-100: oklch(0.95 0.05 85);
  --honey-500: oklch(0.78 0.14 85);

  /* neutrals */
  --ink-900: oklch(0.22 0.012 150);
  --ink-700: oklch(0.36 0.012 150);
  --ink-500: oklch(0.55 0.01 150);
  --ink-300: oklch(0.75 0.008 150);
  --ink-200: oklch(0.88 0.006 150);
  --ink-100: oklch(0.94 0.005 150);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(40,30,20,0.04), 0 1px 1px rgba(40,30,20,0.03);
  --sh-2: 0 2px 6px rgba(40,30,20,0.06), 0 8px 24px rgba(40,30,20,0.04);
  --sh-3: 0 8px 24px rgba(40,30,20,0.10), 0 20px 60px rgba(40,30,20,0.06);
}

* { box-sizing: border-box; }

.dt {
  font-family: 'Be Vietnam Pro', -apple-system, system-ui, sans-serif;
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

.dt-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* status bar spacer (iOS-style notch) */
.dt-statusbar {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}

.dt-statusbar .icons { display: flex; gap: 5px; align-items: center; }

/* scroll container */
.dt-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.dt-scroll::-webkit-scrollbar { display: none; }

/* tab bar */
.dt-tabbar {
  height: 78px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--ink-200);
  display: flex;
  align-items: flex-start;
  padding: 10px 0 28px;
  gap: 0;
  flex-shrink: 0;
}

.dt-tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-500);
  cursor: pointer;
  font-weight: 500;
}

.dt-tabbar .tab.active { color: var(--green-600); font-weight: 600; }

/* generic card */
.dt-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border: 1px solid var(--ink-100);
}

/* button */
.dt-btn {
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s, filter .12s;
}
.dt-btn:active { transform: scale(0.97); }
.dt-btn-primary { background: var(--green-500); color: white; }
.dt-btn-primary:hover { filter: brightness(1.05); }
.dt-btn-secondary { background: var(--green-50); color: var(--green-700); }
.dt-btn-ghost { background: transparent; color: var(--green-600); }
.dt-btn-block { width: 100%; }
.dt-btn-lg { padding: 18px 24px; font-size: 17px; border-radius: 18px; }

/* big touchable */
.dt-action-tile {
  border: none;
  border-radius: var(--r-lg);
  padding: 18px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .12s;
}
.dt-action-tile:active { transform: scale(0.98); }

/* avatar */
.dt-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: white;
  flex-shrink: 0;
}

/* pill / chip */
.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.dt-chip-green { background: var(--green-100); color: var(--green-700); }
.dt-chip-coral { background: var(--coral-100); color: var(--coral-700); }
.dt-chip-honey { background: var(--honey-100); color: oklch(0.45 0.1 85); }
.dt-chip-gray { background: var(--ink-100); color: var(--ink-700); }

/* row */
.dt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
}

/* keyframes */
@keyframes dt-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes dt-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes dt-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes dt-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dt-check {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}


/* webapp.css — GieoChữ desktop webapp (uses tokens from styles.css) */
html,body{margin:0;height:100%;background:var(--bg)}
body{font-family:'Be Vietnam Pro',-apple-system,system-ui,sans-serif;color:var(--ink-900);-webkit-font-smoothing:antialiased}
#root{height:100%}
a{color:var(--green-600);text-decoration:none}a:hover{color:var(--green-700)}
.wa-app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
/* sidebar */
.wa-side{background:#fff;border-right:1px solid var(--ink-100);display:flex;flex-direction:column;padding:18px 14px}
.wa-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 20px;cursor:pointer}
.wa-wordmark{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--ink-900)}.wa-wordmark em{font-style:normal;color:var(--green-600)}
.wa-nav{display:flex;flex-direction:column;gap:2px}
.wa-navitem{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink-700);cursor:pointer;transition:background .12s,color .12s;position:relative}
.wa-navitem:hover{background:var(--surface-alt);color:var(--ink-900)}
.wa-navitem.on{background:var(--green-50);color:var(--green-700);font-weight:600}
.wa-navbadge{margin-left:auto;background:var(--coral-500);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.wa-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.wa-me{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:14px;background:var(--surface-alt);cursor:pointer}
.wa-me-name{font-size:14px;font-weight:600}.wa-me-sub{font-size:12px;color:var(--ink-500)}
/* main */
.wa-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.wa-top{display:flex;align-items:center;gap:16px;padding:20px 32px 12px}
.wa-h1{font-size:24px;font-weight:700;letter-spacing:-.5px;margin:0;line-height:1.2}
.wa-h2{font-size:17px;font-weight:700;letter-spacing:-.2px}
.wa-sub{font-size:13.5px;color:var(--ink-500);margin-top:3px}
.wa-actions{display:flex;align-items:center;gap:10px}
.wa-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:0 12px;height:40px;width:240px;color:var(--ink-500)}
.wa-search input{border:none;outline:none;font-family:inherit;font-size:13.5px;flex:1;background:transparent;color:var(--ink-900)}
.wa-iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--ink-200);background:#fff;color:var(--ink-700);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.wa-iconbtn:hover{background:var(--surface-alt)}
.wa-dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:4px;background:var(--coral-500)}
.wa-body{flex:1;overflow-y:auto;padding:12px 32px 40px}
.wa-grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
/* card */
.wa-card{background:#fff;border-radius:20px;border:1px solid var(--ink-100);box-shadow:var(--sh-1)}
.wa-card.pad{padding:20px}
.wa-sectitle{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--ink-500);text-transform:uppercase;margin:0 0 12px}
.wa-sectitle a{font-size:13px;text-transform:none;letter-spacing:0;font-weight:600;cursor:pointer}
/* stat */
.wa-stat{background:#fff;border:1px solid var(--ink-100);border-radius:18px;padding:16px 18px}
.wa-stat-l{font-size:12px;font-weight:600;color:var(--ink-500)}.wa-stat-v{font-size:28px;font-weight:700;letter-spacing:-.8px;margin-top:4px}.wa-stat-s{font-size:12.5px;color:var(--ink-500);margin-top:2px}
.wa-stat.green{background:var(--green-50);border-color:var(--green-100)}.wa-stat.green .wa-stat-v{color:var(--green-700)}
.wa-stat.coral{background:var(--coral-50);border-color:var(--coral-100)}.wa-stat.coral .wa-stat-v{color:var(--coral-700)}
.wa-stat.honey{background:var(--honey-100);border-color:var(--honey-100)}.wa-stat.honey .wa-stat-v{color:oklch(.45 .1 85)}
/* hero */
.wa-hero{position:relative;overflow:hidden;border-radius:24px;padding:24px 26px;color:#fff}
.wa-hero.green{background:linear-gradient(155deg,var(--green-500),var(--green-700));box-shadow:0 14px 34px rgba(85,158,118,.24)}
.wa-hero.dark{background:linear-gradient(155deg,var(--green-600),var(--green-900))}
.wa-hero.coral{background:linear-gradient(155deg,oklch(.64 .13 40),oklch(.5 .14 40))}
.wa-hero.honey{background:linear-gradient(155deg,oklch(.74 .11 85),oklch(.6 .12 70))}
.wa-hero.blue{background:linear-gradient(155deg,oklch(.55 .1 240),oklch(.42 .1 240))}
.wa-hero-bub{position:absolute;top:-60px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.wa-hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.5px;opacity:.9}
.wa-hero .big{font-size:30px;font-weight:700;letter-spacing:-.7px;margin-top:6px;line-height:1.15}
.wa-hero .meta{font-size:14px;opacity:.9;margin-top:4px}
/* buttons */
.wa-btn{border:none;border-radius:12px;padding:10px 16px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,filter .12s;white-space:nowrap}
.wa-btn:active{transform:scale(.98)}.wa-btn:disabled{opacity:.5;cursor:not-allowed}
.wa-btn.primary{background:var(--green-500);color:#fff}.wa-btn.primary:hover{filter:brightness(1.05)}
.wa-btn.white{background:#fff;color:var(--green-700)}.wa-btn.soft{background:var(--green-50);color:var(--green-700)}
.wa-btn.ghost{background:transparent;color:var(--ink-700);border:1px solid var(--ink-200)}.wa-btn.ghost:hover{background:var(--surface-alt)}
.wa-btn.coral{background:var(--coral-500);color:#fff}.wa-btn.glass{background:rgba(255,255,255,.18);color:#fff}
.wa-btn.lg{padding:14px 22px;font-size:15px;border-radius:14px}.wa-btn.sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.wa-btn.block{width:100%}
/* badge */
.wa-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.wa-badge.green{background:var(--green-100);color:var(--green-700)}.wa-badge.coral{background:var(--coral-100);color:var(--coral-700)}
.wa-badge.honey{background:var(--honey-100);color:oklch(.45 .1 85)}.wa-badge.gray{background:var(--ink-100);color:var(--ink-700)}.wa-badge.blue{background:oklch(.92 .045 240);color:oklch(.45 .1 240)}
/* table */
.wa-table{width:100%;border-collapse:collapse}
.wa-table th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--ink-500);text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--ink-100)}
.wa-table td{padding:12px 16px;border-bottom:1px solid var(--ink-100);font-size:14px;vertical-align:middle}
.wa-table tr:last-child td{border-bottom:none}
.wa-table tbody tr{cursor:pointer;transition:background .1s}.wa-table tbody tr:hover{background:var(--surface-alt)}
.wa-table tr.sel td{background:var(--green-50)}
.wa-cell-name{display:flex;align-items:center;gap:12px}.wa-cell-name b{font-weight:600;display:block}.wa-cell-name small{color:var(--ink-500);font-size:12px}
/* rows */
.wa-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--ink-100);cursor:pointer;transition:background .1s}
.wa-row:last-child{border-bottom:none}.wa-row:hover{background:var(--surface-alt)}
.wa-row .t{font-size:14.5px;font-weight:600}.wa-row .s{font-size:12.5px;color:var(--ink-500);margin-top:2px}
.wa-icobox{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* chips / tabs */
.wa-tabs{display:flex;gap:4px;background:var(--surface-alt);padding:4px;border-radius:12px}
.wa-tab{padding:8px 16px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-500);cursor:pointer;border:none;background:transparent;font-family:inherit}
.wa-tab.on{background:#fff;color:var(--ink-900);box-shadow:var(--sh-1)}
.wa-chip{padding:8px 14px;border-radius:999px;border:1px solid var(--ink-200);background:#fff;font-size:13px;font-weight:600;color:var(--ink-700);cursor:pointer;font-family:inherit}
.wa-chip.on{border-color:var(--green-500);background:var(--green-50);color:var(--green-700)}
/* checkbox */
.wa-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--ink-300);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.wa-check.on{background:var(--green-500);border-color:var(--green-500);color:#fff}
/* attendance tile */
.wa-att{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--ink-100);background:#fff;cursor:pointer;transition:all .15s;user-select:none}
.wa-att:hover{border-color:var(--ink-200)}
.wa-att.absent{background:var(--coral-50);border-color:var(--coral-100)}
.wa-att .mark{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--green-500);color:#fff;transition:all .15s}
.wa-att.absent .mark{background:#fff;border:2px solid var(--coral-500);color:var(--coral-500)}
/* progress */
.wa-bar{height:8px;border-radius:4px;background:var(--ink-100);overflow:hidden}.wa-bar>div{height:100%;border-radius:4px;background:var(--green-500);transition:width .3s}
/* toggle */
.wa-toggle{width:44px;height:26px;border-radius:13px;padding:2px;background:var(--ink-200);cursor:pointer;transition:background .15s;flex-shrink:0}
.wa-toggle.on{background:var(--green-500)}.wa-toggle .knob{width:22px;height:22px;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .15s}
.wa-toggle.on .knob{transform:translateX(18px)}
/* inputs */
.wa-input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--ink-200);background:#fff;font-family:inherit;font-size:14px;outline:none}
.wa-input:focus{border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-100)}
.wa-label{font-size:12.5px;font-weight:600;color:var(--ink-700);margin:0 0 6px}
.wa-field{margin-bottom:16px}
/* calendar */
.wa-cal{display:grid;grid-template-columns:56px repeat(7,1fr);border:1px solid var(--ink-100);border-radius:18px;overflow:hidden;background:#fff}
.wa-cal-h{padding:12px 6px;text-align:center;font-size:12px;font-weight:700;color:var(--ink-500);border-bottom:1px solid var(--ink-100);border-left:1px solid var(--ink-100)}
.wa-cal-h.today{color:var(--green-700)}.wa-cal-h.today b{display:inline-flex;width:26px;height:26px;border-radius:13px;background:var(--green-500);color:#fff;align-items:center;justify-content:center;margin-left:4px}
.wa-cal-t{font-size:11px;color:var(--ink-500);text-align:right;padding:4px 8px 0;border-top:1px solid var(--ink-100);height:56px}
.wa-cal-c{border-left:1px solid var(--ink-100);border-top:1px solid var(--ink-100);height:56px;position:relative}
.wa-cal-c.today{background:var(--green-50)}
.wa-ev{position:absolute;left:4px;right:4px;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:600;color:#fff;cursor:pointer;overflow:hidden;box-shadow:var(--sh-1)}
.wa-ev small{display:block;font-weight:500;opacity:.9;font-size:11px}
/* zalo */
.wa-zalo{background:oklch(.96 .01 240);border-radius:16px;padding:14px}
.wa-zalo-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-500);letter-spacing:.3px;margin-bottom:10px}
.wa-zalo-bub{background:oklch(.78 .12 240);color:#fff;border-radius:18px 18px 4px 18px;padding:10px 14px;max-width:92%;font-size:13.5px;line-height:1.55}
/* drawer & toast */
.wa-scrim{position:fixed;inset:0;background:rgba(20,30,25,.35);z-index:50;display:flex;justify-content:flex-end;animation:dt-fade .15s}
.wa-drawer{background:var(--bg);height:100%;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.12);animation:wa-in .22s cubic-bezier(.2,1,.4,1)}
@keyframes wa-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.wa-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 12px}
.wa-drawer-body{flex:1;overflow-y:auto;padding:8px 22px 28px}
.wa-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--green-700);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(70,140,100,.35);z-index:60;animation:dt-slide-up .25s}
/* misc */
.wa-empty{padding:36px;text-align:center;color:var(--ink-500);font-size:14px}
.wa-kpi{display:flex;align-items:center;gap:14px}
.wa-ring{position:relative;flex-shrink:0}.wa-ring>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700}
.wa-grid7{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.wa-sq{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.wa-bars{display:flex;align-items:flex-end;gap:10px;height:140px}
.wa-bars>div{flex:1;border-radius:8px 8px 0 0;background:var(--green-100);position:relative}
.wa-bars>div.hi{background:var(--green-500)}
.wa-bars>div span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11px;color:var(--ink-500);font-weight:600}
@media (max-width:1100px){.g4{grid-template-columns:1fr 1fr}.g-main{grid-template-columns:1fr}.wa-search{display:none}}