:root{--blue:#073f99;--blue2:#0056c7;--orange:#ff7900;--green:#4c9c2e;--ink:#0e2a56;--line:#dbe3ef;--bg:#f3f6fa;--white:#fff}*{box-sizing:border-box}html,body{margin:0;font-family:Arial,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}.site-header{background:#fff;box-shadow:0 2px 10px rgba(0,35,90,.16)}.header-main{height:86px;display:grid;grid-template-columns:280px 1fr 280px;align-items:center;padding:0 32px}.brand{text-decoration:none;color:var(--blue);display:flex;flex-direction:column;width:max-content}.brand span{font-size:35px;font-weight:900;font-style:italic;letter-spacing:-2px}.brand span b{color:var(--orange)}.brand small{font-size:10px;font-weight:800;letter-spacing:.2px}.header-title{text-align:center;display:flex;flex-direction:column}.header-title strong{font-size:28px;color:var(--blue);letter-spacing:.3px}.header-title small{font-size:13px;margin-top:4px}.header-user{justify-self:end;border-left:1px solid #e5eaf2;padding-left:24px;display:flex;flex-direction:column}.header-user small{font-size:11px;color:#6b7a91;margin-top:4px}.top-nav{height:46px;background:linear-gradient(90deg,#0750b7,#003a92);display:flex;align-items:stretch;padding:0 30px;gap:0}.top-nav a{color:#fff;text-decoration:none;padding:0 19px;display:flex;align-items:center;font-size:13px;font-weight:700;white-space:nowrap}.top-nav a:hover,.top-nav a.active{background:var(--orange)}.top-nav .logout{margin-left:auto}main{max-width:1500px;margin:18px auto;padding:0 24px}.filter-card,.quote-panel,.fare-card,.trip-summary{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(0,44,100,.08)}.filter-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:16px 24px;margin-bottom:14px}.filter-item label{display:block;font-size:12px;font-weight:900;color:var(--blue);margin-bottom:7px}.filter-item select{width:100%;height:43px;border:1px solid #cbd6e5;border-radius:7px;padding:0 13px;background:#fff;color:#17345f;font-size:14px}.quote-panel{padding:18px 24px;margin-bottom:14px}.quote-panel h2,.fare-card h2{font-size:18px;margin:0 0 15px;color:#073f99}.quote-form{display:grid;grid-template-columns:260px minmax(330px,1fr) 420px;gap:30px;align-items:center}.entry-switch{display:flex;gap:8px}.entry-tab{height:54px;border:1px solid #d4deeb;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 18px;font-weight:700;color:#29466f;background:#f8fafc}.entry-tab.active{border-color:var(--orange);color:var(--orange);background:#fff9f3}.km-input-wrap label{display:block;font-size:12px;font-weight:900;color:#164986;margin-bottom:6px}.km-input{height:86px;border:2px solid var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff}.km-input input{width:200px;border:0;outline:0;text-align:center;font-size:51px;font-weight:900;color:var(--orange);background:transparent}.km-input span{font-size:16px;font-weight:800;color:var(--orange)}.route-picker select{width:100%;height:54px;border:1px solid #cbd6e5;border-radius:8px;padding:0 12px}.quote-actions{display:grid;gap:10px}.btn-primary,.btn-save{height:48px;border:0;border-radius:6px;color:#fff;font-size:16px;font-weight:900;cursor:pointer}.btn-primary{background:linear-gradient(90deg,#ff8b00,#ff6a00)}.btn-save{background:linear-gradient(90deg,#0753bc,#003a9e)}.more-fields{grid-column:1/-1;color:#52647e;font-size:13px}.more-fields summary{cursor:pointer}.extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}.extra-grid input{height:38px;border:1px solid #cbd6e5;border-radius:6px;padding:0 10px}.extra-grid .wide{grid-column:1/-1}.fare-card{padding:18px 20px;margin-bottom:14px}.fare-card h2 small{font-size:14px}.fare-table-wrap{overflow-x:auto}.fare-matrix{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:1040px}.fare-matrix th,.fare-matrix td{border-right:1px solid #c8d2df;border-bottom:1px solid #c8d2df;text-align:center;height:52px;padding:8px}.fare-matrix thead tr:first-child th{border-top:1px solid #c8d2df}.fare-matrix th:first-child,.fare-matrix td:first-child{border-left:1px solid #c8d2df}.fare-matrix .side-head,.fare-matrix tbody th{width:180px;background:linear-gradient(#0d4ca5,#073a87);color:#fff;font-weight:900}.vehicle-head{font-size:21px;color:#fff}.vehicle-head.four{background:linear-gradient(90deg,#ff8700,#ff6b00)}.vehicle-head.seven{background:linear-gradient(90deg,#2f6ecb,#1351ad)}.vehicle-head.electric{background:linear-gradient(90deg,#64ad3c,#40932b)}.fare-matrix thead tr:nth-child(2) th:not(.side-head){background:#f7f9fc;color:#163a6b;font-size:14px}.fare-matrix tbody td{font-size:16px;background:#fff}.fare-matrix tbody th small{font-size:10px}.contract-row td{height:69px}.contract-price{font-size:25px!important;font-weight:900}.contract-price.orange{color:#ff6f00}.contract-price.blue{color:#0648ad}.contract-price.green{color:#2c8527}.compare-row td{font-weight:800;color:#e22b2b}.trip-summary{display:grid;grid-template-columns:repeat(5,1fr);padding:0 10px;margin-bottom:18px}.trip-summary div{min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #dde5ef}.trip-summary div:last-child{border-right:0}.trip-summary span{font-size:12px;font-weight:900;color:#23466f}.trip-summary b{font-size:20px;margin-top:8px;color:#0a316c}footer{height:52px;background:linear-gradient(90deg,#0750b7,#003a92);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font-size:12px}.alert{max-width:1500px;margin:0 auto 12px;padding:12px 16px;border-radius:8px}.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}@media(max-width:1100px){.header-main{grid-template-columns:220px 1fr 200px;padding:0 18px}.header-title strong{font-size:22px}.top-nav{overflow-x:auto;padding:0 8px}.quote-form{grid-template-columns:220px 1fr 300px;gap:16px}.trip-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.header-main{height:auto;grid-template-columns:1fr;padding:12px;text-align:center;gap:10px}.brand,.header-user{justify-self:center}.header-user{border:0;padding:0}.top-nav a{padding:0 12px}.filter-card{grid-template-columns:1fr}.quote-form{grid-template-columns:1fr}.entry-switch{justify-content:center}.quote-actions{grid-template-columns:1fr 1fr}.extra-grid{grid-template-columns:1fr}.extra-grid .wide{grid-column:auto}.trip-summary{grid-template-columns:1fr 1fr}.trip-summary div{border-bottom:1px solid #dde5ef}.km-input input{font-size:42px}main{padding:0 10px}}

/* V5.5 UI3: full màn hình + hai chế độ Tính theo KM / Giá tuyến */
main{width:calc(100% - 28px);max-width:none;margin:14px auto;padding:0}
.alert{width:calc(100% - 28px);max-width:none}
.filter-card,.quote-panel,.fare-card,.trip-summary{width:100%}
.filter-card{padding:13px 18px;margin-bottom:10px}
.quote-panel{padding:14px 18px;margin-bottom:10px}
.fare-card{padding:14px 16px;margin-bottom:10px}
.quote-form{grid-template-columns:300px minmax(420px,1fr) 360px;gap:22px}
.two-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two-mode-buttons .entry-tab{width:100%;height:58px;border:1px solid #cfd9e8;cursor:pointer;font-size:14px}
.two-mode-buttons .entry-tab.active{border:2px solid var(--orange);box-shadow:0 0 0 3px rgba(255,121,0,.09)}
.input-area{min-width:0}
.mode-panel{display:none}.mode-panel.active{display:block}
.route-picker label{display:block;font-size:12px;font-weight:900;color:#164986;margin-bottom:6px}
.route-picker select{height:86px;border:2px solid var(--orange);font-size:17px;font-weight:700;color:#17345f;background:#fff}
.route-empty{display:block;margin-top:6px;color:#b42318;font-weight:700}
.fare-matrix{min-width:1180px}
.fare-matrix .side-head,.fare-matrix tbody th{width:155px}
.vehicle-head{font-size:20px}
.header-main{padding-left:24px;padding-right:24px}
.top-nav{padding-left:18px;padding-right:18px}
@media(min-width:1600px){
  main{width:calc(100% - 40px)}
  .quote-form{grid-template-columns:340px minmax(560px,1fr) 420px;gap:28px}
  .fare-matrix th,.fare-matrix td{height:58px}
  .contract-price{font-size:27px!important}
}
@media(max-width:1100px){
  main{width:calc(100% - 18px)}
  .quote-form{grid-template-columns:240px minmax(320px,1fr) 280px;gap:14px}
}
@media(max-width:800px){
  main{width:calc(100% - 12px);padding:0}
  .quote-form{grid-template-columns:1fr}
  .two-mode-buttons{grid-template-columns:1fr 1fr}
  .route-picker select{height:58px}
}

/* V7 */
.route-search{position:relative}.route-search label{display:block;font-size:12px;font-weight:900;color:#164986;margin-bottom:6px}.route-search>input{width:100%;height:86px;border:2px solid var(--orange);border-radius:10px;padding:0 18px;font-size:19px;font-weight:700;color:#17345f}.route-suggestions{display:none;position:absolute;z-index:50;left:0;right:0;top:112px;background:#fff;border:1px solid #cbd6e5;border-radius:8px;box-shadow:0 12px 30px rgba(0,40,100,.18);max-height:360px;overflow:auto}.route-suggestions.show{display:block}.route-suggestion{display:block;width:100%;border:0;border-bottom:1px solid #e5ebf3;background:#fff;text-align:left;padding:11px 14px;cursor:pointer;color:#17345f}.route-suggestion:hover,.route-suggestion.best{background:#eef5ff}.route-suggestion b{display:block;font-size:15px}.route-suggestion span{display:block;color:#667892;font-size:12px;margin-top:3px}.fare-matrix.v7{min-width:1450px}.fare-matrix.v7 .side-head,.fare-matrix.v7 tbody th{width:145px}.fare-matrix.v7 th,.fare-matrix.v7 td{padding:7px 4px}.fare-matrix.v7 .contract-price{font-size:21px!important}.fare-matrix.v7 .contract-price small{font-size:11px;color:#9a3412}.fare-matrix.v7 .vehicle-head{font-size:18px}

/* =========================================================
   V7.1.2 - GIAO DIỆN ĐỒNG BỘ TOÀN HỆ THỐNG
   Áp dụng cho: đăng nhập, tổng quan, lịch sử, nhật ký,
   quản trị, giá đồng hồ, tuyến đường và dữ liệu giá.
   ========================================================= */

main > h1, main > h2, main > h3{color:var(--blue);margin:0 0 14px;font-weight:900}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(0,44,100,.08);padding:20px 22px;margin-bottom:16px}
.card h2,.card h3{margin:0 0 14px;color:var(--blue);font-size:20px}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.card-title h2{margin:0}
.muted{color:#687991;font-size:13px;line-height:1.55}.formula-note{margin-top:16px;padding:14px 16px;border:1px solid #ffd19e;background:#fff8ec;border-radius:9px;color:#704100;line-height:1.5}

.tabs{display:flex;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,44,100,.06)}
.tabs a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:8px;text-decoration:none;color:#173b70;font-weight:800;border:1px solid transparent;background:#f4f7fb}
.tabs a:hover{border-color:#9bb8df;background:#edf4ff}.tabs a.active{color:#fff;background:linear-gradient(90deg,var(--orange),#ff6500);box-shadow:0 4px 12px rgba(255,121,0,.2)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;align-items:end}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{min-width:0}.field label{display:block;margin-bottom:6px;color:#173f78;font-size:12px;font-weight:900}.field small{display:block;margin-top:5px;color:#6d7f98;font-size:11px}
.field input,.field select,.field textarea{width:100%;min-height:42px;border:1px solid #c9d6e7;border-radius:7px;background:#fff;padding:9px 11px;color:#17345f;font:inherit;outline:none}
.field textarea{min-height:88px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,121,0,.12)}
.check{display:flex;align-items:center;gap:8px;min-height:42px;font-weight:700;color:#27496f}.check input{width:17px;height:17px;accent-color:var(--blue)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.actions form{margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:0;border-radius:7px;background:linear-gradient(90deg,#0a57be,#03439a);color:#fff;text-decoration:none;font-size:13px;font-weight:900;cursor:pointer;white-space:nowrap;box-shadow:0 2px 5px rgba(0,55,130,.15)}
.btn:hover{filter:brightness(1.06)}.btn.secondary{background:#edf3fb;color:#15427c;border:1px solid #cfdbeb;box-shadow:none}.btn.danger{background:linear-gradient(90deg,#d83434,#b91c1c)}

.table-wrap{width:100%;overflow:auto;border:1px solid #d7e1ee;border-radius:9px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:780px}table th,table td{padding:11px 12px;border-bottom:1px solid #e2e8f1;text-align:left;vertical-align:middle;font-size:13px}table th{background:linear-gradient(90deg,#0d52b3,#074292);color:#fff;font-weight:900;position:sticky;top:0;z-index:1}table tr:last-child td{border-bottom:0}table tbody tr:nth-child(even){background:#f8fafd}table tbody tr:hover{background:#fff7eb}
pre{max-width:900px;white-space:pre-wrap;word-break:break-word;background:#10213d;color:#e8eef8;padding:12px;border-radius:7px;font-size:12px}
details summary{cursor:pointer;color:#0b55b5;font-weight:800;margin-top:5px}

.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:0 2px 9px rgba(0,44,100,.08);position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--orange)}.kpi small{display:block;color:#60738d;font-weight:800}.kpi strong{display:block;color:var(--blue);font-size:34px;line-height:1.15;margin:8px 0 3px}.kpi span{color:#8290a5;font-size:12px}

/* Login */
body:has(main .login-card) main{display:grid;place-items:center;min-height:calc(100vh - 184px)}
.login-card{width:min(440px,100%)}

/* Cải thiện card đăng nhập hiện hữu dù chưa gắn class login-card */
body:not(:has(.top-nav)) main>.card{width:min(450px,calc(100% - 20px));margin:40px auto;padding:26px}
body:not(:has(.top-nav)) main>.card:before{content:"ĐĂNG NHẬP HỆ THỐNG";display:block;color:var(--blue);font-size:21px;font-weight:900;margin-bottom:18px;text-align:center}

/* Trang quản trị dài: giữ khoảng cách và tiêu đề rõ */
main>.tabs+ .card{margin-top:0}
main>.card+ .card{margin-top:14px}

/* Footer luôn gọn và không che nội dung */
body{min-height:100vh;display:flex;flex-direction:column}.site-header{flex:0 0 auto}main{flex:1 0 auto}footer{flex:0 0 auto;margin-top:4px}

@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.grid,.grid.two,.summary{grid-template-columns:1fr}.card{padding:15px}.tabs{overflow-x:auto;flex-wrap:nowrap}.tabs a{white-space:nowrap}.actions{align-items:stretch}.actions .btn,.actions form,.actions form .btn{width:100%}.header-title strong{font-size:20px}}

/* V7.2 - chọn tuyến bằng bàn phím */
.route-suggestion.active,.route-suggestion[aria-selected="true"]{background:#fff3e6!important;color:#0b3f8a!important;border-left:5px solid var(--orange);padding-left:10px}
.route-suggestion.active b,.route-suggestion[aria-selected="true"] b{color:#0b3f8a}
/* V7.2.1 route search display fixes */
.selected-route-note{display:block;margin-top:7px;color:#8793a6;font-size:12px;font-weight:600;line-height:1.35}
.selected-route-note.hidden{display:none}
.route-suggestion span{color:#8b97a8!important;font-weight:500}
/* V7.2.1 route search display fixes */
.selected-route-note{display:block;margin-top:7px;color:#8793a6;font-size:12px;font-weight:600;line-height:1.35}
.selected-route-note.hidden{display:none}
.route-suggestion span{color:#8b97a8!important;font-weight:500}

.inline-move{display:flex;gap:8px;align-items:center;min-width:320px}.inline-move select{min-width:190px}.status-on{color:#11823b;font-weight:700}.status-off{color:#c62828;font-weight:700}



/* =========================================================
   V7.3 UI - Khung rõ từng nhóm xe
   ========================================================= */
.fare-matrix.v7{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:10px}
.fare-matrix.v7 .group-four{--group-color:#ff7900;--group-soft:#fff7ed}
.fare-matrix.v7 .group-seven{--group-color:#1760bd;--group-soft:#eff6ff}
.fare-matrix.v7 .group-ev4{--group-color:#55a52f;--group-soft:#f2faed}
.fare-matrix.v7 .group-ev7{--group-color:#2f9228;--group-soft:#eef9ec}
.fare-matrix.v7 .group-head{border:3px solid var(--group-color)!important;border-bottom-width:2px!important;box-shadow:inset 0 -2px 0 rgba(255,255,255,.22)}
.fare-matrix.v7 .group-left{border-left:3px solid var(--group-color)!important}
.fare-matrix.v7 .group-right{border-right:3px solid var(--group-color)!important;box-shadow:4px 0 0 #fff}
.fare-matrix.v7 tbody tr:last-child .group-four,.fare-matrix.v7 tbody tr:last-child .group-seven,.fare-matrix.v7 tbody tr:last-child .group-ev4,.fare-matrix.v7 tbody tr:last-child .group-ev7{border-bottom:3px solid var(--group-color)!important}
.fare-matrix.v7 thead tr:nth-child(2) .group-four,.fare-matrix.v7 thead tr:nth-child(2) .group-seven,.fare-matrix.v7 thead tr:nth-child(2) .group-ev4,.fare-matrix.v7 thead tr:nth-child(2) .group-ev7{background:var(--group-soft)!important}
.fare-matrix.v7 .contract-row td{background:#fff!important}
.fare-matrix.v7 .contract-row .group-four,.fare-matrix.v7 .contract-row .group-seven,.fare-matrix.v7 .contract-row .group-ev4,.fare-matrix.v7 .contract-row .group-ev7{box-shadow:inset 0 3px 0 var(--group-soft)}
@media(max-width:900px){.fare-matrix.v7 .group-head{border-width:2px!important}.fare-matrix.v7 .group-left{border-left-width:2px!important}.fare-matrix.v7 .group-right{border-right-width:2px!important}}

/* ===== V7.3.1 - Khung nhóm xe ===== */

.fare-matrix.v7{
    border-collapse:collapse;
}

.fare-matrix.v7 .group-head,
.fare-matrix.v7 .group-left,
.fare-matrix.v7 .group-right{
    border-color:#8fa3bd !important;
}

/* cạnh trái nhóm */
.fare-matrix.v7 .group-left{
    border-left:3px solid #8fa3bd !important;
}

/* cạnh phải nhóm */
.fare-matrix.v7 .group-right{
    border-right:3px solid #8fa3bd !important;
}

/* tiêu đề */
.fare-matrix.v7 .group-head{
    border-top:3px solid #8fa3bd !important;
    border-left:3px solid #8fa3bd !important;
    border-right:3px solid #8fa3bd !important;
}

/* đáy nhóm */
.fare-matrix.v7 tbody tr:last-child td.group-four,
.fare-matrix.v7 tbody tr:last-child td.group-seven,
.fare-matrix.v7 tbody tr:last-child td.group-ev4,
.fare-matrix.v7 tbody tr:last-child td.group-ev7{
    border-bottom:3px solid #8fa3bd !important;
}

/* bỏ hoàn toàn khoảng trắng giữa các nhóm */
.fare-matrix.v7 .group-right{
    box-shadow:none !important;
}
/* V8.1 - ô tìm nhanh ngay trên thanh tiêu đề bảng giá tuyến */
.table-search{display:block;width:100%;margin-top:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.8);border-radius:6px;background:#fff;color:#123;font-size:13px;font-weight:500;box-sizing:border-box}
.table-search::placeholder{color:#6b7280}.km-search{min-width:105px}
#routePriceTable th:first-child{min-width:330px}#routePriceTable th:nth-child(3){min-width:125px}

/* =========================================================
   V8.3 UI Compact - màn hình báo giá gọn cho 1366x768
   ========================================================= */
body.page-quote main, main{margin-top:10px}
.compact-filter{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:9px 14px;margin-bottom:8px;align-items:end}
.compact-filter .filter-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px}
.compact-filter .filter-item label{margin:0;white-space:nowrap;font-size:11px}
.compact-filter .filter-item select{height:34px;padding:0 10px;font-size:13px}
.quote-panel{padding:10px 14px;margin-bottom:8px}
.quote-form{grid-template-columns:260px minmax(330px,1fr) 315px;gap:16px}
.entry-tab{height:43px;padding:0 14px;font-size:12px}
.km-input-wrap label,.route-search label{margin-bottom:4px;font-size:11px}
.km-input{height:64px}
.km-input input{font-size:40px;width:150px}
.km-input span{font-size:14px}
.route-search>input{height:64px;font-size:16px;padding:0 14px}
.route-suggestions{top:88px}
.quote-actions{gap:7px}
.btn-primary,.btn-save{height:40px;font-size:14px}
.fare-card{padding:10px 12px;margin-bottom:8px}
.fare-card h2{font-size:16px;margin-bottom:8px}
.fare-matrix th,.fare-matrix td{height:42px;padding:5px 3px}
.fare-matrix.v7 .vehicle-head{font-size:16px}
.fare-matrix thead tr:nth-child(2) th:not(.side-head){font-size:12px}
.fare-matrix tbody td{font-size:14px}
.fare-matrix.v7 .contract-row td{height:52px}
.fare-matrix.v7 .contract-price{font-size:19px!important;white-space:nowrap}
.fare-matrix.v7 .side-head,.fare-matrix.v7 tbody th{width:108px;font-size:11px}
.price-info{border:0;background:transparent;color:#56708f;font-size:14px;font-weight:900;padding:0 0 0 3px;cursor:pointer;vertical-align:2px;line-height:1}
.price-info:hover,.price-info:focus{color:var(--orange);outline:0}
.price-source-popup{display:none;position:absolute;z-index:9999;min-width:190px;max-width:230px;padding:9px 12px;border:1px solid #b8c8dc;border-radius:8px;background:#fff;color:#123d75;font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(0,35,90,.2)}
.price-source-popup.show{display:block}
.trip-summary{padding:0 6px;margin-bottom:8px}
.trip-summary div{min-height:54px}
.trip-summary span{font-size:10px}
.trip-summary b{font-size:15px;margin-top:4px}
footer{height:40px}
@media(max-width:1100px){.quote-form{grid-template-columns:225px minmax(300px,1fr) 260px;gap:10px}}
@media(max-width:800px){.compact-filter{grid-template-columns:1fr}.compact-filter .filter-item{grid-template-columns:95px 1fr}.quote-form{grid-template-columns:1fr}.trip-summary div{min-height:50px}}


/* =========================================================
   V8.3 UI Final - tinh chỉnh hàng giá theo yêu cầu
   ========================================================= */
.fare-matrix.v7 .meter-row th,
.fare-matrix.v7 .meter-row td{
    height:38px;
    padding-top:3px;
    padding-bottom:3px;
}
.fare-matrix.v7 .meter-row th{
    line-height:1.05;
}
.fare-matrix.v7 .contract-row th,
.fare-matrix.v7 .contract-row td{
    height:56px;
}
.fare-matrix.v7 .contract-row th{
    font-size:12px;
    white-space:nowrap;
}
.fare-matrix.v7 .contract-row th span{
    vertical-align:middle;
}
.fare-matrix.v7 .contract-price{
    font-size:20px!important;
    line-height:1.1;
}
.fare-matrix.v7 .compare-row th,
.fare-matrix.v7 .compare-row td{
    height:34px;
    padding-top:2px;
    padding-bottom:2px;
    font-size:12px!important;
    font-weight:400!important;
    color:#111!important;
}
.fare-matrix.v7 .compare-row th{
    text-transform:none;
    letter-spacing:0;
}
.fare-matrix.v7 .compare-row td{
    color:#111!important;
}
.source-info-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:17px;
    height:17px;
    margin-left:5px;
    padding:0;
    border:1.5px solid currentColor;
    border-radius:50%;
    background:transparent;
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:1;
    vertical-align:middle;
}
.source-info-button:hover,.source-info-button:focus{
    color:#ffe0b2;
    border-color:#ffe0b2;
}


/* =========================================================
   V8.5.2 - Menu tài khoản dạng avatar xổ xuống
   ========================================================= */
.header-main{
    position:relative;
}
.user-menu{
    justify-self:end;
    position:relative;
    min-width:220px;
}
.user-menu summary{
    list-style:none;
}
.user-menu summary::-webkit-details-marker{
    display:none;
}
.user-menu-trigger{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:6px 10px;
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
    user-select:none;
    transition:.18s ease;
}
.user-menu-trigger:hover,
.user-menu[open] .user-menu-trigger{
    background:#f3f7fd;
    border-color:#d9e4f2;
}
.user-avatar{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ff8b00,#ff6a00);
    color:#fff;
    font-size:14px;
    font-weight:900;
    box-shadow:0 2px 7px rgba(255,121,0,.28);
}
.user-avatar.large{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:16px;
}
.user-summary{
    min-width:0;
    display:flex;
    flex-direction:column;
    text-align:left;
}
.user-summary b{
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#12386c;
    font-size:14px;
}
.user-summary small{
    color:#718198;
    font-size:10px;
    margin-top:3px;
}
.user-chevron{
    margin-left:auto;
    color:#54708f;
    font-size:13px;
    transition:transform .18s ease;
}
.user-menu[open] .user-chevron{
    transform:rotate(180deg);
}
.user-dropdown{
    position:absolute;
    z-index:3000;
    top:calc(100% + 8px);
    right:0;
    width:265px;
    padding:8px;
    border:1px solid #d7e1ee;
    border-radius:12px;
    background:#fff;
    box-shadow:0 14px 38px rgba(0,36,92,.22);
}
.user-dropdown:before{
    content:"";
    position:absolute;
    right:23px;
    top:-7px;
    width:12px;
    height:12px;
    background:#fff;
    border-left:1px solid #d7e1ee;
    border-top:1px solid #d7e1ee;
    transform:rotate(45deg);
}
.user-dropdown-head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px 10px 12px;
}
.user-dropdown-head div{
    min-width:0;
    display:flex;
    flex-direction:column;
}
.user-dropdown-head b{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#113d78;
    font-size:14px;
}
.user-dropdown-head small{
    margin-top:3px;
    color:#7a889c;
    font-size:11px;
}
.user-dropdown>a{
    display:flex;
    align-items:center;
    min-height:39px;
    padding:0 11px;
    border-radius:7px;
    color:#173f75;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}
.user-dropdown>a:hover{
    background:#edf4ff;
}
.user-dropdown-divider{
    height:1px;
    margin:6px 4px;
    background:#e4eaf2;
}
.user-dropdown .danger-link{
    color:#c62828;
}
.user-dropdown .danger-link:hover{
    background:#fff0f0;
}
@media(max-width:900px){
    .user-menu{
        justify-self:center;
        min-width:0;
    }
    .user-summary{
        display:none;
    }
    .user-menu-trigger{
        min-height:46px;
        padding:4px 8px;
    }
    .user-dropdown{
        right:50%;
        transform:translateX(50%);
    }
}


/* =========================================================
   V8.5.4 - Trang đăng nhập dùng public/assets/login.png
   Lưu ý: style.css và login.png nằm cùng thư mục assets,
   nên đường dẫn đúng là url("login.png").
   ========================================================= */

html,
body.login-page {
    width: 100%;
    min-height: 100%;
}

body.login-page {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background:
        linear-gradient(rgba(7, 24, 49, .36), rgba(7, 24, 49, .36)),
        url("login.png") center center / cover no-repeat fixed;
}

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px 64px;
    box-sizing: border-box;
}

.login-box {
    width: min(410px, calc(100vw - 36px));
    padding: 30px 32px 28px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 58px rgba(0, 29, 73, .34);
    box-sizing: border-box;
    backdrop-filter: blur(4px);
}

.login-brand {
    text-align: center;
    margin-bottom: 24px;
}

.login-brand-name {
    color: #07489d;
    font-size: 31px;
    line-height: 1;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1px;
}

.login-brand-name span {
    color: #ff6f00;
}

.login-brand h1 {
    margin: 15px 0 6px;
    color: #073f8c;
    font-size: 25px;
    line-height: 1.25;
}

.login-brand p {
    margin: 0;
    color: #56677e;
    font-size: 13px;
}

.login-form .field {
    margin-top: 14px;
}

.login-form label {
    display: block;
    margin-bottom: 6px;
    color: #123d72;
    font-size: 13px;
    font-weight: 700;
}

.login-form input {
    width: 100%;
    height: 44px;
    padding: 8px 12px;
    border: 1px solid #bfd0e5;
    border-radius: 7px;
    background: #fff;
    box-sizing: border-box;
    font-size: 15px;
    outline: none;
}

.login-form input:focus {
    border-color: #ff7900;
    box-shadow: 0 0 0 3px rgba(255, 121, 0, .14);
}

.login-submit {
    width: 100%;
    min-height: 45px;
    margin-top: 20px;
    border: 0;
    border-radius: 7px;
    background: #0754b7;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.login-submit:hover {
    background: #06489d;
}

.login-page .alert {
    margin: 0 0 12px;
}

.login-page-footer {
    position: fixed;
    right: 0;
    bottom: 14px;
    left: 0;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-size: 13px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

@media (max-width: 560px) {
    body.login-page {
        background-attachment: scroll;
    }

    .login-box {
        padding: 26px 22px 24px;
    }

    .login-brand-name {
        font-size: 27px;
    }

    .login-brand h1 {
        font-size: 22px;
    }
}

/* V9.2 - khóa Tính theo km khi chi nhánh chỉ dùng bảng giá tuyến */
.entry-tab.disabled,.entry-tab:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(1);background:#e8edf4!important;color:#718096!important;border-color:#cbd5e0!important;box-shadow:none!important}


/* V9.4 - STT bảng giá tuyến và khu vực nhân bản công thức */
#routePriceTable .route-stt{font-weight:800;text-align:center;white-space:nowrap}
#cloneFormulaCard{border-left:4px solid #ff7900}
#cloneFormulaCard h3{margin-top:0;color:#0b4ea2}

/* V10.1 - giao diện cấu hình giá tinh gọn */
.compact-main-tabs{gap:6px;flex-wrap:wrap}
.compact-main-tabs a{padding:11px 18px}
.config-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 14px 12px}
.config-subtabs a{display:inline-flex;align-items:center;padding:9px 14px;border:1px solid #d8e2f0;border-radius:9px;background:#fff;color:#0b3f87;font-weight:700;text-decoration:none}
.config-subtabs a.active{background:#fff4e8;border-color:#ff7a00;color:#d95f00}
.config-intro{padding-bottom:14px}
.compact-details{border:1px solid #dce5f1;border-radius:10px;background:#fff;padding:0 14px;margin-bottom:14px}
.compact-details>summary{cursor:pointer;font-weight:800;color:#0b438f;padding:13px 2px;list-style:none}
.compact-details>summary::-webkit-details-marker{display:none}
.compact-details>summary:after{content:'▾';float:right;color:#6b7c93}
.compact-details[open]>summary:after{content:'▴'}
.advanced-form{background:#f8fbff}
.formula-main-fields{margin-bottom:12px}
.formula-main-fields .field{margin-bottom:0}
.tier-guide{margin:12px 0}
.field small{display:block;margin-top:5px;line-height:1.35}
@media(max-width:760px){.config-subtabs{margin-left:8px;margin-right:8px}.config-subtabs a{flex:1;justify-content:center}.compact-main-tabs a{flex:1;text-align:center}}

/* Hàng % so sánh - chữ trắng */
.price-table .compare-row td,
.price-table .compare-row th,
.price-table .compare-percent {
    color: #fff !important;
}

/* =========================================================
   V10.3 - LOGIN PROFESSIONAL / CORPORATE
   ========================================================= */
html,body.login-page{width:100%;min-height:100%}
body.login-page{
    margin:0;min-height:100vh;overflow:hidden;
    font-family:Arial,"Segoe UI",sans-serif;
    background:
      linear-gradient(90deg,rgba(6,25,52,.20) 0%,rgba(6,25,52,.09) 48%,rgba(6,25,52,.16) 100%),
      url("login.png") center center/cover no-repeat fixed;
    color:#102d58;
}
body.login-page::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(3,22,48,.10) 0%,rgba(3,22,48,.03) 50%,rgba(3,22,48,.10) 100%);
}
.login-screen.v103{
    position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:flex-end;
    padding:clamp(24px,4vh,48px) clamp(42px,8vw,128px) clamp(24px,4vh,48px) 42px;
    box-sizing:border-box;
}
.login-box.v103{
    position:relative;width:min(372px,calc(100vw - 42px));padding:27px 29px 23px;
    border:1px solid rgba(255,255,255,.76);border-radius:18px;background:rgba(255,255,255,.935);
    box-shadow:0 24px 64px rgba(3,31,75,.25),0 4px 16px rgba(3,31,75,.10);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-sizing:border-box;overflow:hidden;
}
.login-box.v103::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,#ff7900 0 34%,#0a55b7 34% 68%,#4c9c2e 68% 100%);
}
.login-logo-v103{display:flex;justify-content:center;align-items:center;min-height:56px;margin:2px 0 10px}
.login-logo-v103 img{display:block;max-width:168px;max-height:66px;object-fit:contain}
.login-heading-v103{text-align:center;margin-bottom:20px}
.login-heading-v103 h1{margin:0;color:#073f8f;font-size:23px;line-height:1.18;font-weight:900;letter-spacing:.15px}
.login-heading-v103 p{margin:6px 0 0;color:#66768c;font-size:12px;line-height:1.4}
.login-box.v103 .alert{width:100%;margin:0 0 14px;padding:10px 12px;border-radius:9px;box-sizing:border-box;font-size:12px}
.login-form-v103 .field{margin-top:13px}
.login-form-v103 .field:first-child{margin-top:0}
.login-form-v103 label{display:block;margin:0 0 6px;color:#183f72;font-size:12px;font-weight:800}
.login-input-v103{position:relative}
.login-input-v103 .input-icon{
    position:absolute;left:13px;top:50%;transform:translateY(-50%);z-index:2;
    width:18px;text-align:center;color:#7589a4;font-size:12px;pointer-events:none;
}
.login-form-v103 input{
    width:100%;height:43px;padding:0 13px 0 39px;border:1px solid #c8d5e6;border-radius:8px;
    background:rgba(255,255,255,.98);color:#17345f;font-size:14px;outline:none;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;box-sizing:border-box;
}
.login-form-v103 input::placeholder{color:#9aa7b8}
.login-form-v103 input:focus{border-color:#ff7900;background:#fff;box-shadow:0 0 0 3px rgba(255,121,0,.11)}
.login-submit-v103{
    width:100%;min-height:44px;margin-top:19px;border:0;border-radius:8px;
    background:linear-gradient(180deg,#0b5cc7,#0648a5);color:#fff;font-size:14px;font-weight:900;
    letter-spacing:.1px;cursor:pointer;box-shadow:0 6px 14px rgba(6,72,165,.20);
    transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.login-submit-v103:hover{filter:brightness(1.045);box-shadow:0 8px 18px rgba(6,72,165,.25)}
.login-submit-v103:active{transform:translateY(1px)}
.login-footer-v103{
    margin:18px 0 0;padding-top:15px;border-top:1px solid #e5ebf2;text-align:center;
    color:#7b8798;font-size:11.5px;line-height:1.4;
}
body.login-page .login-page-footer{display:none!important}
@media(max-width:900px){
    body.login-page{background-position:center center}
    .login-screen.v103{justify-content:center;padding:28px}
}
@media(max-width:560px){
    body.login-page{overflow:auto;background-attachment:scroll;background-position:center center}
    body.login-page::before{background:rgba(4,24,50,.18)}
    .login-screen.v103{min-height:100svh;padding:22px 16px}
    .login-box.v103{width:min(360px,100%);padding:24px 22px 21px;border-radius:16px}
    .login-logo-v103 img{max-width:150px}
    .login-heading-v103 h1{font-size:21px}
}


/* =========================================================
   V10.3.2 - UI COMPACT THEO NHÓM / LABEL CÙNG HÀNG
   ========================================================= */

/* Label + ô nhập/select trên cùng một hàng */
.inline-field{
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    gap:10px;
}
.inline-field > label{
    margin:0 !important;
    white-space:nowrap;
}
.inline-field > input,
.inline-field > select{
    min-width:0;
}

/* Nhật ký: Nhóm | Tìm kiếm | Lọc cùng 1 hàng */
.audit-filter-card{padding:12px 18px !important}
.audit-filter-row{
    display:grid;
    grid-template-columns:minmax(250px,.8fr) minmax(460px,1.5fr) auto;
    gap:14px;
    align-items:center;
}
.audit-filter-row .actions{display:block}
.audit-filter-row .btn{min-height:38px;height:38px;padding:0 20px}

/* Các card chỉ có một selector: label + selector trên cùng hàng */
.compact-single-row{
    padding:12px 18px !important;
}
.inline-select-form{
    display:block;
}
.inline-select-form .inline-field{
    grid-template-columns:max-content minmax(320px,635px);
    justify-content:start;
}

/* Công thức chuẩn: tiêu đề + mô tả + nút trên cùng hàng */
.standard-formula-row{
    display:grid;
    grid-template-columns:max-content minmax(280px,1fr) max-content;
    align-items:center;
    gap:16px;
    padding:13px 18px !important;
}
.standard-formula-row h2,
.standard-formula-row p{
    margin:0 !important;
}
.standard-formula-row .btn{
    justify-self:end;
}

/* Form thêm mới: mặc định thu gọn */
.admin-collapsible{
    padding:0 18px !important;
}
.admin-collapsible > summary{
    min-height:48px;
    display:flex;
    align-items:center;
    margin:0;
}
.admin-collapsible[open]{
    padding-bottom:16px !important;
}

/* Phương thức áp dụng / cách áp dụng: hai khối cùng hàng, label + select cùng hàng */
.mode-inline-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:center !important;
}
.mode-inline-grid .inline-field{
    grid-template-columns:max-content minmax(0,1fr);
}
#formulaSourceField{
    grid-column:1 / -1;
    max-width:760px;
}

/* Desktop: gọn hơn nhưng không ép tất cả grid thành 5 cột */
@media (min-width:1180px){
    body:not(.login-page) .card{
        padding-top:14px;
        padding-bottom:14px;
    }
}

/* Responsive */
@media (max-width:1000px){
    .audit-filter-row{grid-template-columns:1fr 1.5fr auto}
    .standard-formula-row{grid-template-columns:1fr}
    .standard-formula-row .btn{justify-self:start}
    .inline-select-form .inline-field{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:760px){
    .audit-filter-row,
    .mode-inline-grid{
        grid-template-columns:1fr !important;
    }
    .inline-field,
    .inline-select-form .inline-field,
    .mode-inline-grid .inline-field{
        grid-template-columns:1fr !important;
        gap:5px;
    }
    #formulaSourceField{grid-column:auto;max-width:none}
}