/* GHUV Care 2.0 — giao diện nhận diện đỏ, hiện đại và tối giản */
:root{
  --navy:#7f1d1d;
  --navy2:#991b1b;
  --blue:#dc2626;
  --blue2:#ef4444;
  --red:#dc2626;
  --orange:#ea580c;
  --green:#15803d;
  --purple:#a21caf;
  --amber:#b45309;
  --text:#211516;
  --muted:#766366;
  --line:#eadedf;
  --bg:#faf7f7;
  --white:#fff;
  --surface:#fff;
  --surface-soft:#fffafa;
  --brand-soft:#fff1f2;
  --brand-line:#fecdd3;
  --shadow:0 12px 34px rgba(127,29,29,.06);
  --shadow-strong:0 28px 80px rgba(69,10,10,.18);
}
html{background:#faf7f7;scroll-behavior:smooth}
body{background:
  radial-gradient(circle at 100% 0,rgba(239,68,68,.045),transparent 27rem),
  linear-gradient(180deg,#fff 0,#faf7f7 34rem);}
::selection{background:#fecaca;color:#7f1d1d}
button,input,select,textarea{font-family:inherit}
input,select,textarea{border-color:#ddcfd1;border-radius:12px;background:#fff;padding:11px 12px;transition:border-color .18s,box-shadow .18s,background .18s}
input:hover,select:hover,textarea:hover{border-color:#cdb9bc}
input:focus,select:focus,textarea:focus{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.1)}
label{color:#5f4b4e;font-weight:700}
.btn{border-radius:12px;min-height:42px;padding:0 16px;letter-spacing:-.01em;box-shadow:none}
.btn:hover{transform:none}
.btn-primary{background:linear-gradient(135deg,#b91c1c,#e11d48);box-shadow:0 9px 22px rgba(185,28,28,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#991b1b,#be123c);box-shadow:0 11px 26px rgba(153,27,27,.22)}
.btn-soft{border-color:#eadedf;color:#554144;background:#fff}
.btn-soft:hover{background:#fff7f7;border-color:#fecaca;color:#991b1b}
.btn-ghost{border-color:#eadedf;color:#6a575a}
.btn-alert{color:#9f1239;background:#fff}
.icon-btn{border:1px solid #eee2e3;background:#fff;color:#634f52;border-radius:12px;transition:.18s}
.icon-btn:hover{background:#fff1f2;border-color:#fecdd3;color:#b91c1c}

/* Đăng nhập */
.login-screen{grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);background:#fff}
.login-brand-panel{
  min-height:100vh;padding:42px 52px;
  background:
    linear-gradient(100deg,rgba(69,10,10,.93),rgba(127,29,29,.78) 55%,rgba(190,18,60,.35)),
    url('../images/login-background.webp') center/cover no-repeat;
}
.login-brand-panel:after{display:none}
.login-brand,.brand{gap:12px}
.brand-logo{display:block;width:48px;height:48px;border-radius:15px;object-fit:cover;background:#fff;box-shadow:0 12px 26px rgba(0,0,0,.17);flex:0 0 auto}
.login-brand strong,.brand strong{font-size:18px;letter-spacing:.01em}
.login-brand small{color:#ffe4e6}.brand small{color:#fecdd3}
.login-message{max-width:680px}
.eyebrow{color:#fecdd3;letter-spacing:.2em}
.login-message h1{max-width:620px;font-size:clamp(42px,4.2vw,66px);font-weight:850;letter-spacing:-.045em;line-height:1.01;margin:17px 0 19px}
.login-message p{max-width:620px;color:#fff1f2;font-size:15px;line-height:1.75}
.login-points{margin-top:28px;grid-template-columns:1fr;gap:9px;color:#fff1f2}
.login-points div{display:flex;align-items:center;min-height:42px;padding:10px 13px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.07);backdrop-filter:blur(6px)}
.login-form-panel{padding:38px;background:
  radial-gradient(circle at 100% 0,rgba(239,68,68,.08),transparent 22rem),#fff}
.login-card{width:min(420px,100%);padding:34px;border:1px solid #f0e4e5;border-radius:24px;box-shadow:var(--shadow-strong);gap:16px}
.login-card-logo{display:flex;align-items:center;gap:11px;margin-bottom:5px}
.login-card-logo img{width:48px;height:48px;border-radius:14px;object-fit:cover;border:1px solid #f4d5d8}
.login-card-logo strong{display:block;color:#8f1010;font-size:15px}
.login-card-logo small{display:block;color:#9a8588;font-size:10px;margin-top:3px}
.login-card h2{font-size:26px;letter-spacing:-.025em}
.login-card>p{font-size:13px}.login-mobile-logo{display:none}
.password-field button{background:#fff5f5;color:#991b1b}
.form-error{color:#b91c1c}

/* Khung ứng dụng */
.sidebar{width:250px;padding:18px 13px;background:linear-gradient(180deg,#6f0e13 0,#8f1117 62%,#a5151d 100%);box-shadow:10px 0 35px rgba(69,10,10,.1)}
.sidebar .brand{padding:2px 8px 19px;border-color:rgba(255,255,255,.13)}
.sidebar .brand-logo{width:43px;height:43px;border-radius:13px}
.sidebar nav{padding-top:15px;gap:5px}
.nav-item{min-height:45px;border-radius:12px;padding:11px 12px;color:#f5dfe1;font-weight:700}
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.active{background:rgba(255,255,255,.14);box-shadow:inset 3px 0 #fff;color:#fff}
.nav-item b{background:rgba(255,255,255,.16)}
.mini-user{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08)}
.mini-user small{color:#fecdd3}
.main{margin-left:250px;padding:0 26px 38px}
.topbar{height:76px;background:rgba(250,247,247,.88);border-bottom-color:rgba(234,222,223,.9)}
.topbar h1{font-size:21px;color:#5f1116;letter-spacing:-.02em}
.topbar p{color:#8b777a}
.rules-btn{background:#fff1f2;color:#9f1239;border-color:#fecdd3}
.notification-btn i{background:#ef4444}
.user-menu{border:1px solid #eee2e3;background:#fff;color:#554144;border-radius:12px}
.user-dropdown{border-color:#eadedf;box-shadow:var(--shadow-strong)}
.avatar{background:#fff1f2;color:#b91c1c}
.page{padding-top:18px}
.day-alert{border:1px solid #fecdd3;border-left:4px solid #e11d48;background:linear-gradient(100deg,#fff1f2,#fff7f7);border-radius:14px;padding:14px 16px}
.day-alert .alert-icon{background:#e11d48}
.day-alert strong{color:#9f1239}.day-alert p{color:#7f1d1d}
.stats-grid{gap:12px}
.stat-card,.panel,.orders-wrap,.person-card,.group-card{border-color:#eee2e3;background:rgba(255,255,255,.96);box-shadow:var(--shadow)}
.stat-card{border-radius:16px;padding:17px;position:relative;overflow:hidden}
.stat-card:after{content:"";position:absolute;right:-28px;top:-35px;width:92px;height:92px;border-radius:50%;background:rgba(239,68,68,.045)}
.stat-card span{color:#8b777a}.stat-card strong{color:#4b1115;letter-spacing:-.035em}.stat-card small{color:#8b777a}
.dashboard-grid{gap:15px}.panel{border-radius:17px;padding:18px}
.panel-head h2,.section-heading h2{color:#4b1115;letter-spacing:-.015em}
.text-btn{color:#b91c1c}
.priority-item{border-color:#eee2e3;border-radius:12px}
.priority-item:hover{background:#fff8f8;border-color:#fda4af}
.badge-blue{background:#fff1f2;color:#be123c}.badge-purple{background:#fdf2f8;color:#a21caf}
.donut{background:conic-gradient(var(--green) 0 var(--done),#e11d48 var(--done) calc(var(--done) + var(--care)),var(--amber) calc(var(--done) + var(--care)) 360deg)}
.section-toolbar,.section-heading{margin-bottom:14px}
.search-box{border-color:#eadedf;border-radius:12px;background:#fff}
.search-box:focus-within{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.btn-filter{border-color:#eadedf}
.filter-panel,.group-filter-box{border-color:#eee2e3;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(127,29,29,.04)}
.group-option{background:#fff;border-color:#eee2e3!important}
.chip{border-color:#eadedf;background:#fff;color:#695558}
.chip:hover{border-color:#fda4af;color:#991b1b}
.chip.active{background:#fff1f2;border-color:#fb7185;color:#9f1239}
.bulk-bar{background:linear-gradient(100deg,#7f1d1d,#b91c1c);border-radius:13px}
.orders-wrap{border-radius:16px}
.orders-head{background:#fffafa;color:#887477;border-bottom-color:#eee2e3}
.order-item{border-bottom-color:#eee2e3}
.order-summary:hover{background:#fffafa}
.order-summary.selected{background:#fff1f2}
.latest-note{background:#fffafa;border-color:#f0e4e5}
.quick-icon{border-color:#eadedf;background:#fff;color:#6a5558;border-radius:10px}
.quick-icon:hover{background:#fff1f2;border-color:#fecdd3;color:#b91c1c}
.quick-icon.active{background:#ffe4e6;border-color:#fb7185;color:#9f1239}
.detail-field{border-color:#eee2e3;background:#fff}.order-details{background:#fffafa}
.person-card,.group-card{border-radius:16px}.mini-stat{background:#fffafa}
.performance-row.head{background:#fffafa}
.group-comp-row{border-bottom-color:#eee2e3}
.notification-panel{box-shadow:-24px 0 70px rgba(69,10,10,.16)}
.notification-item>span{background:#fff1f2;color:#be123c}
.modal{background:rgba(45,12,14,.56);backdrop-filter:blur(3px)}
.modal-card{border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:0 32px 90px rgba(69,10,10,.25)}
.modal-head,.modal-foot{border-color:#eee2e3}.modal-foot{background:#fff}
.template-box{background:#fff1f2;border-color:#fecdd3}.template-box p{color:#881337}
.note-item{background:#fffafa;border-color:#eee2e3}
.rules-hero{background:linear-gradient(135deg,#6f0e13,#a5151d,#e11d48)}
.rules-hero small{color:#fecdd3}.rules-hero p{color:#fff1f2}
.priority-rules article{background:#fff;border-color:#eee2e3}
.priority-rules b{color:#15803d}.priority-rules article:nth-child(2) b{color:#dc2626}.priority-rules article:nth-child(3) b{color:#a21caf}.priority-rules article:nth-child(4) b{color:#ea580c}
.rules-list>div,.rules-stat{background:#fffafa;border-color:#eee2e3}.rules-list b{background:#991b1b}
.performance-score{background:#fff1f2;border-color:#fecdd3}.performance-score strong{color:#991b1b}
.toast{background:#5f1116}
.mobile-bottom-nav{border-color:#eadedf;background:rgba(255,255,255,.97)}
.mobile-bottom-nav button.active{color:#b91c1c}

/* Tối ưu màn hình vừa và nhỏ */
@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .sidebar{width:268px;box-shadow:16px 0 55px rgba(69,10,10,.24)}
  .main{margin-left:0;padding-left:18px;padding-right:18px}
  .topbar{height:72px}
}
@media(max-width:720px){
  body{background:#faf7f7}
  .login-form-panel{min-height:100dvh;padding:18px;background:
    linear-gradient(rgba(127,29,29,.76),rgba(127,29,29,.88)),
    url('../images/login-background.webp') center/cover no-repeat}
  .login-card{padding:25px 21px;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 28px 80px rgba(69,10,10,.3)}
  .login-card-logo{display:flex}.login-mobile-logo{display:none}
  .main{padding-left:10px;padding-right:10px}
  .topbar{height:67px}.topbar-actions{gap:3px}
  .icon-btn,.user-menu{min-width:40px;min-height:40px}
  .page{padding-top:11px}
  .day-alert{padding:11px 12px;border-left-width:3px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-card{min-height:108px;padding:13px}
  .panel{border-radius:15px;padding:13px}
  .orders-wrap{border-radius:0}
  .order-item{border-radius:15px!important}
  .order-summary{padding:13px}
  .quick-icon{width:37px;height:37px}
  .modal-card{border-radius:20px 20px 0 0}
  .modal-head,.modal-foot{padding:15px}
  .modal-body{padding:15px}
  .mobile-bottom-nav{box-shadow:0 -12px 30px rgba(69,10,10,.08)}
}
@media(max-width:430px){
  .stats-grid,.report-kpis{grid-template-columns:1fr 1fr}
  .stat-card strong{font-size:21px}
  .topbar-actions .rules-btn{display:none}
  .login-card h2{font-size:23px}
}
@media(max-width:360px){
  .stats-grid,.report-kpis{grid-template-columns:1fr}
  .topbar-actions .notification-btn{display:none}
}