/* Giao diện dùng chung web Việt Nhật — trang chính và Chức năng nội bộ */
:root{
    --blue:#00552B; --blue-d:#003f20; --green-l:#5DC24C; --green-l2:#e8f6e4; --ink:#06351d; --bg:#f5faf6; --card:#ffffff;
    --red:#dc2626; --amber:#c2710c; --green:#1e7d32; --sky:#0d7a5f; --vang:#FFCB01;
    --border:#dcece1; --text:#1f2a24; --muted:#63776b;
    --grad:linear-gradient(135deg,#00552B,#0b7a3c);
    --grad-l:linear-gradient(135deg,#5DC24C,#3da637);
    --shadow:0 1px 2px rgba(6,53,29,.05), 0 8px 24px rgba(0,85,43,.08);
    --shadow-lg:0 12px 40px rgba(6,53,29,.16);
    --r:16px;
  }
  *{box-sizing:border-box; margin:0; padding:0; font-family:"Segoe UI","Inter",Arial,sans-serif;}
  html{scroll-behavior:smooth;}
  body{background:
      radial-gradient(900px 400px at 85% -10%, rgba(93,194,76,.16), transparent 60%),
      radial-gradient(700px 380px at -10% 20%, rgba(0,85,43,.09), transparent 60%),
      var(--bg);
    color:var(--text); min-height:100vh;}
  button{font-family:inherit;}
  ::selection{background:#c9ecc2;}

  /* ===== ĐĂNG NHẬP ===== */
  #login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
    background:var(--grad);}
  .login-card{background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-radius:22px; padding:38px 32px;
    width:100%; max-width:390px; box-shadow:var(--shadow-lg); animation:fadeUp .4s cubic-bezier(.2,.8,.3,1);}
  .login-card h1{font-size:21px; color:var(--ink); text-align:center;}
  .login-card p.sub{text-align:center; color:var(--muted); font-size:13px; margin:4px 0 18px;}

  #app{display:none;}

  /* ===== HEADER + MENU 1 HÀNG ===== */
  header.top{background:var(--grad); color:#fff; padding:12px 22px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
    box-shadow:0 4px 20px rgba(0,85,43,.28);}
  header.top h1{font-size:17px; font-weight:700; letter-spacing:.2px;}
  header.top .who{font-size:13px; display:flex; align-items:center; gap:10px;}
  header.top .who b{background:rgba(255,255,255,.16); padding:4px 12px; border-radius:999px; font-weight:600;}

  nav{max-width:1160px; margin:0 auto; width:100%; padding:12px 18px 0; position:relative; z-index:60;}
  .nav-burger{display:none;}
  .nav-groups{display:flex; gap:8px; flex-wrap:nowrap; align-items:center;}
  .nav-group{position:relative;}
  .g-btn{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border);
    color:#2c463a; padding:10px 16px; font-size:13.5px; font-weight:700; cursor:pointer; border-radius:999px;
    box-shadow:var(--shadow); transition:all .18s ease; white-space:nowrap;}
  .g-btn .car{font-size:10px; opacity:.55; transition:transform .18s;}
  .g-btn:hover{color:var(--blue); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,85,43,.18);}
  .g-btn.cur,.g-btn.active{background:var(--grad); color:#fff; border-color:transparent;
    box-shadow:0 6px 16px rgba(0,85,43,.35);}
  .g-btn.cur .car{opacity:.85;}
  .nav-group.open .g-btn .car{transform:rotate(180deg);}
  .g-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:250px; background:#fff;
    border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px;
    display:none; z-index:70;}
  .nav-group.open .g-menu{display:block; animation:fadeUp .16s ease;}
  .g-menu button{display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
    padding:10px 13px; border-radius:9px; font-size:13.5px; font-weight:600; color:#2c463a; transition:all .13s;}
  .g-menu button:hover{background:#e8f6e4; color:var(--blue); padding-left:17px;}
  .g-menu button.active{background:var(--grad); color:#fff;}

  main{max-width:1160px; margin:0 auto; padding:16px 16px 70px;}
  main > section{animation:fadeUp .28s cubic-bezier(.2,.8,.3,1);}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

  .card{background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:20px;
    margin-bottom:16px; box-shadow:var(--shadow); transition:box-shadow .2s;}
  .card:hover{box-shadow:0 2px 4px rgba(6,53,29,.05), 0 14px 34px rgba(0,85,43,.10);}
  h2{font-size:16.5px; margin-bottom:14px; color:var(--ink);}
  h3{font-size:14px; margin:14px 0 8px; color:var(--ink);}
  label{display:block; font-size:12.5px; font-weight:600; margin:10px 0 4px; color:#2c463a;}
  input,select,textarea{width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:11px;
    font-size:14px; background:#fbfefb; transition:border-color .15s, box-shadow .15s;}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,85,43,.15);}
  textarea{resize:vertical; min-height:56px;}
  /* ===== LƯỚI BIỂU MẪU: máy tính nhiều cột, điện thoại một cột ===== */
  .grid2,.grid3,.grid4{display:grid; gap:4px 12px;}
  .grid2{grid-template-columns:repeat(auto-fit,minmax(224px,1fr));}
  .grid3{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));}
  .grid4{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));}
  .grid2>div,.grid3>div,.grid4>div{min-width:0;}
  .grid2>div>label:first-child,.grid3>div>label:first-child,.grid4>div>label:first-child{margin-top:6px;}
  @media(max-width:540px){ .grid2,.grid3,.grid4{grid-template-columns:1fr;} }

  /* ===== Ô GÕ TÌM CÓ GỢI Ý (thay danh sách chọn dài) ===== */
  .otim{position:relative;}
  .otim-g{display:none; position:absolute; left:0; right:0; top:100%; z-index:70; background:#fff;
    border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); margin-top:3px;
    padding:4px; max-height:300px; overflow:auto; min-width:260px;}
  .otim-g.mo{display:block;}
  .otim-g button{display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; background:none;
    border:0; border-radius:9px; padding:7px 9px; font-size:13.5px; cursor:pointer; color:var(--text);
    margin:0; box-shadow:none; font-weight:500;}
  .otim-g button:hover{transform:none; filter:none; box-shadow:none;}
  .otim-g button i{font-style:normal; color:var(--muted); font-size:12px; margin-left:auto; white-space:nowrap;}
  .otim-g button.dau{background:var(--green-l2); color:var(--blue-d);}
  .otim-rong{padding:8px 9px; color:var(--muted); font-size:13px;}
  .row{display:flex; gap:12px; flex-wrap:wrap;}
  .row>div{flex:1; min-width:170px;}

  .btn{background:var(--grad); color:#fff; border:none; padding:10px 22px; border-radius:11px;
    font-size:14px; font-weight:700; cursor:pointer; margin-top:14px;
    box-shadow:0 4px 14px rgba(0,85,43,.30); transition:all .18s ease;}
  .btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,85,43,.38); filter:brightness(1.05);}
  .btn:active{transform:translateY(1px); box-shadow:0 2px 6px rgba(0,85,43,.3);}
  .btn.small{padding:6px 13px; font-size:12.5px; margin-top:0; border-radius:9px;}
  .btn.gray,.btn.secondary{background:#e9f2eb; color:#2c463a; box-shadow:0 2px 8px rgba(99,119,107,.15);}
  .btn.gray:hover,.btn.secondary:hover{background:#dbe9de;}
  .btn.red{background:linear-gradient(135deg,#ef4444,#c81e1e); box-shadow:0 3px 10px rgba(220,38,38,.3);}
  .btn.green{background:linear-gradient(135deg,#5DC24C,#2e8b3a); box-shadow:0 3px 10px rgba(45,138,52,.3);}
  .btn.amber{background:linear-gradient(135deg,#f59e0b,#c2710c); box-shadow:0 3px 10px rgba(217,119,6,.3);}

  .msg{margin-top:12px; padding:10px 13px; border-radius:11px; font-size:13.5px; display:none;}
  .msg.ok{display:block; background:#dcfce7; color:#15803d; animation:fadeUp .2s;}
  .msg.err{display:block; background:#fee2e2; color:#b91c1c; animation:fadeUp .2s;}

  table.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; border:1px solid var(--border);
    border-radius:12px; overflow:hidden;}
  table.tbl th,table.tbl td{border-bottom:1px solid var(--border); border-right:1px solid #eaf3ec;
    padding:9px 10px; text-align:left; vertical-align:top;}
  table.tbl th:last-child,table.tbl td:last-child{border-right:none;}
  table.tbl tr:last-child td{border-bottom:none;}
  table.tbl th{background:#eef8ef; color:#0d5c33; font-weight:700; position:sticky; top:0; z-index:1;}
  table.tbl tr:nth-child(even) td{background:#fbfefb;}
  table.tbl tbody tr, table.tbl tr{transition:background .12s;}
  table.tbl tr:hover td{background:#e8f6e4;}

  .st{font-weight:700; font-size:12px; padding:3px 10px; border-radius:999px; display:inline-block;}
  .st.pending{color:var(--amber); background:#fef3c7;}
  .st.approved{color:var(--green); background:#dcfce7;}
  .st.rejected{color:var(--red); background:#fee2e2;}
  .st.info{color:var(--sky); background:#e0f2fe;}
  .muted{color:var(--muted); font-size:13px;}

  .cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
  .cal-head h2{margin:0;}
  .cal-nav{display:flex; gap:8px;}
  .cal-nav button{background:#fff; border:1px solid var(--border); border-radius:999px; padding:7px 16px;
    cursor:pointer; font-size:14px; box-shadow:var(--shadow); font-weight:700; color:#2c463a; transition:all .15s;}
  .cal-nav button:hover{color:var(--blue); transform:translateY(-1px);}

  table.calendar{width:100%; border-collapse:separate; border-spacing:5px; table-layout:fixed;}
  table.calendar th{border:none; padding:9px 4px; font-size:12.5px; background:#dff0e2; border-radius:12px; color:#0d5c33;}
  table.calendar th.sun{color:var(--red); background:#fee2e2;}
  table.calendar td{border:none; vertical-align:top; height:88px; padding:6px; font-size:11.5px; background:#fff;
    border-radius:14px; box-shadow:0 1px 4px rgba(0,85,43,.07); transition:transform .15s, box-shadow .15s;}
  table.calendar td:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,85,43,.15);}
  table.calendar td .dnum{font-weight:700; font-size:13px; margin-bottom:3px;}
  table.calendar td.sun{background:#fff5f5;}
  table.calendar td.sun .dnum{color:var(--red);}
  table.calendar td.hol{background:#fff7ed;}
  table.calendar td.hol .hname{color:#c2410c; font-size:10.5px; font-weight:700;}
  table.calendar td.other{background:transparent; box-shadow:none;}
  table.calendar td.other:hover{transform:none;}
  table.calendar td.today{outline:2.5px solid var(--blue); outline-offset:-2px;}

  .tag{display:block; border-radius:7px; padding:2px 5px; margin-bottom:2px; font-size:11px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .tag.full{color:var(--green); background:#eaf8e6;}
  .tag.half{color:var(--amber); background:#fffbeb;}
  .tag.late{color:var(--sky); background:#f0f9ff;}
  .tag.pen{box-shadow:inset 0 0 0 1.5px var(--red);}
  .tag.tang{color:#0f172a; background:#eef2f6; font-weight:700;}
  .tag.hi{color:var(--red); background:#fef2f2; font-weight:700;}
  .name-tang{color:#0f172a; font-weight:700;}
  .name-hi{color:var(--red); font-weight:700;}
  .name-full{color:var(--green); font-weight:600;} .name-half{color:var(--amber); font-weight:600;} .name-late{color:var(--sky); font-weight:600;}

  ul.daylist{list-style:none;}
  ul.daylist li{display:flex; gap:14px; padding:9px 12px; border-bottom:1px solid var(--border);
    font-size:13.5px; align-items:baseline; border-radius:8px; transition:background .12s;}
  ul.daylist li:hover{background:#eef8ef;}
  ul.daylist li .d{width:150px; flex-shrink:0; font-weight:600;}
  ul.daylist li.sun{background:#fff5f5;} ul.daylist li.sun .d{color:var(--red);}
  ul.daylist li.hol{background:#fff7ed;}
  ul.daylist li .names em{color:#93a89a; font-style:italic;}

  .filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px;}
  .filters>div{min-width:150px;}
  .chk{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:400; margin:4px 0;}
  .chk input{width:auto; box-shadow:none;}
  .permbox{border:1px solid var(--border); border-radius:10px; padding:6px 8px; max-height:110px; overflow:auto; background:#fbfefb;}

  .modal-bg{position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; z-index:900; padding:16px; animation:fadeIn .2s;}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  .modal{background:#fff; border-radius:18px; padding:22px; max-width:460px; width:100%; max-height:82vh;
    overflow:auto; box-shadow:var(--shadow-lg); animation:fadeUp .25s cubic-bezier(.2,.8,.3,1);}


  .sent-anim{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(30,41,59,.35); backdrop-filter:blur(2px); z-index:999; animation:sentFade 1.8s ease forwards; pointer-events:none;}
  .sent-circle{width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,#5DC24C,#2e8b3a);
    color:#fff; font-size:48px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 34px rgba(45,138,52,.45); animation:sentPop .45s cubic-bezier(.18,1.6,.4,1);}
  .sent-text{margin-top:14px; color:#fff; font-size:17px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.35);
    animation:sentPop .5s .1s cubic-bezier(.18,1.6,.4,1) backwards;}
  @keyframes sentPop{from{transform:scale(0);} to{transform:scale(1);}}
  @keyframes sentFade{0%,70%{opacity:1;} 100%{opacity:0;}}

  div[style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;}

  /* ===== MOBILE ===== */
  @media(max-width:760px){
    header.top{padding:10px 14px;}
    header.top h1{font-size:14.5px;}
    nav{padding:10px 12px 0; position:sticky; top:0;
      background:linear-gradient(var(--bg),var(--bg)); z-index:80;}
    .nav-burger{display:flex; align-items:center; gap:8px; width:100%; background:#fff;
      border:1px solid var(--border); border-radius:14px; padding:12px 16px; font-size:14.5px; font-weight:700;
      color:#0d5c33; cursor:pointer; box-shadow:var(--shadow);}
    .nav-groups{display:none; position:absolute; top:calc(100% + 4px); left:12px; right:12px;
      background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg);
      padding:12px; flex-direction:column; gap:2px; max-height:72vh; overflow:auto; z-index:90;
      align-items:stretch; animation:fadeUp .2s ease;}
    .nav-group{width:100%;}
    .g-btn{justify-content:flex-start; text-align:left;}
    .g-menu button{text-align:left;}
    nav.open .nav-groups{display:flex;}
    .nav-group{position:static;}
    .g-btn{width:100%; border:none; box-shadow:none; border-radius:10px; padding:9px 10px;}
    .g-btn:not(.single){color:#8aa093; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px;
      pointer-events:none; padding-bottom:2px;}
    .g-btn:not(.single) .car{display:none;}
    .g-btn.single{font-size:14px; color:#2c463a;}
    .g-btn.single.active{background:var(--grad); color:#fff;}
    .g-menu{display:block; position:static; min-width:0; border:none; box-shadow:none; padding:0 0 6px 6px;}
    .g-menu button{font-size:14px; padding:10px 12px;}
    main{padding:12px 10px 70px;}
    .card{padding:14px 12px; border-radius:14px;}
    .btn{padding:12px 20px;}
    input,select,textarea{font-size:16px !important;} /* tránh iOS tự phóng to khi focus */
    table.calendar{border-spacing:3px;}
    table.calendar td{height:64px; padding:4px; border-radius:10px; font-size:10.5px;}
    table.calendar td .dnum{font-size:12px;}
    table.calendar th{padding:6px 2px; font-size:10.5px; border-radius:8px;}
    ul.daylist li .d{width:108px;}
  }

  /* ===== THƯƠNG HIỆU VIỆT NHẬT ===== */
  .brand-dot{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    margin-right:7px; vertical-align:-8px;}
  .brand-dot img{width:100%; height:100%; object-fit:contain; display:block;}
  .lg-logo{width:92px; height:92px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;}
  .lg-logo img{width:100%; height:100%; object-fit:contain; display:block;}
  header.top{border-bottom:3px solid var(--green-l);}
  .g-btn.cur,.g-btn.active,.g-menu button.active{background:var(--grad);}
  .st.approved{color:#1e7d32; background:#e2f5df;}
  table.tbl th{background:var(--green-l2); color:var(--blue);}
  table.calendar th{background:var(--green-l2); color:var(--blue);}
  table.calendar td.today{outline-color:var(--green-l);}
  .btn.green{background:var(--grad-l); box-shadow:0 3px 10px rgba(93,194,76,.35);}


  /* ===== CỨU HỘ ẮC QUY ===== */
  .ch-toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
  .ch-toolbar .btn{margin-top:0;}
  .ch-filters{margin-bottom:10px;} .ch-filters>div{min-width:130px; flex:1;}
  .ch-phan{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:8px; font-size:13px;}
  .ch-phan select{width:auto; padding:5px 8px; font-size:13px !important;}
  .ch-phan .btn{margin-top:0;}
  th.ch-sort{cursor:pointer; user-select:none; white-space:nowrap;}
  th.ch-sort::after{content:""; font-size:11px;}      /* chưa sắp xếp thì không hiện mũi tên */
  th.ch-sort.up::after{content:" ↑"; opacity:1;} th.ch-sort.down::after{content:" ↓"; opacity:1;}
  tr.ch-huy td{opacity:.45; text-decoration:line-through;}
  tr.ch-huy td .btn, tr.ch-huy td .st{text-decoration:none;}
  .ch-acts{display:flex; gap:4px; flex-wrap:wrap;} .ch-acts .btn{margin-top:0;}
  .ch-right{text-align:right;}
  button.ch-tt{border:none; background:none; padding:0; cursor:pointer; font-family:inherit;}
  button.ch-tt .st{cursor:pointer; box-shadow:0 0 0 1px rgba(0,85,43,.15);}
  .ch-chip{display:inline-block; background:var(--green-l2); color:var(--blue); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600; margin:1px 0;}
  .ch-gc{min-width:120px; min-height:20px; padding:2px 4px; border-radius:6px; outline:none;} .ch-gc:focus{background:#fffbe6; box-shadow:0 0 0 2px var(--green-l);}
  .ch-modal .modal{position:relative; max-height:88vh;}
  .ch-x{position:absolute; top:10px; right:10px; border:none; background:#eef5f0; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; color:#2c463a;}
  .ch-info{background:var(--green-l2); border-radius:12px; padding:10px 12px; font-size:13.5px; margin-bottom:12px; line-height:1.5;}
  .ch-info>div{display:flex; gap:12px; align-items:baseline; padding:2px 0;}
  .ch-info>div+div{border-top:1px dashed rgba(0,85,43,.13);}
  .ch-info .t{flex:0 0 118px; color:var(--muted); font-size:12.5px;}
  .ch-info .n{flex:1; min-width:0;}
  @media(max-width:520px){ .ch-info>div{flex-wrap:wrap; gap:2px;} .ch-info .t{flex:1 1 100%;} }
  .ch-khach-box{margin:6px 0;} .ch-khach-hit{background:#fff8e1; border:1px solid #ffe08a; border-radius:12px; padding:8px 12px; font-size:13px;}
  .ch-ls-mini{margin-top:6px; font-size:12px;} .ch-ls-mini div{padding:3px 0; border-top:1px dashed #f0dc9a; cursor:pointer;} .ch-ls-mini div:hover{color:var(--blue);}
  .ch-steps{display:flex; justify-content:space-between; margin:6px 0 14px; position:relative;}
  .ch-steps::before{content:""; position:absolute; left:8%; right:8%; top:9px; height:3px; background:#dcece1; z-index:0;}
  .ch-step{flex:1; text-align:center; position:relative; z-index:1; font-size:11.5px; color:var(--muted);}
  .ch-step .dot{width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid #dcece1; margin:0 auto 4px;}
  .ch-step.ok{color:var(--blue); font-weight:700;} .ch-step.ok .dot{background:var(--green-l); border-color:var(--blue);}
  .ch-timeline{border-left:3px solid var(--green-l2); margin-left:8px; padding-left:14px;}
  .ch-timeline .ch-tl{position:relative; margin-bottom:12px; font-size:13px;} .ch-timeline .ch-tl::before{content:""; position:absolute; left:-21px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--green-l); border:2px solid #fff;}
  .ch-thaydoi{margin:4px 0 0 16px; font-size:12.5px;} .ch-thaydoi s{color:var(--red); opacity:.7;}
  .ch-anh{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
  /* hội thoại với khách (link khách hàng) */
  .ch-tin-ds{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px;}
  .ch-tin{max-width:88%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; background:#f4f7f5; border:1px solid var(--border);}
  .ch-tin.nv{align-self:flex-end; background:var(--green-l2); border-color:var(--green-l);}
  .ch-tin-h{font-size:12px; margin-bottom:2px;}
  .ch-anh img{width:84px; height:84px; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid var(--border);}
  .ch-thumb{position:relative;} .ch-thumb img{width:84px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--border);}
  .ch-thumb button{position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:none; background:var(--red); color:#fff; font-size:11px; cursor:pointer;}
  .ch-cam{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 8px;}
  .ch-kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:10px 0 14px;}
  .ch-kpi>div{background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px; text-align:center; box-shadow:var(--shadow);}
  .ch-kpi .n{font-size:20px; font-weight:800; color:var(--blue);} .ch-kpi .t{font-size:11.5px; color:var(--muted); margin-top:2px;}
  .ch-kpi.small .n{font-size:16px;}
  .ch-grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px;}
  .ch-tk-card{margin-bottom:0;} .ch-tk-card h3{margin-top:0;}
  .ch-bar{background:var(--green-l2); border-radius:6px; height:10px; overflow:hidden;} .ch-bar>div{height:100%; background:var(--grad);}
  .ch-cols{display:flex; gap:4px; align-items:flex-end; height:120px; overflow-x:auto; padding-bottom:18px; position:relative;}
  .ch-col{flex:1; min-width:16px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative;}
  .ch-col .b{width:100%; background:var(--grad-l); border-radius:4px 4px 0 0; min-height:2px;} .ch-col .l{position:absolute; bottom:-16px; font-size:9.5px; color:var(--muted);}
  .ch-xe-row{margin-bottom:4px;} .ch-xe-row>div{min-width:90px;} .ch-xe-row .btn{align-self:flex-start;}
  /* thẻ yêu cầu (điện thoại) */
  .ch-card{border:1px solid var(--border); border-left:5px solid var(--amber); border-radius:14px; padding:10px 12px; margin-bottom:10px; background:#fff; box-shadow:var(--shadow);}
  .ch-card.nhan{border-left-color:var(--sky);} .ch-card.xuly{border-left-color:var(--blue);} .ch-card.xong{border-left-color:var(--green-l);}
  .ch-card-h{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; font-size:13px;}
  .ch-card-b{font-size:13.5px; line-height:1.6;} .ch-card-b a{color:var(--blue); text-decoration:none;}
  .ch-card-f{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;} .ch-card-f .btn{margin-top:0;}
  .ch-row-click{cursor:pointer;} .ch-row-click:hover td{background:var(--green-l2) !important;}
  /* bảng → thẻ trên điện thoại */
  @media(max-width:760px){
    table.rt thead{display:none;}
    table.rt, table.rt tbody, table.rt tr, table.rt td{display:block; width:100%;}
    table.rt tr{border:1px solid var(--border); border-radius:12px; margin-bottom:8px; padding:4px 0; background:#fff;}
    table.rt td{border:none !important; padding:5px 12px; display:flex; gap:10px; align-items:flex-start; text-align:left !important;}
    table.rt td::before{content:attr(data-l); flex:0 0 33%; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; padding-top:2px;}
    table.rt td .rt-noi{flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
    table.rt td:empty, table.rt td[data-l=""]::before{display:none;}
    table.rt td[data-l=""]{justify-content:flex-end;}
    table.rt tr:nth-child(even) td{background:#fff;}
    .ch-filters>div{min-width:calc(50% - 6px); flex:1 1 calc(50% - 6px);}
    .ch-filters>div select,.ch-filters>div input{width:100%; min-width:0;}
    .ch-toolbar .btn{flex:1 1 auto; min-width:46%;}
    .ch-steps .t{font-size:10px;}
    .ch-grid2{grid-template-columns:1fr;}
  }

  /* ===== QUẢN TRỊ ===== */
  .qt-tag{display:inline-block; background:var(--green-l2); color:var(--blue); border-radius:999px;
    padding:2px 9px; font-size:11.5px; font-weight:700; margin:1px 0; white-space:nowrap;}
  .qt-tag.b{background:#e0efff; color:#1b4e8f;} .qt-tag.g{background:#e2f5df; color:#1e7d32;} .qt-tag.o{background:#fff3df; color:#9a5b00;}
  .qt-quyen{display:flex; flex-direction:column; gap:1px; min-width:190px;}
  .qt-quyen .chk{font-size:12.5px; margin:0; padding:1px 0;}
  .qt-quyen .chk.tucv{opacity:.72;}
  .ch-center{text-align:center;}
  .rt-noi{min-width:0;}
  td code, .qt-code{background:#eef5f0; border-radius:6px; padding:1px 6px; font-size:12.5px;}

  /* ===== ĐIỆN THOẠI: THANH ĐIỀU HƯỚNG DƯỚI ĐÁY ===== */
  .botnav{display:none;}
  .sheet-bg{display:none;}
  @media(max-width:760px){
    nav{display:none !important;}
    header.top{position:sticky; top:0; z-index:85; padding:9px 12px calc(9px);}
    header.top h1{font-size:14px; line-height:1.25;}
    header.top .who{font-size:12px; gap:6px;}
    header.top .who b{padding:3px 9px; font-size:11.5px; max-width:44vw; overflow:hidden;
      text-overflow:ellipsis; white-space:nowrap;}
    main{padding:12px 10px calc(104px + env(safe-area-inset-bottom));}

    .botnav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95; background:#fff;
      border-top:1px solid var(--border); box-shadow:0 -6px 20px rgba(6,53,29,.12);
      padding:5px 4px calc(5px + env(safe-area-inset-bottom));}
    .botnav button{flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
      background:none; border:none; cursor:pointer; padding:14px 2px; border-radius:13px;
      font-size:13px; font-weight:700; color:#63776b; transition:background .15s,color .15s;}
    .botnav button .tx{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .botnav button.cur{color:var(--blue); background:var(--green-l2);}
    .botnav button:active{transform:scale(.96);}

    .sheet-bg{display:flex; position:fixed; inset:0; background:rgba(6,53,29,.42); z-index:120;
      align-items:flex-end; animation:fadeIn .16s ease;}
    .sheet{background:#fff; width:100%; border-radius:22px 22px 0 0; padding:14px 14px calc(18px + env(safe-area-inset-bottom));
      max-height:76vh; overflow:auto; box-shadow:0 -10px 40px rgba(6,53,29,.3); animation:sheetUp .22s cubic-bezier(.2,.8,.3,1);}
    @keyframes sheetUp{from{transform:translateY(100%);} to{transform:none;}}
    .sheet .grip{width:42px; height:4px; border-radius:99px; background:#d6e5da; margin:0 auto 12px;}
    .sheet h3{margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);}
    .sheet button.it{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none;
      background:#f7fbf8; margin-bottom:7px; padding:14px 14px; border-radius:14px; font-size:15px;
      font-weight:600; color:#2c463a; cursor:pointer;}
    .sheet button.it.active{background:var(--grad); color:#fff;}

    /* bảng dài: cuộn ngang mượt + chữ gọn */
    table.tbl{font-size:12.5px;}
    table.tbl th,table.tbl td{padding:8px 8px;}
    .row{gap:8px;} .row>div{min-width:100%;}
    .filters>div{min-width:100%;}
    .modal{border-radius:18px; padding:18px; max-height:86vh;}
    .btn.small{padding:8px 13px;}
    h2{font-size:15.5px;}
  }
  /* ===== MÁY TÍNH BẢNG ===== */
  @media(min-width:761px) and (max-width:1100px){
    nav{padding:10px 14px 0;}
    .nav-groups{flex-wrap:wrap; gap:6px;}
    .g-btn{padding:9px 13px; font-size:13px;}
    main{padding:14px 14px 60px;}
    .row>div{min-width:200px;}
  }
  @media(min-width:1101px){ main{padding-bottom:50px;} }

  /* ===== THẺ GIAO HÀNG (Nhận yêu cầu) + TIMELINE ===== */
  .ch-card.gh{border-left-width:5px; border-left-color:#2563eb; background:#f6faff;}
  .ch-card.gh.do{border-left-color:#dc2626;}
  .ch-card.gh.vang{border-left-color:#d97706;}
  .ch-card.gh.xanh{border-left-color:#2563eb;}
  .ch-card.gh.la{border-left-color:#1e7d32;}
  .ch-card.gh.xam{border-left-color:#9ca3af; opacity:.75;}
  .gh-dau{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px;}
  .gh-nhan{background:#2563eb; color:#fff; border-radius:6px; padding:2px 8px;
    font-size:10.5px; font-weight:800; letter-spacing:.7px;}
  .gh-than{display:grid; gap:4px;}
  .gh-than>div{display:flex; gap:10px; font-size:13.5px;}
  .gh-than .t{flex:0 0 108px; color:var(--muted); font-size:12px;}
  .gh-than .n{flex:1; min-width:0;}
  .ch-tl{position:relative; padding-left:0;}
  .ch-tl-i{display:flex; gap:12px; align-items:flex-start; padding:8px 0; font-size:13.5px; position:relative;}
  .ch-tl-i+.ch-tl-i{border-top:1px solid var(--border);}
  .ch-tl-c{flex:0 0 12px; width:12px; height:12px; border-radius:50%; background:#9ca3af; margin-top:4px;}
  .ch-tl-i.do .ch-tl-c{background:#dc2626;} .ch-tl-i.vang .ch-tl-c{background:#d97706;}
  .ch-tl-i.xanh .ch-tl-c{background:#2563eb;} .ch-tl-i.la .ch-tl-c{background:#1e7d32;}
  .ch-tl-n{flex:1; min-width:0;}
  .ch-tl-t{font-size:11.5px; color:var(--muted);}
  @media(max-width:600px){ .gh-than>div{flex-wrap:wrap; gap:2px;} .gh-than .t{flex:1 1 100%;} }

  /* ===== Ô CHỌN NGÀY / THÁNG + LỊCH TIẾNG VIỆT (dùng chung 2 trang) ===== */
  /* ----- ô chọn ngày / tháng + lịch tiếng Việt ----- */
  .nb-ong{display:inline-flex;align-items:center;gap:3px}
  .nb-ongay{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
    border-radius:10px;padding:7px 11px;font-size:13.5px;color:var(--text);cursor:pointer;font-family:inherit;
    min-width:132px;justify-content:space-between}
  .nb-ongay:hover{border-color:var(--green-l)}
  .nb-ongay-i{font-size:10px;color:var(--muted)}
  .nb-ongay-x{background:none;border:0;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
  .nb-ongay-x:hover{color:var(--red)}
  .nb-tu{font-size:13px;color:var(--muted);margin-right:2px}
  .nb-lich{position:fixed;z-index:999;background:#fff;border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow-lg);padding:10px;width:286px;animation:fadeUp .14s ease}
  .nb-lich-d{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
  .nb-lich-d b{font-size:14px;color:var(--blue-d)}
  .nb-lich-d button{background:var(--green-l2);border:0;border-radius:8px;width:30px;height:30px;
    font-size:16px;color:var(--blue-d);cursor:pointer;line-height:1}
  .nb-lich-d button:hover{background:var(--green-l);color:#fff}
  .nb-lich-thu{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
  .nb-lich-thu span{text-align:center;font-size:11px;font-weight:800;color:var(--muted);padding:3px 0}
  .nb-lich-ng{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .nb-lich-ng button,.nb-lich-ng .trong{height:34px;border:0;background:none;border-radius:9px;
    font-size:13.5px;color:var(--text);cursor:pointer;font-family:inherit}
  .nb-lich-ng button:hover{background:var(--green-l2)}
  .nb-lich-ng button.cn{color:var(--red)}
  .nb-lich-ng button.nay{box-shadow:inset 0 0 0 1.5px var(--green-l);font-weight:700}
  .nb-lich-ng button.chon{background:var(--blue);color:#fff;font-weight:700}
  .nb-lich-th{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
  .nb-lich-th button{padding:9px 4px;border:0;background:var(--green-l2);border-radius:9px;font-size:13px;
    color:var(--text);cursor:pointer;font-family:inherit}
  .nb-lich-th button:hover{background:var(--green-l);color:#fff}
  .nb-lich-th button.nay{box-shadow:inset 0 0 0 1.5px var(--green-l);font-weight:700}
  .nb-lich-th button.chon{background:var(--blue);color:#fff;font-weight:700}
  /* chọn giờ (thay input type=time) */
  .nb-lich.nb-gio{width:214px}
  .nb-gio-h{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
  .nb-gio-h span{text-align:center;font-size:11px;font-weight:800;color:var(--muted)}
  .nb-gio-c{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .nb-gio-ds{max-height:188px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
    scrollbar-width:thin;scrollbar-color:#cfe0d4 transparent}
  .nb-gio-ds button{border:0;background:var(--green-l2);border-radius:8px;padding:7px 0;font-size:13.5px;
    color:var(--text);cursor:pointer;font-family:inherit}
  .nb-gio-ds button:hover{background:var(--green-l);color:#fff}
  .nb-gio-ds button.chon{background:var(--blue);color:#fff;font-weight:700}
  .nb-ngaygio{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
  .nb-lich-c{display:flex;justify-content:space-between;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border)}
  .nb-lich-c button{background:none;border:0;color:var(--blue);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
  .nb-lich-c button:hover{text-decoration:underline}

/* ===== QUÉT MÃ BẰNG CAMERA (dùng chung với np) ===== */
@keyframes mo{from{opacity:0}to{opacity:1}}
.quet-lop{position:fixed;inset:0;z-index:5000; /* 1.38.1: luôn nằm trên khung tạo đơn (modal 900) */background:#000;overflow:hidden;
  animation:mo .18s ease both;touch-action:none}
.quet-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quet-che{position:absolute;inset:0;background:rgba(4,12,28,.55)}
.quet-khung{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(84vw,420px);height:min(46vw,230px);border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(4,12,28,.5);transition:.18s}
.quet-khung i{position:absolute;width:30px;height:30px;border:3px solid #fff;border-radius:4px}
.quet-khung i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.quet-khung i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-top-right-radius:14px}
.quet-khung i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-bottom-left-radius:14px}
.quet-khung i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.quet-tia{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#5ce1a0,transparent);
  box-shadow:0 0 12px #12a463;animation:tia 1.9s ease-in-out infinite}
@keyframes tia{0%,100%{top:10%}50%{top:88%}}
.quet-khung.trung{box-shadow:0 0 0 100vmax rgba(4,12,28,.5),0 0 0 4px #12a463 inset;
  background:rgba(18,164,99,.22)}
.quet-khung.trung i{border-color:#5ce1a0}
.quet-khung.trung .quet-tia{display:none}
.quet-dau{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;
  background:linear-gradient(180deg,rgba(4,12,28,.75),transparent);color:#fff}
.quet-tit{font-size:16px;font-weight:650;letter-spacing:-.2px}
.quet-x{margin-left:auto;width:38px;height:38px;display:grid;place-items:center;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;padding:0}
.quet-chan{position:absolute;left:0;right:0;bottom:0;padding:22px 16px calc(env(safe-area-inset-bottom) + 26px);
  background:linear-gradient(0deg,rgba(4,12,28,.8),transparent);text-align:center;color:#fff}
.quet-goi{font-size:14px;color:#cfe0fb;margin-bottom:16px;line-height:1.5}
.quet-nut{display:flex;gap:14px;justify-content:center}
.quet-tron{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.quet-tron.on{background:#fff;color:#b26a00;border-color:#fff}
.quet-tron[hidden]{display:none}
.quet-loi{margin-top:14px;display:inline-block;background:rgba(208,52,44,.92);color:#fff;
  font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:10px;max-width:90%}
/* nút quét nhỏ đặt cạnh ô nhập */
.nut-quet{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;padding:0;margin:0;border:1.5px solid var(--border);border-radius:11px;
  background:#fbfefb;color:var(--blue);cursor:pointer;box-shadow:none}
.nut-quet:hover{background:var(--green-l2);border-color:var(--green-l);transform:none;filter:none;box-shadow:none}
.nut-quet svg{width:19px;height:19px;display:block}
.o-quet{display:flex;gap:6px;align-items:center}
.o-quet>:first-child{flex:1;min-width:0}
.otim .nut-quet{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:transparent}
.otim .nut-quet svg{width:18px;height:18px}
.otim input:not([type=hidden]){padding-right:40px}