:root{
  --bg:#fbfaf7;
  --surface:#fff;
  --green:#355C4A;
  --green-dark:#274638;
  --green-soft:#eaf1ec;
  --gold:#C7A86B;
  --rose:#b67a62;
  --rose-soft:#f6ede8;
  --text:#1f2a25;
  --muted:#737b76;
  --line:#e9e5dc;
  --danger:#ae4747;
  --warning:#9c6e1f;
  --shadow:0 14px 40px rgba(53,92,74,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
button,input,select{font:inherit}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.site-header{
  position:sticky;top:0;z-index:60;
  min-height:90px;
  display:grid;grid-template-columns:minmax(250px,400px) 1fr auto;
  align-items:center;gap:22px;
  padding:10px clamp(18px,4vw,72px);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,229,220,.78)
}
.brand img{display:block;width:min(380px,100%);height:68px;object-fit:contain;object-position:left center}
.main-nav{display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.7vw,48px);font-size:15px}
.main-nav a{position:relative;padding:12px 0;white-space:nowrap}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:2px;background:var(--gold);transition:.2s}
.main-nav a:hover::after,.main-nav a.active::after{right:0}
.header-actions{display:flex;align-items:center;gap:8px}
.session-badge{font-size:11px;color:var(--green);background:var(--green-soft);padding:8px 10px;border-radius:999px;font-weight:800}
.outline-btn,.primary-btn,.soft-btn,.danger-btn,.text-btn{
  border:0;border-radius:12px;cursor:pointer;font-weight:800
}
.outline-btn{padding:10px 14px;background:#fff;color:var(--green);border:1px solid #d9e0db}
.text-btn{background:transparent;color:var(--green);padding:9px}
.primary-btn{padding:12px 17px;background:var(--green);color:#fff}
.soft-btn{padding:11px 15px;background:var(--green-soft);color:var(--green)}
.danger-btn{padding:11px 15px;background:#f8e8e8;color:var(--danger)}
.full{width:100%}
.mobile-menu-btn{display:none;border:0;background:transparent;color:var(--green);font-size:24px}

.page{width:min(1450px,calc(100% - 36px));margin:auto;padding:34px 0 64px}

/* HOME */
.hero{
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(520px,.95fr) minmax(620px,1.05fr);
  align-items:center;
  gap:28px;
  overflow:hidden
}
.hero-copy{
  position:relative;
  align-self:center;
  padding:20px 18px 30px 20px
}
.hero-copy::before{
  content:"";
  position:absolute;
  width:540px;height:540px;left:-150px;top:120px;
  border:3px solid rgba(182,122,98,.065);
  border-radius:50%;
  box-shadow:inset 0 0 0 28px rgba(182,122,98,.02)
}
.eyebrow{position:relative;color:var(--green);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.hero h1{
  position:relative;
  margin:22px 0 30px;
  color:var(--rose);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(48px,4.5vw,70px);
  line-height:1.18;
  font-weight:500;
  letter-spacing:.005em
}
.hero h1 span{display:block}
.hero p{
  position:relative;
  max-width:650px;
  margin:0;
  font-size:17px;
  line-height:1.72
}
.hero-actions{position:relative;display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.hero-visual{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0
}
.hero-visual img{
  display:block;
  width:100%;
  max-width:900px;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.access-note{margin-top:13px;color:var(--muted);font-size:12px;line-height:1.55}

/* GENERAL */
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-title h1{margin:5px 0 5px;color:var(--green);font-size:34px}
.page-title p{margin:0;color:var(--muted)}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);padding:22px
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat .label{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.stat .value{margin-top:7px;color:var(--green);font-size:25px;font-weight:900}

.profile-grid{display:grid;grid-template-columns:300px 1fr;gap:20px}
.profile-aside{text-align:center}
.avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:34px;font-weight:900;border:6px solid var(--rose-soft)}
.profile-name{font-size:21px;font-weight:900;color:var(--green)}
.profile-meta{color:var(--muted);margin-top:4px}
.data-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.data-row{padding:14px 0;border-bottom:1px solid #efede8}
.data-row span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.data-row b{font-size:14px}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .group{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
input,select{
  border:1px solid #d9dfdb;border-radius:11px;min-height:42px;padding:0 11px;background:#fff;color:var(--text);outline:none
}
input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(53,92,74,.08)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:800px}
th,td{padding:11px 12px;border-bottom:1px solid #eeeae3;text-align:left;font-size:13px}
th{background:#f3f7f4;color:var(--green);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:#fbfcfb}
.readonly-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#efefed;color:#666;font-size:11px;font-weight:800}
.manager-badge{background:#eaf1ec;color:var(--green)}
.global-badge{background:#f6ede8;color:#8d5d49}
.branch-tabs{display:flex;gap:8px;flex-wrap:wrap}
.branch-tab{border:1px solid #dde4df;background:#fff;color:var(--green);border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:800;font-size:12px}
.branch-tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.warning-box{padding:14px 16px;border:1px solid #ecdcbf;background:#fff8eb;color:#805b16;border-radius:13px;font-size:13px}
.role-card{border-left:4px solid var(--gold)}
.role-title{color:var(--green);font-weight:900}
.role-desc{color:var(--muted);font-size:13px;line-height:1.55;margin-top:7px}

.attendance-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}
.clock-card{text-align:center}
.big-clock{font-size:62px;color:var(--green);font-weight:900;letter-spacing:-3px}
.status-pill{display:inline-flex;padding:7px 12px;border-radius:999px;background:#eee;color:#666;font-size:12px;font-weight:900}
.status-pill.working{background:#e5f2e9;color:#2f6943}
.status-pill.done{background:#eef0f6;color:#4f5b79}
.gps-box{margin-top:17px;padding:16px;border-radius:15px;background:#f8faf8;text-align:left}
.attendance-round{display:grid;place-items:center;width:188px;height:188px;border-radius:50%;margin:22px auto 12px;border:9px solid rgba(199,168,107,.34);background:var(--green);color:#fff;font-size:23px;font-weight:900;cursor:pointer;box-shadow:0 16px 30px rgba(53,92,74,.22)}
.attendance-round.out{background:#8b4b4b}
.time-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.time-box{background:#fafaf8;border:1px solid #eeeae4;border-radius:14px;padding:13px;color:var(--muted);font-size:12px}
.time-box strong{display:block;color:var(--text);font-size:18px;margin-top:6px}

.payroll-slip{max-width:820px;margin:auto}
.payroll-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #eee}
.payroll-total{font-size:23px;color:var(--green);font-weight:900;padding-top:18px}
.locked-payroll{text-align:center;padding:55px 28px}
.lock-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 17px;display:grid;place-items:center;background:var(--rose-soft);font-size:32px}

.management-intro{margin-bottom:18px}
.management-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.management-tab{padding:9px 13px;border:1px solid #dfe5e1;background:#fff;border-radius:10px;color:var(--green);font-weight:800;cursor:pointer}
.management-tab.active{background:var(--green);color:#fff}
.permission-table td:first-child{font-weight:850;color:var(--green)}

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(29,38,33,.54);backdrop-filter:blur(4px)}
.modal-card{position:relative;width:min(435px,100%);background:#fff;border-radius:22px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.modal-card h2{margin:10px 0 5px;color:var(--green)}
.modal-card label{display:block;font-size:13px;font-weight:800;color:var(--green);margin:13px 0 6px}
.modal-close{position:absolute;right:13px;top:9px;border:0;background:transparent;font-size:26px;color:#777;cursor:pointer}
.mini-brand{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:23px;font-weight:900;border:2px solid var(--gold)}
.subtle{color:var(--muted);font-size:13px}
.form-message{min-height:22px;margin-top:10px;font-size:13px;font-weight:800}
.form-message.error{color:var(--danger)}
.demo-accounts{margin-top:14px;padding:11px 12px;background:#f8f8f6;border-radius:12px;color:#666;font-size:12px;line-height:1.7}
.demo-accounts summary{cursor:pointer;color:var(--green);font-weight:800}
.toast{position:fixed;z-index:200;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;background:#23332b;color:#fff;padding:11px 15px;border-radius:12px;font-size:13px}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1120px){
  .site-header{grid-template-columns:260px 1fr auto;padding-inline:20px}
  .brand img{height:56px}
  .main-nav{gap:18px;font-size:14px}
  .hero{grid-template-columns:1fr;min-height:auto;gap:12px}
  .hero-copy{padding:25px 16px 8px}
  .hero-visual{max-width:900px;margin:auto}
}
@media(max-width:850px){
  .site-header{grid-template-columns:1fr auto auto;min-height:74px}
  .brand{max-width:230px}.brand img{height:50px}
  .mobile-menu-btn{display:block}
  .main-nav{position:absolute;display:none;flex-direction:column;align-items:stretch;gap:0;left:12px;right:12px;top:76px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 13px}
  .session-badge{display:none}
  .page{width:min(100% - 22px,1450px);padding-top:20px}
  .profile-grid,.attendance-layout,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .data-list{grid-template-columns:1fr}
  .hero-copy::before{display:none}
  .hero h1{font-size:48px;line-height:1.22}
}
@media(max-width:520px){
  .site-header{padding:8px 11px;gap:5px}
  .brand{max-width:170px}.brand img{height:42px}
  .outline-btn{padding:8px 9px;font-size:12px}
  .hero-copy{padding-inline:4px}
  .hero h1{font-size:38px;line-height:1.25;margin-bottom:22px}
  .hero p{font-size:15px}
  .page-title h1{font-size:28px}
  .card{padding:17px}
  .big-clock{font-size:50px}
  .attendance-round{width:164px;height:164px}
}


/* V4 - FIX FONT TIẾNG VIỆT + KHÔNG BẺ DÒNG TIÊU ĐỀ DESKTOP */
.hero h1{
  font-family:"Times New Roman", Times, serif !important;
  font-kerning:normal;
  font-variant-ligatures:none;
  letter-spacing:0 !important;
  line-height:1.12 !important;
  text-rendering:optimizeLegibility;
}
.hero h1 span{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
@media(max-width:850px){
  .hero h1 span{
    white-space:normal;
  }
}

/* REALTIME BRANCH */
.live-summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(150px,1fr));
  gap:12px;
  margin:16px 0;
}
.live-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.live-stat small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}
.live-stat b{display:block;margin-top:6px;font-size:26px;color:var(--green)}
.dot-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
}
.dot-status::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#999;
}
.dot-status.working::before{background:#4c9b5f}
.dot-status.done::before{background:#4f6fa8}
.dot-status.waiting::before{background:#d1902f}
.loading-box{
  padding:34px;text-align:center;color:var(--muted)
}
@media(max-width:760px){
  .live-summary{grid-template-columns:1fr 1fr}
}


/* ==========================================================
   V5 - BRAND / SCHEDULE / LIVE MONITOR
   ========================================================== */
.brand img{
  width:min(320px,100%);
  height:auto;
  max-height:74px;
  object-fit:contain;
  object-position:left center;
  image-rendering:auto;
}

.schedule-control-card,
.live-toolbar-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 8px 24px rgba(53,92,74,.06);
}
.schedule-card{padding:18px}
.week-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 14px;
  scrollbar-width:thin;
}
.week-tab{
  flex:0 0 auto;
  border:1px solid #dfe5e1;
  background:#fff;
  color:var(--green);
  border-radius:999px;
  padding:8px 13px;
  font-weight:850;
  cursor:pointer;
}
.week-tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.schedule-week-table table{min-width:760px;table-layout:fixed}
.schedule-week-table th:not(.schedule-name-col),
.schedule-week-table td:not(.schedule-name-col){text-align:center;width:92px}
.schedule-name-col{
  width:240px;
  min-width:240px;
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;
}
.schedule-week-table thead .schedule-name-col{background:#f3f7f4;z-index:3}
.schedule-cell{
  width:68px;
  min-height:36px;
  text-align:center;
  padding:0 6px;
  border-radius:9px;
}
.schedule-value{font-weight:750;color:#44524b}

.live-branch-card{margin-bottom:18px;padding:18px}
.live-branch-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:12px}
.live-branch-head h3{margin:0;color:var(--green);font-size:22px}
.live-branch-head span{color:var(--muted);font-size:12px}
.live-summary-v5{grid-template-columns:repeat(5,minmax(130px,1fr));margin:12px 0 16px}
.live-table-wrap{border-radius:15px}
.live-table-v5{min-width:1180px;table-layout:auto}
.live-table-v5 th,.live-table-v5 td{vertical-align:middle;white-space:nowrap}
.live-table-v5 th:nth-child(1),.live-table-v5 td:nth-child(1){width:86px}
.live-table-v5 th:nth-child(2),.live-table-v5 td:nth-child(2){min-width:190px}
.live-table-v5 th:nth-child(3),.live-table-v5 td:nth-child(3){min-width:150px}
.live-table-v5 th:nth-child(4),.live-table-v5 td:nth-child(4){min-width:125px}
.live-table-v5 th:nth-child(5),.live-table-v5 td:nth-child(5),
.live-table-v5 th:nth-child(7),.live-table-v5 td:nth-child(7){width:95px;text-align:center}
.live-table-v5 th:nth-child(9),.live-table-v5 td:nth-child(9){width:95px;text-align:right}
.live-name{font-weight:650}
.dot-status.missing::before{background:#b85858}

@media(max-width:900px){
  .live-summary-v5{grid-template-columns:repeat(2,1fr)}
  .brand img{width:min(280px,100%);max-height:60px}
}
@media(max-width:520px){
  .brand img{width:min(170px,100%);max-height:46px}
  .schedule-name-col{width:170px;min-width:170px}
  .live-summary-v5{grid-template-columns:1fr 1fr}
}

/* V6 - SCHEDULE 7 DAYS + DEMO-LIKE DROPDOWNS */
.schedule-empty{text-align:center;padding:48px 22px}
.schedule-week-table table{min-width:980px}
.schedule-week-table th,
.schedule-week-table td{vertical-align:middle}
.schedule-week-table th.outside-month,
.schedule-week-table td.outside-month{
  background:#f3f1ec;
  color:#a2a29c;
}
.schedule-cell{
  width:88px;
  min-height:42px;
  border:1px solid #d8ded9;
  border-radius:10px;
  background:#fff;
  color:#34463c;
  font-weight:750;
  padding:0 10px;
}
.schedule-cell:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(53,92,74,.08);
}
.schedule-outside{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:#aaa;
  font-weight:700;
}
.schedule-outside small{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
}


/* ==========================================================
   V7 - ATTENDANCE ALERTS / SCHEDULE FINALIZE / SECURITY
   ========================================================== */
.schedule-status{
  display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.03em
}
.schedule-status.final{background:#e3f1e8;color:#2f6943}
.schedule-status.draft{background:#fff3dc;color:#8a641f}
.schedule-unpublished{text-align:center;padding:44px 18px;border:1px dashed #ddd6c7;border-radius:16px;background:#fcfbf8}
.schedule-unpublished h3{color:var(--green);margin:10px 0 7px}
.alert-level{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}
.alert-level.high{background:#f8e8e8;color:var(--danger)}
.alert-level.medium{background:#fff3dc;color:#8a641f}
.alert-high{border-color:#efd0d0}
.empty-inline{padding:18px;color:#397149;font-weight:800;text-align:center}
.field-label{display:block;font-size:12px;font-weight:850;color:var(--green);margin:13px 0 6px}
.security-grid .card h3{margin-top:0;color:var(--green)}
.security-grid input{width:100%}
.security-policy{display:grid;gap:0}
.security-policy>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid #eeeae3}
.security-policy>div:last-child{border-bottom:0}
.security-policy b{color:var(--green);font-size:12px}
.security-policy span{color:var(--muted);font-size:13px;line-height:1.5}
#alertTable{min-width:1180px}
#alertTable td:last-child{min-width:320px;white-space:normal}
@media(max-width:700px){
  .security-policy>div{grid-template-columns:1fr;gap:4px}
}


/* V7.2 - account visibility + cache/debug */
.build-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  background:#eef2ef;
  color:#355c4a;
  border:1px solid #d5dfd9;
}
.compact-header{margin-bottom:12px}
.pin-inline-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.pin-inline-grid input{width:100%}
.pin-inline-actions{margin-top:14px;flex-wrap:wrap}
@media (max-width:760px){
  .pin-inline-grid{grid-template-columns:1fr}
  .build-badge{display:none}
}

/* FINAL - Jolie icon */
.login-jolie-icon{width:72px;height:72px;object-fit:contain;border-radius:18px;background:#fff;display:block;margin-bottom:14px}


/* HR/Admin - Điều chỉnh chấm công */
.adjust-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.adjust-modal.hidden{display:none}
.adjust-modal-backdrop{
  position:absolute;inset:0;background:rgba(20,28,24,.5);
  backdrop-filter:blur(2px)
}
.adjust-modal-panel{
  position:relative;width:min(680px,100%);max-height:90vh;overflow:auto;
  background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.22)
}
.adjust-modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px
}
.adjust-modal-head h2{margin:2px 0 0}
.icon-close{
  border:0;background:#f1f3f1;width:38px;height:38px;border-radius:50%;
  font-size:24px;cursor:pointer
}
.adjust-record-info{
  padding:12px 14px;background:#f7f9f7;border:1px solid #e4eae6;
  border-radius:14px;margin-bottom:14px
}
.adjust-time-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.adjust-modal-panel input,
.adjust-modal-panel select,
.adjust-modal-panel textarea{width:100%}
.adjust-modal-panel textarea{resize:vertical;min-height:76px}
.adjust-actions{
  display:flex;justify-content:flex-end;gap:10px;margin-top:16px
}
.required{color:#b42318}
@media(max-width:700px){
  .adjust-time-grid{grid-template-columns:1fr}
  .adjust-modal{padding:10px}
  .adjust-modal-panel{padding:16px;border-radius:16px}
}


/* Lịch sử điều chỉnh chấm công */
.history-panel{width:min(760px,100%)}
.history-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.history-item{
  border:1px solid #e2e8e4;
  border-radius:14px;
  padding:14px;
  background:#fff;
}
.history-item.latest{
  border-color:#8ca894;
  box-shadow:0 0 0 2px rgba(53,92,74,.06);
}
.history-item-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.history-user{
  font-weight:700;
  color:#355c4a;
}
.history-latest-badge{
  display:inline-flex;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;
  background:#edf4ef;
  color:#355c4a;
  font-size:10px;
  font-weight:800;
}
.history-type{
  margin:8px 0 10px;
  font-weight:800;
}
.history-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.history-grid>div{
  padding:10px;
  border-radius:10px;
  background:#f7f9f7;
}
.history-grid small,
.history-reason small{
  display:block;
  color:#6b756f;
  margin-bottom:4px;
}
.history-reason{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #dfe6e1;
}
@media(max-width:760px){
  .history-grid{grid-template-columns:1fr 1fr}
  .history-item-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
  .history-grid{grid-template-columns:1fr}
}


/* Production complete: bảng công tháng + lịch sử cá nhân */
.attendance-month-card,.attendance-self-history-card{overflow:visible}
.attendance-month-toolbar{align-items:flex-start}
.attendance-month-controls{display:grid;grid-template-columns:180px 190px 1fr;gap:14px;align-items:end;margin-top:14px}
.attendance-month-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.attendance-month-controls input,.attendance-month-controls select{width:100%}
@media(max-width:900px){.attendance-month-controls{grid-template-columns:1fr 1fr}.attendance-month-buttons{grid-column:1/-1}}
@media(max-width:600px){.attendance-month-controls{grid-template-columns:1fr}.attendance-month-buttons{grid-column:auto}.attendance-month-buttons button{width:100%}}


/* Excel export */
.excel-export-btn{
  font-weight:800;
  border-color:#B8C9BF;
  background:#F4F8F5;
}
.excel-export-btn:disabled{
  opacity:.65;
  cursor:wait;
}


/* Xác nhận công tháng của nhân viên */
.attendance-confirmation-box{
  margin:14px 0 16px;
  padding:14px 16px;
  border:1px solid #DDE5E0;
  border-radius:14px;
  background:#F8FAF8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.attendance-confirmation-box.confirmed{
  border-color:#BFD5C7;
  background:#F0F7F2;
}
.attendance-confirmation-box.warning{
  border-color:#E7C98E;
  background:#FFF8E9;
}
.attendance-confirmation-box.pending{
  border-color:#DDE5E0;
  background:#F8FAF8;
}
.attendance-confirmation-copy{min-width:0}
.attendance-confirmation-title{
  font-weight:900;
  color:#355C4A;
  margin-bottom:4px;
}
.attendance-confirmation-box.warning .attendance-confirmation-title{
  color:#8A5A00;
}
@media(max-width:760px){
  .attendance-confirmation-box{
    flex-direction:column;
    align-items:stretch;
  }
  .attendance-confirmation-box .primary-btn{width:100%}
}


/* Operations suite: PWA, notifications, requests, profile edit, maintenance */
.notification-btn{position:relative;border:1px solid #dce5df;background:#fff;border-radius:999px;width:42px;height:42px;cursor:pointer;font-size:18px}.notification-badge{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}.notification-badge.hidden{display:none}.notification-list{display:flex;flex-direction:column;gap:10px}.notification-item{width:100%;display:flex;justify-content:space-between;text-align:left;border:1px solid #e2e8e4;background:#fff;border-radius:14px;padding:14px 16px;cursor:pointer}.notification-item.unread{background:#f1f7f3;border-color:#bad0c2}.notification-item small{display:block;color:#7a837e;margin-top:5px}.request-form{margin-bottom:22px}.request-grid,.profile-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.request-grid label,.profile-edit-grid label{display:flex;flex-direction:column;gap:6px;font-weight:700}.request-grid input,.request-grid select,.request-grid textarea,.profile-edit-grid input,.profile-edit-grid select,.profile-edit-grid textarea{width:100%}.full-span{grid-column:1/-1}.profile-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.install-hint{font-size:12px}.offline-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:#7a241d;color:#fff;padding:8px 14px;border-radius:999px;z-index:2000;font-weight:700}
@media(max-width:900px){.request-grid,.profile-edit-grid,.grid-2{grid-template-columns:1fr}.notification-btn{width:38px;height:38px}}


/* CN03 - lịch nhà hàng */
.cn03-schedule-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:12px 0 10px;
}
.cn03-schedule-heading h3{
  margin:2px 0 0;
  color:var(--green);
  font-size:22px;
}
.cn03-schedule-table{
  min-width:1080px;
}
.cn03-schedule-table th,
.cn03-schedule-table td{
  text-align:center;
  vertical-align:middle;
}
.cn03-schedule-table thead th{
  background:#fffbd1;
}
.cn03-schedule-table .cn03-sunday{
  background:#fff0e6;
}
.cn03-stt{
  width:58px;
  min-width:58px;
}
.cn03-name-col{
  min-width:210px;
  text-align:left !important;
}
.cn03-name-col small{
  display:block;
  margin-top:3px;
  color:#7a847f;
  font-weight:600;
}
.cn03-position-col{
  min-width:130px;
  text-align:left !important;
}
.cn03-group-row td{
  background:#fffda3;
  color:#294d3e;
  text-align:left !important;
  font-weight:900;
  letter-spacing:.02em;
}
.cn03-manager-row td{
  background:#fbfdfb;
}
.cn03-manager-row .cn03-name-col b::after{
  content:" • QL";
  color:#8a6a00;
  font-size:11px;
  font-weight:900;
}
.cn03-summary-title td{
  background:#fffda3;
  font-weight:900;
  text-align:left !important;
}
.cn03-summary-row td{
  background:#fafcf9;
  font-weight:700;
}
.cn03-summary-row td:first-child{
  text-align:center !important;
}
.cn03-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #e3e7df;
  border-radius:14px;
  background:#fffef4;
}
.cn03-legend-item{
  display:flex;
  gap:7px;
  align-items:center;
  min-width:160px;
}
.cn03-legend-item b{
  min-width:42px;
  color:#8b2e1f;
}
.cn03-count-note{
  width:100%;
  color:#6f7772;
  font-size:12px;
  border-top:1px dashed #dedfd5;
  padding-top:8px;
}
.schedule-off-value{
  color:#c54634;
  font-weight:800;
}
.manager-first-badge{
  display:inline-flex;
  margin-left:7px;
  padding:2px 6px;
  border-radius:999px;
  background:#fff3c9;
  color:#805c00 !important;
  font-size:9px !important;
  font-weight:900 !important;
}
@media(max-width:760px){
  .cn03-schedule-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* CN03 business rules v2 */
.cn03-manager-badge,
.cn03-pt-badge{
  display:inline-flex;
  margin-top:5px;
  margin-right:5px;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
}
.cn03-manager-badge{
  background:#eef3ef;
  color:#355c4a;
}
.cn03-manager-badge.foh{
  background:#355c4a;
  color:#fff;
}
.cn03-pt-badge{
  background:#f6f1e7;
  color:#725c31;
}
.cn03-hc-support-cell{
  background:#fff8df !important;
}
.schedule-value.hc-support{
  color:#8a5a00;
  font-weight:900;
}
.hc-support-select{
  border-color:#d6ad52 !important;
  background:#fff8df !important;
}
.cn03-support-summary td{
  background:#fff8df !important;
  color:#725000;
}


.cn03-flex-badge{
  display:inline-flex;
  margin-top:5px;
  margin-right:5px;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
  background:#eef4fb;
  color:#355a78;
}


/* Hỗ trợ chéo chi nhánh */
.support-branch-badge{
  display:inline-flex !important;
  margin-left:7px;
  padding:2px 7px;
  border-radius:999px;
  background:#EEF4FB;
  color:#355A78 !important;
  font-size:9px !important;
  font-weight:900 !important;
}
.support-projected-cell{
  background:#F4F8FC !important;
}
.cn03-schedule-table .support-projected-cell{
  background:#F4F8FC !important;
}


/* CN03 - chuyển động nhân sự xuống Hậu cần/Pha chế theo ngày */
.cn03-hc-projected-row td{
  background:#fffaf0;
}
.cn03-hc-projected-row .cn03-name-col,
.cn03-hc-projected-row .cn03-position-col{
  background:#fff5dc;
}
.cn03-hc-moved-badge{
  display:inline-flex;
  margin-top:5px;
  margin-right:5px;
  padding:3px 7px;
  border-radius:999px;
  background:#fff0c7;
  color:#805700;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
}
.cn03-hc-projected-cell{
  background:#fff2c9 !important;
}
.cn03-empty-projected{
  opacity:.35;
}
.cn03-moved-source-cell{
  background:#f6f8f7 !important;
}
.cn03-moved-source-label{
  color:#7c6a43;
  font-weight:900;
}


/* INSTALL APP - robust UI */
.install-app-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  flex:0 0 auto;
}
.install-app-btn.installed{
  opacity:.7;
  cursor:default;
  background:#f3f5f3;
}
.install-floating-btn{
  display:none;
  position:fixed;
  right:14px;
  bottom:18px;
  z-index:150;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  background:var(--green);
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 28px rgba(39,70,56,.24);
}
.install-guide-card{
  max-width:500px;
}
.install-guide-steps{
  display:grid;
  gap:10px;
  margin:18px 0;
}
.install-guide-step{
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:start;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fafbf9;
}
.install-guide-step span{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#fff;
  font-weight:900;
}
.install-guide-step p{
  margin:4px 0 0;
  line-height:1.45;
}
@media(max-width:850px){
  .install-floating-btn:not(.hidden){
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .header-actions{
    min-width:0;
  }
  #buildBadge{
    display:none;
  }
}
@media(max-width:520px){
  .install-app-btn{
    padding:8px 8px;
    font-size:11px;
  }
  .install-floating-btn{
    right:10px;
    bottom:12px;
    padding:11px 14px;
    font-size:12px;
  }
}


/* Đồng bộ ChiNhanh NHAN_SU -> Lịch làm */
.moved-branch-badge{
  display:inline-flex !important;
  margin-left:7px;
  margin-top:4px;
  padding:2px 7px;
  border-radius:999px;
  background:#F3EFE8;
  color:#7A5A2A !important;
  font-size:9px !important;
  font-weight:900 !important;
}
.moved-roster-cell{
  background:#FAF8F4 !important;
  opacity:.82;
}


/* Chấm công: phản hồi tức thì + chống bấm liên tục khi API chậm */
.attendance-round{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.attendance-round.attendance-processing{
  pointer-events:none !important;
  cursor:wait !important;
  opacity:.82;
  transform:none !important;
}
.attendance-btn-spinner{
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-3px;
  margin-right:7px;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:#fff;
  border-radius:50%;
  animation:jolieAttendanceSpin .8s linear infinite;
}
.processing-message{
  color:#6e5a25 !important;
  background:#fff8df;
  border:1px solid #ead69e;
  border-radius:10px;
  padding:9px 10px;
}
.success-message{
  color:#2f654d !important;
  background:#eef7f1;
  border:1px solid #c9dfd0;
  border-radius:10px;
  padding:9px 10px;
}
@keyframes jolieAttendanceSpin{
  to{transform:rotate(360deg)}
}


/* Lịch: đồng bộ roster + tốc độ */
.schedule-slot-badge{
  display:inline-flex !important;
  margin-left:7px;
  margin-top:4px;
  padding:2px 7px;
  border-radius:999px;
  background:#FFF2CF;
  color:#7A5700 !important;
  font-size:9px !important;
  font-weight:900 !important;
}
.schedule-roster-warning{
  margin-bottom:12px;
}


/* Ca ngày cũ thiếu OUT: cảnh báo nhưng không khóa ngày mới */
.old-open-warning{
  color:#9a5b16 !important;
  background:#fff5e6;
  border:1px solid #efc98f;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  line-height:1.45;
}
.success-with-warning{
  color:#2f654d !important;
  background:#f2f8f3;
  border:1px solid #c9dfd0;
  border-radius:12px;
  padding:10px 12px;
  line-height:1.45;
}
.attendance-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}