/* ═══════════════════════════════════════════════════════════
   AE-PLX-LANGSON – Shared Dark Corporate Theme
   static/css/main.css
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #0f1923;
    color: #e0e8f0;
    min-height: 100vh;
}

a { color: #2a9fff; }

/* ── Card ─────────────────────────────────────────────────── */
.card {
    background: #0e1d2e;
    border: 1px solid rgba(42,127,255,.14);
    border-radius: 20px;
    padding: 36px 40px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

.card-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.card-icon  { font-size: 36px; margin-bottom: 10px; }
.card-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.card-sub   { font-size: 13px; color: #4a7a9a; }

/* ── Panel ────────────────────────────────────────────────── */
.panel {
    background: #0e1d2e;
    border: 1px solid rgba(42,127,255,.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.panel-title {
    font-size: 15px; font-weight: 700; color: #fff;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex; align-items: center; gap: 8px;
}

/* ── Form inputs ──────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 11px; font-weight: 700;
    color: #4a7a9a; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 7px;
}
.fi,
.field input,
.field select,
.field textarea {
    width: 100%; padding: 12px 15px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(42,127,255,.18);
    border-radius: 10px;
    color: #e0e8f0; font-size: 14px;
    outline: none; transition: .2s; font-family: inherit;
}
.fi:focus, .field input:focus, .field select:focus, .field textarea:focus {
    border-color: #2a7fff;
    background: rgba(42,127,255,.06);
}
.fi::placeholder, .field input::placeholder, .field textarea::placeholder {
    color: #2a4a5a; font-size: 13px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%234a8aaa' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><polygon points='0,5 10,15 20,5'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px;
}

.field-hint { font-size: 12px; color: #3a6a7a; font-style: italic; margin-bottom: 7px; }
.section-label {
    font-size: 11px; font-weight: 700; color: #2a7fff;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(90deg, #1a4fff, #2a7fff);
    color: #fff; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: .2s;
}
.btn-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-back {
    display: block; width: 100%; margin-top: 24px; padding: 13px;
    background: rgba(42,127,255,.1);
    border: 1px solid rgba(42,127,255,.2);
    border-radius: 12px; color: #2a9fff;
    font-size: 14px; font-weight: 600;
    text-align: center; text-decoration: none; transition: .2s;
}
.btn-back:hover { background: rgba(42,127,255,.18); }

.btn-del-sm {
    padding: 6px 14px;
    background: rgba(255,77,77,.1);
    border: 1px solid rgba(255,77,77,.2);
    border-radius: 8px; color: #ff6b6b;
    font-size: 12px; font-weight: 600;
    cursor: pointer; transition: .2s;
}
.btn-del-sm:hover { background: rgba(255,77,77,.2); }

.back-a {
    color: #4a8aaa; font-size: 13px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: .2s;
}
.back-a:hover { color: #2a9fff; }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap {
    background: #0e1d2e;
    border: 1px solid rgba(42,127,255,.12);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
table  { width: 100%; border-collapse: collapse; }
thead th {
    background: rgba(42,127,255,.12);
    color: #4a8aaa; font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 14px 16px; text-align: center;
    border-bottom: 1px solid rgba(42,127,255,.12);
}
tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); transition: .15s; }
tbody tr:hover { background: rgba(42,127,255,.04); }
tbody td { padding: 13px 16px; font-size: 14px; color: #c0d0e0; text-align: center; }

/* ── Select custom ────────────────────────────────────────── */
.ch-select {
    padding: 11px 36px 11px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(42,127,255,.2);
    border-radius: 10px; color: #e0e8f0; font-size: 14px;
    outline: none; cursor: pointer; font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%234a8aaa' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><polygon points='0,5 10,15 20,5'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: .2s;
}
.ch-select:focus { border-color: #2a7fff; background: rgba(42,127,255,.06); }

/* ── Tính ca ──────────────────────────────────────────────── */
.num-input {
    width: 120px; padding: 9px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(42,127,255,.18);
    border-radius: 8px; color: #e0e8f0;
    font-size: 14px; text-align: center;
    outline: none; transition: .2s; font-family: inherit;
}
.num-input:focus { border-color: #2a7fff; background: rgba(42,127,255,.08); }
.td-name { font-weight: 700; color: #fff; font-size: 14px; }
.td-sp   { font-size: 11px; color: #4a7a9a; margin-top: 2px; }
.td-sl   { color: #fff; font-weight: 600; }
.td-gia  { color: #4a8aaa; }
.td-tt   { color: #2a9fff; font-weight: 700; font-size: 15px; }

.total-bar {
    background: linear-gradient(90deg,rgba(42,127,255,.1),rgba(42,127,255,.05));
    border: 1px solid rgba(42,127,255,.18);
    border-radius: 14px; padding: 20px 28px; margin-top: 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.total-label { font-size: 14px; color: #4a8aaa; font-weight: 600; letter-spacing: .5px; }
.total-val   { font-size: 36px; font-weight: 800; color: #fff; }
.total-unit  { font-size: 16px; color: #4a7a9a; margin-left: 4px; }

/* ── Nhập xe téc results ──────────────────────────────────── */
.result-item { padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; border: 1px solid; }
.res-label   { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.res-val     { font-size: 20px; font-weight: 800; }
.res-status  { font-size: 12px; font-weight: 600; margin-top: 4px; }
.res-pos     { background:rgba(0,200,100,.07); border-color:rgba(0,200,100,.2); }
.res-pos .res-label  { color:rgba(0,200,100,.6); }
.res-pos .res-val    { color:#00e873; }
.res-pos .res-status { color:#00c864; }
.res-neg     { background:rgba(255,77,77,.07); border-color:rgba(255,77,77,.2); }
.res-neg .res-label  { color:rgba(255,77,77,.6); }
.res-neg .res-val    { color:#ff6b6b; }
.res-neg .res-status { color:#ff4d4d; }
.res-zero    { background:rgba(255,200,0,.07); border-color:rgba(255,200,0,.2); }
.res-zero .res-label  { color:rgba(255,200,0,.6); }
.res-zero .res-val    { color:#ffd700; }
.res-zero .res-status { color:#f5a623; }
.res-empty   { color:#2a4a5a; font-size:13px; text-align:center; padding:20px 0; }

/* ── Kết quả quy đổi ─────────────────────────────────────── */
.result-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    background: rgba(42,127,255,.06);
    border: 1px solid rgba(42,127,255,.14);
    border-radius: 12px; margin-bottom: 12px;
}
.result-label { font-size: 13px; color: #4a8aaa; font-weight: 600; }
.result-val   { font-size: 22px; font-weight: 800; color: #fff; }
.result-unit  { font-size: 12px; color: #4a7a9a; margin-left: 4px; }

/* ── Thông báo ────────────────────────────────────────────── */
.tb-item {
    background: rgba(255,152,0,.07);
    border-left: 3px solid #ff9800;
    border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.tb-time   { font-size: 11px; color: #5a7a9a; margin-bottom: 4px; }
.tb-title  { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.tb-body   { font-size: 13px; color: #8aaabb; line-height: 1.5; }
.tb-link   { color: #2a9fff; font-size: 12px; text-decoration: none; margin-top: 5px; display: inline-block; }
.tb-link:hover { text-decoration: underline; }

.tb-card {
    background: #0e1d2e;
    border: 1px solid rgba(255,152,0,.15);
    border-left: 4px solid #ff9800;
    border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; transition: .2s;
}
.tb-card:hover { background: #0f2236; }

/* ── Góp ý ────────────────────────────────────────────────── */
.gopy-item {
    background: rgba(13,110,253,.07);
    border-left: 3px solid #2a7fff;
    border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
}
.gopy-item b    { color: #fff; font-size: 14px; }
.gopy-item span { display: block; color: #7a9aaa; font-size: 13px; margin-top: 3px; }
.don-vi {
    display: inline-block;
    background: rgba(42,127,255,.1);
    border: 1px solid rgba(42,127,255,.2);
    border-radius: 6px; padding: 2px 8px;
    font-size: 12px; color: #4a9fff;
}
.noi-dung { color: #8aaabb; line-height: 1.6; }
.empty    { text-align: center; padding: 60px 20px; color: #2a4a5a; font-size: 16px; }

/* ── Stats ────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.stat-card  {
    background: rgba(42,127,255,.08);
    border: 1px solid rgba(42,127,255,.14);
    border-radius: 12px; padding: 14px 16px; text-align: center;
}
.stat-card .stat-val   { font-size: 26px; font-weight: 800; color: #fff; }
.stat-card .stat-label { font-size: 11px; color: #4a7a9a; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

.status-row {
    margin-top: 16px; background: rgba(0,0,0,.2);
    border-radius: 10px; padding: 12px 16px;
    display: flex; gap: 20px; flex-wrap: wrap;
}
.status-dot { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #7a9aaa; }
.dot-green  {
    width: 8px; height: 8px; border-radius: 50%;
    background: #00ff88; box-shadow: 0 0 8px #00ff88;
    animation: blink 2s infinite;
}
.dot-blue   {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2a7fff; box-shadow: 0 0 8px #2a7fff;
    animation: blink 2.4s infinite;
}

/* ── Loading ──────────────────────────────────────────────── */
.loading-msg {
    display: none; margin-top: 14px;
    background: rgba(42,127,255,.08);
    border: 1px solid rgba(42,127,255,.18);
    border-radius: 10px; padding: 12px 16px;
    font-size: 13px; color: #4a9fff; text-align: center;
}
select option {
    background: #0e1d2e;
    color: #e0e8f0;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }