/* style.css — clean modern palette (soft blues), responsive
   Uses Poppins font. Save as style.css in same folder as index.html.
*/

/* === Variables === */
:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --accent:#0f74e6;
  --accent-2:#0b61c4;
  --card:#f8fbff;
  --glass: rgba(255,255,255,0.7);
  --radius:14px;
  --max-width:1100px;
  --container-padding:20px;
  --shadow: 0 6px 18px rgba(15, 116, 230, 0.08);
}

/* Reset + base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Container + Header + Nav (đồng bộ HTML mẫu) */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  position: relative; /* Quan trọng cho absolute positioning */
}
.brand{
  font-weight:700;
  letter-spacing:.4px;
  color:#1672E6;
  text-decoration:none;
  font-size:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.logo-mark{
  background:#1672E6;
  color:#fff;
  width:28px;
  height:28px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family:Poppins,system-ui,sans-serif;
}
.logo-text{
  font-weight:700;
  letter-spacing:.4px;
  color:#1672E6;
  font-size:18px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}

.main-nav a {
  color: #1f2937;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
}

.main-nav a:hover {
  background: rgba(15,116,230,.06);
  color: #0F74E6;
}

/* Nav User Info - đặt dưới menu với absolute positioning */
.nav-user {
  position: absolute;
  top: 100%; /* Ngay dưới header */
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 16px;
  background: rgba(15,116,230,0.1);
  border: 1px solid rgba(15,116,230,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 50;
  margin-top: 4px; /* Khoảng cách nhỏ từ header */
}

.nav-user-name {
  color: #0F74E6;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  white-space: nowrap;
  font-size: 11px; /* Nhỏ hơn */
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-user-logout {
  padding: 3px 8px !important;
  border-radius: 12px !important;
  background: #0F74E6 !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 10px !important; /* Nhỏ hơn */
  transition: background .2s ease;
  border: none;
  cursor: pointer;
}

.nav-user-logout:hover {
  background: #0B61C4 !important;
  color: #fff !important;
}

/* Đảm bảo body có padding-top để không bị che */
.upload-body {
  padding-top: 20px; /* Để user info không che nội dung */
}

/* Mobile */
@media (max-width:800px){
  .main-nav a{display:none}
  .nav-user{margin-left:auto;margin-right:10px}
  .nav-toggle{display:inline-block}
}
@media (max-width: 768px) {
  .main-nav a:not(.nav-user-logout) {
    display: none;
  }
  
  .nav-user {
    position: static; /* Về vị trí bình thường trên mobile */
    margin-left: auto;
    margin-top: 0;
  }
  
  .nav-toggle {
    display: flex !important;
  }
}

/* Hero */
.hero{padding:48px 0;background:linear-gradient(180deg,#f7fbff 0%,#fff 100%)}
.hero-inner{display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-content{flex:1;min-width:280px}
.hero h1{font-size:34px;margin-bottom:12px}
.hero p{color:var(--muted);margin-bottom:18px}
.hero-cta .btn{margin-right:10px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:white;text-decoration:none;font-weight:600;border:0;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid rgba(15,116,230,0.12);color:var(--accent)}
.btn-ghost{background:transparent;border:1px dashed rgba(0,0,0,0.06);color:var(--muted)}

/* Sections */
.section{padding:36px 0}
.section.alt{background:#fbfdff}
.section-title{font-size:22px;margin-bottom:14px}
.section-tight{padding:50px 0}

/* Grid */
.grid{display:grid;gap:16px}
.about-grid{grid-template-columns:1fr 1fr}
.services-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}
@media(min-width:900px){ .services-grid{grid-template-columns:repeat(4,1fr)} }
.service-card, .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.service-card h4{margin-bottom:8px}
.price{margin-top:12px;color:var(--accent-2)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px;text-align:center}
.stat-item h3{font-size:34px;margin:0;color:var(--accent);font-weight:600}
.stat-item p{margin:6px 0 0;font-size:14px;opacity:.75}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:34px}
.portfolio-item{border-radius:12px;overflow:hidden;background:white;box-shadow:var(--shadow)}
.portfolio-item img{width:100%;height:160px;object-fit:cover;display:block}
.portfolio-meta{padding:10px;border-top:1px solid rgba(0,0,0,0.03);display:flex;justify-content:space-between;font-weight:600}

/* Portfolio page */
.hero-slim{padding:70px 0 30px}
.hero-slim .hero-content{text-align:center;max-width:820px;margin:0 auto}
.filter-bar{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.f-btn{border:1px solid #d3e2f0;background:#fff;padding:8px 16px;border-radius:22px;font-size:13px;cursor:pointer;font-weight:500}
.f-btn.active,.f-btn:hover{background:#1672E6;color:#fff;border-color:#1672E6}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:34px}
.p-item{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e5edf5;padding:14px 16px;border-radius:16px;position:relative}
.p-thumb{width:100%;aspect-ratio:4/3;border-radius:12px;background:linear-gradient(145deg,#d9e6f2,#f3f8fc);position:relative;overflow:hidden}
.p-item h4{margin:0 0 4px;font-size:15px}
.p-item p{margin:0;font-size:13px;line-height:1.4}
.skeleton{background:linear-gradient(90deg,#dbe6ef 25%,#eef4f9 50%,#dbe6ef 75%);background-size:400% 100%;animation:sk 1.4s infinite}
@keyframes sk{0%{background-position:0 0}100%{background-position:-400% 0}}
@media (prefers-reduced-motion: reduce){
  .skeleton{background:#e3edf4;animation:none}
}
.portfolio-note{margin-top:24px}
.mini-cta{padding:60px 0}
.mini-cta-box{background:#1672E6;color:#fff;padding:46px 38px;border-radius:28px;max-width:860px;margin:0 auto;text-align:center}
.mini-cta-box h2{margin:0 0 12px;font-size:30px}
.site-footer.slim{margin-top:20px}

/* Upload panel */
.upload-panel{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.upload-form{flex:1;min-width:280px;display:flex;flex-direction:column;gap:8px}
.upload-form input[type="text"], .upload-form input[type="email"], .upload-form select, .contact-form input, .contact-form textarea{
  padding:10px;border-radius:8px;border:1px solid rgba(17,24,39,0.08);outline:none
}
.uploads-list{flex-basis:320px;background:#fff;border-radius:10px;padding:12px;box-shadow:var(--shadow)}
.uploads-list ul{list-style:none;padding-left:0}
.uploads-list li{padding:8px;border-bottom:1px dashed rgba(0,0,0,0.05);display:flex;justify-content:space-between;align-items:center;gap:8px}
.small{font-size:13px}
.muted{color:var(--muted)}

/* Invoices */
.invoice-output{margin-top:12px;padding:12px;background:#fff;border-radius:10px;box-shadow:var(--shadow)}

/* Contact grid */
.contact-grid{grid-template-columns:1fr}
@media(min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr} }

/* Contact meta after removing first card */
.contact-meta{margin-top:16px;padding-top:14px;border-top:1px dashed #d7e3ee;display:grid;gap:4px}
.contact-meta p{margin:0;font-size:13px;color:#546272}

/* Workflow Steps */
.workflow-steps{counter-reset:w;list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:720px}
.workflow-steps li{background:#fff;border:1px solid #e5eef5;padding:14px 18px;border-radius:12px;position:relative;font-size:14px;line-height:1.45}
.workflow-steps li strong{display:block;font-size:15px;margin-bottom:2px}
.workflow-steps li:before{counter-increment:w;content:counter(w);position:absolute;left:-10px;top:-10px;background:#1672E6;color:#fff;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-weight:600;font-size:14px}

/* Tech Grid */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:24px}
.tech-card{background:#fff;border:1px solid #e5edf6;padding:18px 16px;border-radius:14px}
.tech-card h4{margin:0 0 6px;font-size:15px}

/* Quality Wrap */
.quality-wrap{display:grid;grid-template-columns:1.3fr .8fr;gap:38px;align-items:start}
@media (max-width:900px){.quality-wrap{grid-template-columns:1fr}}
.checklist.large li{font-size:15px}

/* Testimonial Slider */
.testimonial-slider{position:relative;max-width:680px}
.t-item{display:none;background:#fff;border:1px solid #e6eef5;padding:24px 26px;border-radius:18px;animation:fade .4s}
.t-item.active{display:block}
.t-meta{margin-top:14px;font-size:14px;color:#4c5b6a;font-weight:500}
.t-prev,.t-next{position:absolute;top:50%;transform:translateY(-50%);background:#1672E6;color:#fff;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;font-weight:600}
.t-prev{left:-54px}
.t-next{right:-54px}
@media (max-width:780px){.t-prev{left:-10px}.t-next{right:-10px}}

/* FAQ List */
#faqList{ display:grid; gap:12px; }
.faq-item{ background:#fff; border:1px solid #e7eef8; border-radius:12px; overflow:hidden; }
.faq-q{
  width:100%; text-align:left; background:#f7fbff; border:0;
  padding:14px 16px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-q::after{ content:'+'; color:#1672E6; font-weight:700; }
.faq-q[aria-expanded="true"]::after{ content:'−'; }
.faq-item.open .faq-q{ background:#f1f7fc; }

/* Dùng max-height để expand/collapse mượt */
.faq-a{
  display:block; overflow:hidden; max-height:0;
  padding:0 16px; color:#4b5563; line-height:1.65;
  transition:max-height .35s ease, padding .25s ease;
}
.faq-item.open .faq-a{ max-height:1200px; padding:14px 16px 16px; }

/* Tight CTA */
.tight-cta .cta-final-box{background:#1672E6;color:#fff;padding:48px 38px;border-radius:24px;text-align:center;max-width:860px;margin:0 auto}
.cta-final-box h2{margin:0 0 14px;font-size:32px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Admin Body */
.admin-body{background:#f4f8fb}
.admin-main{padding:40px 0}
.auth-box{max-width:400px;margin:0 auto}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:20px}

/* Mini List */
.mini-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}

/* Footer */
.site-footer{background:#0b1020;color:#cdd6f4;margin-top:40px}
.footer-top{padding:42px 0}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px;
  align-items:flex-start;
}
.footer-col .footer-title{color:#fff;margin:0 0 10px;font-size:14px;letter-spacing:.2px}
.footer-desc{
  font-size:15px; line-height:1.7; color:#93a1b5;
  margin:8px 0 12px; max-width:560px;
}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-links a{color:#cdd6f4;text-decoration:none}
.footer-links a:hover{color:#ffffff}
.contact-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.small{font-size:12px}
.muted{color:#93a1b5}
.trust-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{display:inline-block;background:#11182c;color:#d7e3f6;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;font-size:12px}

/* Brand/Logo in footer */
.footer-brand{ display:block !important; }
.footer-brand-logo{ display:block; margin:0 0 12px; }
.footer-brand .brand{ display:inline-flex; align-items:center; text-decoration:none; }
.site-footer .logo-svg{ width:200px; height:auto; display:block; }
.site-footer .logo-svg text{ fill:#ffffff; }

/* Social */
.social{display:flex;gap:10px;margin-top:8px}
.soc{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#11182c;border:1px solid rgba(255,255,255,.08);
  color:#d7e3f6;text-decoration:none;font-weight:700;font-size:14px
}
.soc:hover{background:#16213a;color:#fff}

/* Newsletter */
.newsletter-form{display:flex;gap:8px;align-items:center;margin-top:6px}
.newsletter-form input{
  flex:1;min-width:160px;background:#0f1730;color:#e8f1ff;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;
}
.newsletter-form .btn.btn-small{
  padding:10px 14px;border-radius:10px;background:#1672E6;color:#fff;border:0;cursor:pointer
}
.newsletter-form .btn.btn-small:hover{filter:brightness(1.08)}

/* Bottom bar */
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:12px 0;color:#93a1b5;font-size:13px}
.bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.legal-right{display:flex;align-items:center;gap:10px}
.legal-right a{color:#cdd6f4;text-decoration:none}
.legal-right a:hover{color:#fff}
.sep{opacity:.5}
.back-top{white-space:nowrap}

@media (max-width:700px){
  .bottom-bar{flex-direction:column;align-items:flex-start}
}

/* Utilities */
.required{color:#d9534f}
.checklist li{margin-bottom:6px}
@media(max-width:800px){
  .header-inner{padding:10px 8px}
  .main-nav a{display:none}
  .nav-toggle{display:inline-block}
  .hero-inner{padding:8px}
  .about-grid{grid-template-columns:1fr}
}

/* simple fade-in on scroll */
.fade-in {opacity:0; transform:translateY(12px); transition: all .6s ease-out;}
.fade-in.in-view {opacity:1; transform:none;}

/* Admin Login Card */
#adminLoginCard form{display:flex;flex-direction:column;gap:8px;max-width:320px}
#adminLoginCard input{padding:10px;border:1px solid rgba(0,0,0,0.1);border-radius:8px}

/* Services teaser on index */
.svc-teaser-grid{margin-top:28px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.svc-teaser h4{margin:0 0 6px;font-size:15px}
.lead{font-size:17px;line-height:1.5}
.center{text-align:center}
.max-680{max-width:680px;margin:0 auto}
.m-top-32{margin-top:32px}

/* Services page */
.hero-services{padding:90px 0 50px}
.hero-services .hero-content{text-align:center;max-width:840px;margin:0 auto}
.scope-grid{display:grid;gap:26px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.scope-card{background:#fff;border:1px solid #e3edf5;padding:20px 18px;border-radius:18px}
.scope-card h3{margin:0 0 10px;font-size:17px}
.pricing-table{display:grid;gap:28px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.price-col{background:#fff;border:1px solid #e2ebf4;padding:22px 20px;border-radius:20px;position:relative;display:flex;flex-direction:column;gap:14px}
.price-col.featured{border:2px solid #1672E6;box-shadow:0 4px 14px -4px rgba(22,114,230,.25)}
.price-col h4{margin:0;font-size:16px}
.p-val{font-size:26px;font-weight:600;color:#1672E6}
.p-val span{font-size:13px;font-weight:400;color:#4d5b68;margin-left:4px}

.wf-detail-grid{display:grid;gap:22px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wf-step{background:#fff;border:1px solid #e4edf5;padding:16px 16px;border-radius:16px}
.wf-step h4{margin:0 0 6px;font-size:15px}

.qc-grid{display:grid;gap:22px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.qc-card{background:#fff;border:1px solid #e4edf5;padding:18px 16px;border-radius:16px}
.qc-card h5{margin:0 0 6px;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:#1672E6}

.m-top-20{margin-top:20px}
.services-body{background:#f5f9fc}

/* Reuse existing mini-cta (already defined); if not ensure responsive */
@media (max-width:700px){
  .pricing-table{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* === Workflow Diagram Redesign === */
.workflow-diagram{
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:36px;
  position:relative;
}
.wf-step{
  flex:1 1 200px;
  max-width:250px;
  position:relative;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wf-node{
  background:#fff;
  border:1px solid #e2ebf5;
  padding:18px 14px 16px;
  border-radius:18px;
  position:relative;
  min-height:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.wf-num{
  width:38px;
  height:38px;
  background:#1672E6;
  color:#fff;
  font-weight:600;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:15px;
  margin-top:-34px;
  box-shadow:0 4px 10px -3px rgba(22,114,230,.35);
}
.wf-title{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.3;
}
.wf-desc{
  font-size:13px;
  line-height:1.45;
  color:#4b5a65;
  margin:0;
}
.wf-step:not(:last-child):after{
  content:"";
  position:absolute;
  top:46px;
  right:-20px;
  width:40px;
  height:2px;
  background:linear-gradient(90deg,#1672E6,#74b5ff);
}
@media (max-width:900px){
  .wf-step{max-width:100%;flex:1 1 calc(50% - 34px)}
  .wf-step:not(:last-child):after{display:none}
}
@media (max-width:600px){
  .workflow-diagram{flex-direction:column;gap:30px}
  .wf-step{flex:1 1 auto;max-width:100%}
  .wf-step:not(:last-child):after{display:none}
  .wf-node{text-align:left;align-items:flex-start}
  .wf-num{margin-top:-30px}
}

/* === Contact Section Redesign === */
.contact-section{--contact-gap:40px}
.contact-layout{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:var(--contact-gap);
  max-width:1100px;
  margin:36px auto 0;
  align-items:start;
}
@media (max-width:1000px){
  .contact-layout{grid-template-columns:1fr;max-width:760px}
}
.contact-info,
.contact-form-wrap{
  background:#fff;
  border:1px solid #e2ebf5;
  border-radius:22px;
  padding:28px 26px 30px;
  position:relative;
}
.contact-heading{
  margin:0 0 12px;
  font-size:18px;
}
.contact-list{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:6px;
  font-size:14px;
  line-height:1.45;
}
.contact-list a{color:#1672E6;text-decoration:none}
.contact-badges{display:flex;flex-wrap:wrap;gap:8px}
.c-badge{
  background:#1672E6;
  color:#fff;
  font-size:11px;
  padding:6px 10px 5px;
  border-radius:999px;
  letter-spacing:.5px;
  font-weight:500;
}
.contact-form.modern{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.f-group{display:flex;flex-direction:column;gap:6px}
.f-group label{font-size:13px;font-weight:500;color:#2f3d4a}
.f-group input,
.f-group select,
.f-group textarea{
  border:1px solid #d5e3ef;
  background:#f9fcfe;
  padding:10px 12px;
  font-size:14px;
  border-radius:10px;
  font-family:inherit;
  resize:vertical;
  transition:border .2s, background .2s;
}
.f-group input:focus,
.f-group select:focus,
.f-group textarea:focus{
  outline:none;
  border-color:#1672E6;
  background:#fff;
  box-shadow:0 0 0 3px rgba(22,114,230,.15);
}
.req{color:#e0263c;margin-left:4px;font-weight:600}
.form-actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.form-actions .btn{min-width:160px}
.contact-form .error{color:#e0263c;font-size:12px}

/* Minor adjust to section titles centering variant */
.section-title.center{text-align:center}

/* === Workflow Roadmap === */
.workflow-roadmap{position:relative}
.roadmap-intro{max-width:760px;margin:4px auto 6px;font-size:15px;color:#4a5a66}
.roadmap{
  --lane-h:7px;
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:38px;
  margin-top:70px;
  padding:0 10px 0 10px;
}
.roadmap:before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:52%;
  height:var(--lane-h);
  background:linear-gradient(90deg,#1672E6 0%,#3290ff 45%,#69c8ff 100%);
  border-radius:var(--lane-h);
  box-shadow:0 0 0 6px rgba(22,114,230,.08),0 6px 18px -6px rgba(22,114,230,.45) inset;
}
.rm-step{
  position:relative;
  flex:1 1 0;
  min-width:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.rm-marker{
  position:absolute;
  top:calc(52% - 26px);
  z-index:2;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  background:#fff;
  border:2px solid #1672E6;
  border-radius:18px;
  box-shadow:0 4px 14px -4px rgba(22,114,230,.4);
  transition:transform .35s, box-shadow .35s;
}
.rm-marker span{
  display:inline-block;
  width:34px;height:34px;
  line-height:34px;
  background:linear-gradient(135deg,#1672E6,#4aa8ff);
  color:#fff;
  font-weight:600;
  font-size:15px;
  border-radius:12px;
  box-shadow:0 2px 6px -2px rgba(22,114,230,.5);
}
.rm-step.optional .rm-marker span{
  background:linear-gradient(135deg,#7a31d8,#b07dff);
}
.rm-card{
  position:relative;
  margin-top:120px;
  background:#ffffff;
  border:1px solid #dbe7f3;
  padding:22px 20px 20px;
  border-radius:22px;
  max-width:260px;
  box-shadow:0 8px 26px -12px rgba(16,62,120,.25);
  transition:transform .35s, box-shadow .35s;
}
.rm-card:before{
  content:"";
  position:absolute;
  top:-70px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:58px;
  background:linear-gradient(#1672E6,#66c4ff);
  opacity:.8;
}
.rm-card h3{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.25;
}
.rm-card p{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#4c5b67;
}
.rm-step:hover .rm-card{
  transform:translateY(-6px);
  box-shadow:0 14px 30px -14px rgba(22,114,230,.55);
}
.rm-step:hover .rm-marker{
  transform:translateY(-4px);
  box-shadow:0 10px 22px -8px rgba(22,114,230,.55);
}
.roadmap-legend{
  margin-top:38px;
  text-align:center;
  font-size:12.5px;
  color:#536371;
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.legend-dot{
  width:14px;height:14px;
  background:linear-gradient(120deg,#1672E6,#6fd4ff);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(22,114,230,.18);
}

/* Responsive */
@media (max-width:1000px){
  .roadmap{flex-direction:column;gap:60px;padding-left:36px;margin-top:30px}
  .roadmap:before{
    left:18px;
    width:5px;
    top:0;
    bottom:0;
    height:auto;
    background:linear-gradient(#1672E6,#69c8ff);
  }
  .rm-step{align-items:flex-start;text-align:left}
  .rm-marker{left:-10px;top:0;transform:none}
  .rm-card{margin-top:0;max-width:520px;padding:20px 20px 18px}
  .rm-card:before{
    top:26px;
    left:-34px;
    width:28px;
    height:2px;
    transform:none;
    background:linear-gradient(90deg,#1672E6,#61c1ff);
  }
  .rm-step:hover .rm-card{transform:translateY(-2px)}
  .rm-marker span{font-size:14px}
}

/* Minor improvement for restored contact badges if not present */
.contact-badges{margin-top:10px}
.contact-badges .c-badge{background:#1672E6;color:#fff;font-size:11px;padding:6px 10px 5px;border-radius:999px;letter-spacing:.4px;font-weight:500}

/* === Workflow Roadmap – Refine (no overlap) === */
.workflow-roadmap .roadmap{
  align-items:flex-start;
  padding:0 6px;
  margin-top:46px;
}
.workflow-roadmap .roadmap:before{
  top:38px;                /* timeline line closer to badges */
  height:6px;
  box-shadow:0 0 0 4px rgba(22,114,230,.08),0 2px 10px -4px rgba(22,114,230,.45) inset;
}
.workflow-roadmap .rm-step{
  min-width:160px;
}
.workflow-roadmap .rm-marker{
  position:absolute;
  top:-4px;
  left:50%;
  transform:translate(-50%,0);
  width:54px;
  height:54px;
  border-radius:20px;
  border:2px solid #fff;
  box-shadow:0 6px 14px -6px rgba(22,114,230,.55),0 0 0 2px #1672E6;
  background:linear-gradient(145deg,#1672E6,#4aa8ff);
}
.workflow-roadmap .rm-marker span{
  background:transparent;
  box-shadow:none;
  width:auto;
  height:auto;
  line-height:1;
  font-size:17px;
  font-weight:600;
  padding:0;
}
.workflow-roadmap .rm-step.optional .rm-marker{
  background:linear-gradient(145deg,#7a31d8,#b07dff);
  box-shadow:0 6px 14px -6px rgba(122,49,216,.55),0 0 0 2px #7a31d8;
}
.workflow-roadmap .rm-card{
  margin-top:70px;          /* space below badge */
  padding:58px 20px 20px;   /* top padding for visual air */
  max-width:260px;
  border-radius:24px;
  background:#fff;
  border:1px solid #d9e6f3;
  box-shadow:0 10px 28px -14px rgba(30,74,130,.25);
  transition:transform .35s, box-shadow .35s;
}
.workflow-roadmap .rm-card:before{display:none}
.workflow-roadmap .rm-card h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.28;
}
.workflow-roadmap .rm-card p{
  font-size:13px;
  line-height:1.5;
}
.workflow-roadmap .rm-step:hover .rm-card{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -16px rgba(22,114,230,.55);
}
.workflow-roadmap .rm-step:hover .rm-marker{
  transform:translate(-50%,-4px);
}

/* Timeline connector refinement (little tick under each badge) */
.workflow-roadmap .rm-step:after{
  content:"";
  position:absolute;
  top:38px;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  background:#fff;
  border:3px solid #1672E6;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(22,114,230,.18);
}
.workflow-roadmap .rm-step.optional:after{
  border-color:#7a31d8;
  box-shadow:0 0 0 4px rgba(122,49,216,.22);
}

/* Legend spacing tweak */
.workflow-roadmap .roadmap-legend{margin-top:30px}

/* Responsive adjustments */
@media (max-width:1000px){
  .workflow-roadmap .roadmap{
    flex-direction:column;
    gap:60px;
    padding-left:36px;
    margin-top:30px;
  }
  .workflow-roadmap .roadmap:before{
    left:18px;
    width:5px;
    top:0;
    bottom:0;
    height:auto;
    background:linear-gradient(#1672E6,#69c8ff);
  }
  .workflow-roadmap .rm-step{
    align-items:flex-start;
    text-align:left;
  }
  .workflow-roadmap .rm-marker{
    left:-6px;
    top:0;
    transform:none;
  }
  .workflow-roadmap .rm-step:after{
    top:24px;
    left:-18px;
    transform:none;
    width:14px;height:14px;
  }
  .workflow-roadmap .rm-card{
    margin-top:0;
    padding:56px 22px 20px;
    max-width:540px;
  }
  .workflow-roadmap .rm-card h3{font-size:16px}
}

/* Ultra narrow */
@media (max-width:480px){
  .workflow-roadmap .rm-card{
    padding:54px 18px 18px;
  }
}

/* === Upload Page === */
.upload-body{background:#f5f9fc}
.hero-upload{padding:80px 0 40px}
.hero-upload .upload-highlights{list-style:none;margin:24px auto 0;padding:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:13px;color:#355065}
.upload-highlights li{background:#e8f3ff;padding:6px 12px;border-radius:20px}
.auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:start;max-width:1100px;margin:0 auto}
.auth-card{display:flex;flex-direction:column;gap:14px}
.auth-card form{display:flex;flex-direction:column;gap:10px}
.auth-card input{border:1px solid #d5e3ef;border-radius:10px;padding:10px 12px;background:#f9fcfe;font-size:14px}
.auth-card input:focus{outline:none;border-color:#1672E6;background:#fff;box-shadow:0 0 0 3px rgba(22,114,230,.15)}
.btn-google{background:#fff;color:#222;display:flex;align-items:center;gap:10px;border:1px solid #d5e3ef}
.btn-google .g-icon{background:#4285F4;color:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px}
.or-sep{display:flex;align-items:center;justify-content:center;font-size:12px;color:#5d6b78;margin:4px 0 8px}
.or-sep span{position:relative;padding:0 10px}
.or-sep:before,.or-sep:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#d9e5f1,#e9f0f6)}
.switch a{text-decoration:none;color:#1672E6}
.auth-side h3{margin:0 0 12px}
.auth-side h4{margin:18px 0 6px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:#1672E6}
.tight li{margin:0}

/* Wizard */
.upload-wizard .wizard-steps{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.wz-step{background:#f1f7fc;color:#3d5464;padding:8px 14px;border-radius:14px;font-size:13px;display:flex;align-items:center;gap:6px;font-weight:500}
.wz-step span{background:#1672E6;color:#fff;width:22px;height:22px;display:grid;place-items:center;font-size:12px;border-radius:8px}
.wz-step.active{background:#1672E6;color:#fff;box-shadow:0 4px 10px -4px rgba(22,114,230,.4)}
.check-grid{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;font-size:13px}
.ack{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 12px}
.next-btn[disabled]{opacity:.4;cursor:not-allowed}
.panel-actions{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}

/* Drop zone */
.drop-zone{margin:10px 0 14px;border:1.8px dashed #b9cee0;padding:34px 16px;text-align:center;border-radius:18px;background:#f6fbff;cursor:pointer;transition:background .25s,border-color .25s}
.drop-zone.drag{background:#e8f3ff;border-color:#1672E6}
.drop-zone:focus{outline:none;box-shadow:0 0 0 3px rgba(22,114,230,.2)}
.linklike{color:#1672E6;cursor:pointer;text-decoration:underline;font-weight:500}
.file-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;max-height:240px;overflow:auto}
.file-list li{background:#fff;border:1px solid #dbe7f3;padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.file-list li button{background:#f0f5fa;border:1px solid #d1dde8;width:26px;height:26px;border-radius:8px;cursor:pointer}
.file-list li button:hover{background:#1672E6;color:#fff;border-color:#1672E6}
.file-list.empty{opacity:.7}
.file-hint{margin-top:4px}

/* Case form */
.case-form{display:flex;flex-direction:column;gap:26px}
.cf-row{display:grid;gap:18px}
.cf-row.four{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cf-field{display:flex;flex-direction:column;gap:6px;position:relative}
.cf-field.wide{grid-column:1/-1}
.cf-field label{font-size:13px;font-weight:600;color:#274055;letter-spacing:.3px}
.case-form select,
.case-form input,
.case-form textarea{
  background:#fff;
  border:1px solid #d3e2ee;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.3;
  transition:border .2s, box-shadow .2s, background .2s;
}
.case-form textarea{min-height:130px;resize:vertical}
.case-form select:focus,
.case-form input:focus,
.case-form textarea:focus{
  outline:none;
  border-color:#1672E6;
  background:#fdfefe;
  box-shadow:0 0 0 3px rgba(22,114,230,.18);
}
.case-form .hint{
  font-size:11.5px;
  color:#5b6b78;
  margin-top:4px;
  line-height:1.4;
}
@media (max-width:640px){
  .cf-row.four{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
.review-box{display:grid;gap:10px;margin:4px 0 18px}
.rev-block{background:#fff;border:1px solid #dbe7f3;padding:10px 12px;border-radius:12px}
.privacy{margin:14px 0 0}

/* Small helpers */
.w-full{width:100%}

/* Responsive */
@media (max-width:640px){
  .auth-grid{gap:26px}
  .drop-zone{padding:30px 10px}
  .wizard-steps{gap:8px}
}

/* Custom Case Type field layout */
.custom-type-field{grid-column:1/-1}
@media (min-width:900px){
  /* Trên desktop: custom field chỉ chiếm 1 cột nếu muốn gọn */
  .custom-type-field{grid-column:auto}
}

/* === Platforms / Our Links Section === */
.platforms-section{padding-top:70px;padding-bottom:70px}
.platforms-intro{max-width:760px;margin:4px auto 24px;color:#4b5a66}
.platforms-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.plat-item{display:flex}
.plat-card{
  flex:1;
  background:#fff;
  border:1px solid #dbe6f1;
  border-radius:20px;
  padding:18px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  text-decoration:none;
  transition:box-shadow .3s, transform .3s, border-color .3s;
}
.plat-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(140deg,#1672E6,#6fc9ff);
  opacity:0;
  transition:opacity .35s;
  z-index:0;
}
.plat-name{
  font-size:15px;
  font-weight:600;
  color:#18364d;
  position:relative;
  z-index:1;
  letter-spacing:.3px;
}
.plat-type{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:#5c6e7a;
  position:relative;
  z-index:1;
  font-weight:500;
}
.plat-card:hover{
  border-color:#1672E6;
  box-shadow:0 10px 26px -10px rgba(22,114,230,.35);
  transform:translateY(-4px);
}
.plat-card:hover:before{opacity:.08}
.platform-note{margin-top:32px;color:#5a6873}
@media (max-width:640px){
  .plat-card{padding:16px 14px}
  .plat-name{font-size:14px}
}

/* === Admin Redesign === */
.admin-body{background:#f2f6f9;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1e2d38}
.admin-auth-screen{min-height:100vh;display:grid;place-items:center;padding:40px}
.auth-panel{max-width:380px;width:100%;text-align:center}
.auth-panel .brand-lg{margin:0 0 6px;font-size:34px}
.admin-login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.admin-login-form input{border:1px solid #d2e1ed;border-radius:12px;padding:10px 12px;background:#fff}
.admin-login-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,114,230,.18)}
.admin-app{display:flex;min-height:100vh}
.admin-sidebar{width:220px;background:#102837;color:#cfe0ec;display:flex;flex-direction:column;padding:18px 16px;gap:24px;position:sticky;top:0;align-self:flex-start;min-height:100vh}
.side-brand .brand-mini{font-weight:700;font-size:22px;color:#fff;text-decoration:none;letter-spacing:.5px}
.side-nav{display:flex;flex-direction:column;gap:6px}
.side-link{background:transparent;color:#cfe0ec;border:1px solid transparent;text-align:left;padding:10px 14px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s,border .2s}
.side-link:hover{background:#163549}
.side-link.active{background:#1672E6;border-color:#1672E6;color:#fff;box-shadow:0 4px 14px -6px rgba(22,114,230,.5)}
.side-bottom{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.side-aux{flex:1;background:#163549;color:#cfe0ec;border:1px solid #1d4256;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px}
.side-aux:hover{background:#1e4c63}
.side-aux.danger{background:#2d3f47;border-color:#bf2e37;color:#f7d8da}
.side-aux.danger:hover{background:#bf2e37;color:#fff}
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 28px 14px}
.view-title{margin:0;font-size:22px;letter-spacing:.5px}
.user-badge{background:#fff;border:1px solid #d5e3ef;padding:6px 12px;border-radius:24px;font-size:13px;color:#1f3a4a;display:flex;align-items:center;gap:8px;box-shadow:0 3px 8px -4px rgba(0,0,0,.12)}
.admin-content{padding:0 28px 60px;display:flex;flex-direction:column;gap:38px}
.metric-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metric-card{background:#fff;border:1px solid #d8e4ef;border-radius:18px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.metric-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#1672E6,#55b8ff);opacity:0;transition:opacity .4s}
.metric-card:hover:before{opacity:.08}
.mc-label{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:#4a5c6a;font-weight:600}
.mc-value{font-size:30px;font-weight:600;color:#15364b;line-height:1}
.mc-trend{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#5a6d79}
.mc-trend.up{color:#1d7c42}
.mc-trend.neutral{color:#566d80}
.panel-split{display:grid;gap:24px;grid-template-columns:1fr 1fr}
@media (max-width:980px){.panel-split{grid-template-columns:1fr}}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mini-table,.data-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mini-table li,.data-list li{background:#fff;border:1px solid #dce6f0;padding:10px 12px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.mini-table li .tag,.data-list li .tag{background:#1672E6;color:#fff;font-size:10px;padding:3px 7px;border-radius:8px;letter-spacing:.6px;font-weight:500}
.data-list li .small-id{font-family:monospace;font-size:11px;color:#335065}
.toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search-input{background:#fff;border:1px solid #d3e2ee;padding:10px 12px;border-radius:12px;font-size:14px;min-width:220px}
.invoice-form{display:flex;flex-direction:column;gap:16px}
.invoice-form input,
.invoice-form textarea,
.invoice-form select{background:#f9fcfe;border:1px solid #d5e3ef;border-radius:12px;padding:10px 12px;font-size:14px}
.invoice-form input:focus,
.invoice-form textarea:focus,
.invoice-form select:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 3px rgba(22,114,230,.2)}
.form-row-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.form-row-2{grid-template-columns:1fr}}
/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:100}
.modal.active{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(17,38,54,.55);backdrop-filter:blur(3px)}
.modal-dialog{position:relative;max-width:480px;margin:90px auto;padding:0}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modal-close{background:#f0f5fa;border:1px solid #d1dde8;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:18px}
.modal-close:hover{background:#1672E6;color:#fff;border-color:#1672E6}
/* Dark mode */
.dark .admin-body,
.dark .admin-app{background:#0f1820;color:#d5e0e7}
.dark .admin-sidebar{background:#0d2431}
.dark .metric-card{background:#132835;border-color:#1f3d4d}
.dark .mini-table li,.dark .data-list li{background:#132835;border-color:#1f3d4d}
.dark .card{background:#132835;border-color:#1f3d4d}
.dark .search-input,
.dark .invoice-form input,
.dark .invoice-form textarea,
.dark .invoice-form select{background:#132835;border-color:#264456;color:#d5e0e7}
.dark .side-link{color:#b7c8d4}
.dark .side-link.active{background:#1672E6;color:#fff}
.dark .user-badge{background:#132835;border-color:#264456;color:#d5e0e7}
.card{background:#fff;border:1px solid #dbe6f1;border-radius:20px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;position:relative}
.view-panel{display:flex;flex-direction:column;gap:32px}

/* === Admin Login Form Refinement === */
.admin-auth-screen{padding:60px}
.auth-panel{
  max-width:440px;
  padding:42px 46px 48px;
  border-radius:26px;
}
.auth-panel .brand-lg{
  font-size:36px;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.admin-login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:10px;
}
.admin-login-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#1f3442;
  letter-spacing:.3px;
}
.admin-login-form input{
  width:100%;
  background:#fff;
  border:1px solid #cfdce7;
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.3;
  min-height:46px;
  transition:border .25s, box-shadow .25s;
}
.admin-login-form input:focus{
  outline:none;
  border-color:#1672E6;
  box-shadow:0 0 0 4px rgba(22,114,230,.18);
}
.admin-login-form .btn{
  width:100%;
  height:48px;
  border-radius:14px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.4px;
}
.auth-panel .tiny{
  margin-top:20px;
  line-height:1.4;
}
@media (max-width:520px){
  .auth-panel{padding:38px 30px 44px}
}

/* === Case Entry === */
.case-entry-form{display:flex;flex-direction:column;gap:26px}
.ce-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.case-entry-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.4px;color:#284153}
.case-entry-form input, .case-entry-form select{
  background:#f9fcfe;border:1px solid #d3e2ee;border-radius:12px;padding:10px 12px;font-size:14px
}
.case-entry-form input:focus, .case-entry-form select:focus{
  outline:none;border-color:#1672E6;box-shadow:0 0 0 3px rgba(22,114,230,.15);background:#fff
}
.line-table-wrap{border:1px solid #dbe6f1;border-radius:18px;padding:16px;background:#fff}
.line-table{width:100%;border-collapse:collapse;font-size:13px}
.line-table th{text-align:left;font-weight:600;padding:6px 6px 10px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#486071}
.line-table td{padding:6px 6px;vertical-align:middle}
.line-table select, .line-table input{
  width:100%;border:1px solid #d2dfe9;border-radius:10px;padding:6px 8px;font-size:13px;background:#fff
}
.line-table input:focus, .line-table select:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.15)}
.line-remove-btn{background:#f0f5fa;border:1px solid #cedbe6;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1}
.line-remove-btn:hover{background:#d9534f;color:#fff;border-color:#d9534f}
.totals-box{margin-top:-2px;display:flex;flex-direction:column;gap:6px;max-width:340px}
.totals-box .t-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0}
.totals-box .t-row.total{border-top:1px dashed #c9d6e1;margin-top:6px;padding-top:10px;font-size:15px;font-weight:600}
.small-table li{font-size:12.5px}
.small-table li strong{font-size:12.5px}
#ceMsg{margin-top:4px}

/* === Manage (Products / Clients) === */
.manage-tabs{display:flex;gap:8px;margin:4px 0 16px}
.m-tab{background:#e9f2f9;border:1px solid #d1e0eb;padding:8px 14px;border-radius:10px;font-size:13px;cursor:pointer;font-weight:500}
.m-tab.active{background:#1672E6;color:#fff;border-color:#1672E6;box-shadow:0 3px 10px -4px rgba(22,114,230,.5)}
.manage-pane{display:none;animation:fade .25s}
.manage-pane.active{display:block}
.mini-form .mf-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:center;margin-bottom:6px}
.mini-form input{background:#f9fcfe;border:1px solid #d3e2ee;border-radius:10px;padding:8px 10px;font-size:13px}
.mini-form input:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.25)}
.m-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.m-table th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;text-align:left;padding:6px 6px 8px;color:#4c6270}
.m-table td{padding:6px 6px;border-top:1px solid #e1edf5;vertical-align:middle}
.m-table td input.inline-edit{width:90px;border:1px solid #d2dfe9;border-radius:8px;padding:4px 6px;font-size:12.5px}
.m-table td input.inline-edit:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.2)}
.inline-edit{width:100%;border:1px solid #d2dfe9;border-radius:8px;padding:4px 6px;font-size:12.5px;background:#fff}
.inline-edit:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.2)}
.tag-small{background:#1672E6;color:#fff;font-size:10px;padding:3px 6px;border-radius:8px;letter-spacing:.5px}
.btn-ghost-small{background:#f0f6fa;border:1px solid #d2e2ef;padding:4px 8px;font-size:11.5px;border-radius:8px;cursor:pointer}
.btn-ghost-small:hover{background:#1672E6;color:#fff;border-color:#1672E6}
.client-wrap{display:flex;flex-direction:column;gap:18px;margin-top:10px}
.client-block{border:1px solid #dbe6f1;background:#fff;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.client-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ovr-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ovr-form select,.ovr-form input{background:#fff;border:1px solid #d4e1ec;border-radius:10px;padding:6px 8px;font-size:12.5px}
.ovr-form input:focus,.ovr-form select:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.15)}
.ovr-list{display:flex;flex-wrap:wrap;gap:6px}
.ovr-chip{background:#f0f6fa;border:1px solid #cddce7;padding:4px 8px;font-size:11.5px;border-radius:16px;display:flex;align-items:center;gap:4px}
.ovr-chip button{background:#e3edf3;border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:12px;line-height:1}
.ovr-chip button:hover{background:#d04b42;color:#fff}
.client-block .danger-del{margin-left:auto}
.danger-del{background:#fff2f2;border:1px solid #e7b4b2;color:#b43630;padding:4px 10px;font-size:12px;border-radius:10px;cursor:pointer}
.danger-del:hover{background:#d9534f;color:#fff;border-color:#d9534f}
.dark .client-block{background:#132835;border-color:#1f3d4d}
.dark .m-tab{background:#203647;border-color:#2b4d61;color:#d1dbe2}
.dark .m-tab.active{background:#1672E6;color:#fff}

/* === Case Manager Enhancements === */
.mc-case-form{display:flex;flex-direction:column;gap:22px}
.mc-fieldset{border:1px solid #d6e3ee;border-radius:18px;padding:16px 18px;margin:0 0 26px;background:#fff}
.mc-fieldset legend{padding:0 10px;font-size:13px;letter-spacing:.5px;font-weight:600;color:#2e4a5c}
.mc-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.mc-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#2a4657}
.mc-grid input,.mc-grid select{background:#f9fcfe;border:1px solid #d1dee9;border-radius:10px;padding:8px 10px;font-size:13px}
.mc-grid input:focus,.mc-grid select:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.2)}
.mc-add-wrap{display:flex;align-items:center;height:100%}
.mc-lines-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.mc-lines-table th{background:#f0f6fa;text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:6px 8px;color:#4d6271}
.mc-lines-table td{padding:6px 6px;border-top:1px solid #e2edf4;vertical-align:middle}
.mc-lines-table input{width:100%;border:1px solid #d2dfe9;border-radius:8px;padding:5px 6px;font-size:12.5px;background:#fff}
.mc-lines-table select{width:100%;border:1px solid #d2dfe9;border-radius:8px;padding:5px 6px;font-size:12.5px;background:#fff}
.mc-lines-table input:focus,.mc-lines-table select:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.15)}
.mc-remove{background:#f0f5fa;border:1px solid #cedbe6;width:28px;height:28px;border-radius:8px;cursor:pointer}
.mc-remove:hover{background:#d9534f;border-color:#d9534f;color:#fff}
.mc-notes-label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#2a4657;margin-top:14px}
.mc-notes-label textarea{border:1px solid #d1dee9;border-radius:12px;background:#f9fcfe;padding:10px 12px;font-size:13px;resize:vertical;min-height:70px}
.mc-notes-label textarea:focus{outline:none;border-color:#1672E6;box-shadow:0 0 0 2px rgba(22,114,230,.2);background:#fff}
.mc-totals{display:flex;flex-wrap:wrap;gap:18px;margin-top:4px;font-size:13px}
.mc-totals div{display:flex;align-items:center;gap:6px}
.mc-total-final{font-weight:600;font-size:14px}
.mc-actions-row{display:flex;align-items:center;gap:16px;margin-top:4px}
.mc-cases-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.mc-cases-table th{background:#f0f6fa;text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:6px 6px;color:#4d6271}
.mc-cases-table td{padding:6px 6px;border-top:1px solid #e1edf5;vertical-align:top;line-height:1.3}
.mc-cases-table td small{display:block;color:#5a6c78}
.mc-cases-table input[type=checkbox]{width:16px;height:16px}
.danger{background:#d9534f;color:#fff;border:none}
.danger:disabled{background:#e5a3a0;cursor:not-allowed}
.danger:hover:not(:disabled){background:#c6403d}
.mc-list-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 6px}
.dark .mc-fieldset{background:#132835;border-color:#1f3d4d}
.dark .mc-lines-table th,.dark .mc-cases-table th{background:#1c3a4d;color:#b9ceda}
.dark .mc-lines-table td,.dark .mc-cases-table td{border-color:#244b5f}
.logo-svg,
.logo-compact {
  display:block;
  height:80px;
  width:auto;
}
.logo-svg.footer {
  height:60px;
}
.brand,
.footer-brand {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:1;
}

/* Admin screen */
.admin-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 0 20px;
  text-align:center;
}
.admin-logo .logo-svg{
  height:100px;
  width:auto;
}
@media (max-width:900px){
  .admin-logo .logo-svg{ height:86px; }
}
@media (max-width:520px){
  .admin-logo .logo-svg{ height:78px; }
}

/* Chat Widget */
.chat-widget{
  position:fixed;
  bottom:16px;
  right:16px;
  z-index:20000;
  font-family:inherit;
}
.chat-toggle{
  background:#1672E6;
  color:#fff;
  border:0;
  border-radius:24px;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(22,114,230,.35);
}
.chat-toggle:hover{ background:#0f63cc; }
.chat-toggle:focus{ outline:2px solid rgba(22,114,230,.6); outline-offset:2px; }
.chat-dot{
  display:inline-block;
  width:8px;
  height:8px;
  background:#ff4242;
  border-radius:50%;
}

.chat-panel{
  position:fixed;
  bottom:72px;
  right:16px;
  width:340px;
  max-height:70vh;
  background:#fff;
  color:#0a2540;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  pointer-events:auto;
  animation:chatIn .25s ease;
  font-size:13px;
}
.chat-panel[hidden]{ display:none !important; }
@keyframes chatIn{
  from{ transform:translateY(14px); opacity:0;}
  to{ transform:translateY(0); opacity:1;}
}

.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:#f5f9fc;
  border-bottom:1px solid #e2eef5;
}
.chat-head-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.chat-user-mini{
  font-size:11px;
  color:#526371;
}
.chat-head-actions{
  display:flex;
  gap:4px;
}
.chat-min,
.chat-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:2px 6px;
  border-radius:6px;
  color:#4b5b67;
}
.chat-min:hover,
.chat-close:hover{
  background:#e5eef5;
}

.chat-init{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 16px 16px;
}
.init-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:#2f4656;
}
.chat-init input{
  border:1px solid #c8d9e6;
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
}
.chat-init input:focus{
  outline:none;
  border-color:#1672E6;
  box-shadow:0 0 0 2px rgba(22,114,230,.15);
}
.btn-init{
  background:#1672E6;
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
  font-weight:600;
}
.btn-init:hover{ background:#0f63cc; }
.init-msg{ margin:0; min-height:16px; color:#b33; }

.chat-main{
  display:flex;
  flex-direction:column;
  height:100%;
  flex:1;
}
.chat-user-bar{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  background:#f6f9ff;
  border-bottom:1px solid #e2eef5;
  color:#2f4656;
}
.chat-reset{
  background:none;
  border:none;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  color:#5a6b76;
}
.chat-reset:hover{ color:#1d2e39; }

.chat-messages{
  flex:1;
  padding:12px;
  overflow-y:auto;
   background:#fff;
  scrollbar-width:thin;
}
.chat-messages::-webkit-scrollbar{ width:8px; }
.chat-messages::-webkit-scrollbar-thumb{
  background:#c7d6e2;
  border-radius:4px;
}

.chat-msg{
  margin:6px 0;
  max-width:85%;
  padding:8px 10px;
  border-radius:10px;
  line-height:1.35;
  word-wrap:break-word;
  background:#eef5fb;
  color:#1d2e39;
  position:relative;
  font-size:13px;
}
.chat-msg.user{
  margin-left:auto;
  background:#1672E6;
  color:#fff;
  border-bottom-right-radius:4px;
}
.chat-msg.admin{
  background:#f1f5fb;
  color:#0a2540;
  border-bottom-left-radius:4px;
}

/* === THÊM VÀO CUỐI PHẦN CHAT WIDGET === */

.chat-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #28a745; /* Green */
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.msg-sender {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #526371;
}

.chat-msg.user .msg-sender {
  color: rgba(255, 255, 255, 0.8);
}


.chat-form{
  display:flex;
  gap:8px;
  padding:10px;
  border-top:1px solid #eef3fb;
  background:#fafcfe;
}
.chat-form input{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #dfe8f5;
}
.btn-send{
  background:#1672E6;
  border:none;
  color:#fff;
  width:44px;
  border-radius:22px;
  cursor:pointer;
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-send:hover{ background:#0f63cc; }
.chat-hint{
  text-align:center;
  font-size:11px;
  padding:4px 8px 8px;
  color:#6a7c88;
}

@media (max-width:560px){
  .chat-panel{ width:94vw; right:-4px; }
}

.dark .chat-panel{ background:#132534; border-color:#1d3a4a; }
.dark .chat-head{ background:#183041; border-color:#23495c; }
.dark .chat-user-bar{ background:#183041; border-color:#23495c; color:#cfe2ec; }
.dark .chat-msg{ background:#1d3a4a; color:#e0eef5; }
.dark .chat-msg.user{ background:#1672E6; }
.dark #chatInput{ background:#0f212e; color:#e0eef5; border-color:#27485d; }
.dark .chat-form{ background:#142a39; border-color:#1d3a4a; }
.dark .chat-min:hover,
.dark .chat-close:hover{ background:#23495c; }

/* Thêm vào cuối file: */

/* Mobile Menu Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 10px;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background: #1f2937;
  margin: 2px 0;
  border-radius: 1px;
  transition: 0.3s;
}

.nav-toggle:hover span {
  background: #0F74E6;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex !important;
  }
}