/* ════════════════════════════════════════════════════════
   H77CONS Khái Toán — stylesheet v2.0
   Brand: Deep Green #0B3D2E | Gold #C9A961 | Cream #FFF9E6
   ════════════════════════════════════════════════════════ */

#h77cons-khai-toan-app {
    /* font-family: 'Segoe UI', Arial, sans-serif; */
    max-width: 640px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(11,61,46,0.13);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── HEADER ── */
.h77-header {
    background: #0B3D2E;
    padding: 22px 32px 20px;
}
.h77-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.h77-logo-icon,.h77-logo-img {
    width: 44px;
    height: 44px;
    background: #C9A961;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #0B3D2E;
    font-size: 18px;
}
.h77-logo-img {
    width: 50px;
    height: 50px;
    background:none
}
.h77-brand-name  { color: #C9A961; font-weight: 900; font-size: 19px; letter-spacing: 1.5px; }
.h77-brand-sub   { color: #7aab90; font-size: 11px; letter-spacing: 2px; }
.h77-header-title{ color: #ffffff; font-size: 15px; font-weight: 700; }
.h77-header-sub  { color: #7aab90; font-size: 12px; margin-top: 3px; }

/* ──  STEP BAR ── */
.h77-stepbar {
    background: #FFF9E6;
    padding: 14px 28px 12px;
    border-bottom: 1px solid rgba(212,185,122,0.25);
}
.h77-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.h77-steps-line-bg, .h77-steps-line-fill {
    position: absolute;
    top: 16px;
    left: 0;
    height: 2px;
    transition: width 0.4s ease;
}
.h77-steps-line-bg   {right: 0;background: #e0d8c8;}
.h77-steps-line-fill { background: #C9A961; }
.h77-step-dot {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    position: relative; z-index: 1;
}
.h77-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s;
    border: 2px solid #ccc;
    background: var(--off-white);
    color: var(--primary);
}
.h77-step-circle.active { background:#0B3D2E; border-color:#C9A961; color:#fff; }
.h77-step-circle.done   {background: #e5cb9a;border-color: #d4b98b;color:#0B3D2E;}
.h77-step-label { font-size: 10px; color: #999; font-weight: 400; white-space: nowrap; }
.h77-step-label.active {color: #C9A961;font-weight: 600;}

/* ──  BODY ── */
.h77-body { padding: 24px 32px; }

.h77-section-title {
    color: var(--primary);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
    margin-top: 0;
}

/* ──  FORM FIELDS ── */
.h77-field { margin-bottom: 16px; }
.h77-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.h77-required { color: #C00000; }
.h77-input, .h77-select, .h77-textarea {
    width: 100%;
    margin-bottom: 0;
    border-radius: 8px !important;
    border: 1.5px solid rgba(212,185,122,0.25) !important;
    background: #FFF9E6;
    font-size: 14px !important;
    color: #1a1a1a !important;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s !important;
    font-family: inherit;
    box-shadow: none !important;
}
.h77-input:focus, .h77-select:focus, .h77-textarea:focus {
    border-color: #C9A961;
}
.h77-input.zalo-input {
    border: 2px solid rgba(0,104,255,0.25) !important;
}
.h77-input.zalo-input:focus { border-color: #0068FF; }
.h77-textarea { resize: vertical; min-height: 80px; }
.h77-hint { font-size: 11px; margin-top: 4px; }
.h77-hint.zalo { color: #0068FF; }

/* ── LOẠI CÔNG TRÌNH ── */
.h77-ct-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; margin-bottom: 16px;
}
.h77-ct-card {
    padding: 14px 8px; border-radius: 10px; text-align: center;
    cursor: pointer; border: 2px solid #e0d8c8;
    background: #fff; color: #777; font-size: 13px;
    transition: all 0.2s;
}
.h77-ct-card:hover  { border-color: #C9A961; }
.h77-ct-card.active { border-color:#C9A961; background:#FFF9E6; color:#0B3D2E; font-weight:700; }
.h77-ct-emoji       { font-size: 24px; margin-bottom: 4px; }

/* ── SỐ TẦNG ── */
.h77-tang-row { display: flex; gap: 10px; flex-wrap: wrap; }
.h77-tang-btn {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    border: 2px solid #e0d8c8;
    background: var(--off-white);
    color: var(--text-dark);
    transition: all 0.2s;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.h77-tang-btn:hover  { border-color: #C9A961; }
.h77-tang-btn.active { border-color: #C9A961; background: #0B3D2E; color: #fff; }

/* ── DIỆN TÍCH PREVIEW ── */
.h77-dt-preview {
    background: #FFF9E6; border-radius: 10px;
    padding: 12px 16px; margin-top: 8px;
    color: #0B3D2E; font-size: 13px; display: none;
}

/* ── CHECKBOX HM BỔ SUNG ── */
.h77-checkbox-list { display: flex; flex-direction: column; gap: 8px; }
.h77-checkbox-item {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; padding: 10px 14px; border-radius: 8px;
    border: 1.5px solid #e0d8c8; background: #fff;
    transition: all 0.2s; user-select: none;
}
.h77-checkbox-item:hover  { border-color: #C9A961; }
.h77-checkbox-item.checked{ border-color: #C9A961; background: #FFF9E6; }
.h77-checkbox-item input  { accent-color: #C9A961; width:16px; height:16px; cursor:pointer; margin-bottom: 4px; }
.h77-checkbox-label       { font-size: 13px; color: #1a1a1a; }
.h77-checkbox-hs          { color: #888; margin-left: 4px; }
.h77-checkbox-bao-gia     { color: #C9A961; margin-left: 4px; }

/* ──  KHAI TOAN RESULT ── */
.h77-hero-card {
    background: #0B3D2E; border-radius: 14px;
    padding: 20px 24px; margin-bottom: 20px; color: #fff;
}
.h77-hero-name { font-size: 13px; opacity: 0.7; }
.h77-hero-name strong { color: #C9A961; }
.h77-hero-sub  { font-size: 12px; opacity: 0.6; margin-bottom: 14px; }
.h77-hero-stats{ display: grid; grid-template-columns:1fr 1fr 1fr; gap: 8px; }
.h77-stat-box {
    text-align: center; background: rgba(255,255,255,0.07);
    border-radius: 8px; padding: 10px 4px;
}
.h77-stat-val   { color: #C9A961; font-weight: 900; font-size: 22px; }
.h77-stat-label { font-size: 10px; opacity: 0.65; margin-top: 2px; }

/* ── BẢNG DTXD ── */
.h77-table-wrap {
    border: 1px solid rgba(212,185,122,0.25);
    border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.h77-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 0; }
.h77-table thead tr  { background: #0B3D2E; color: #fff; }
.h77-table th        { padding: 9px 12px !important; font-weight: 700; }
.h77-table th.left   { text-align: left; }
.h77-table th.center { text-align: center; }
.h77-table th.right  { text-align: right; }
.h77-table td.left   { text-align: left; color: #1a1a1a; }
.h77-table td.center { text-align: center; color: #888; }
.h77-table td.right  { text-align: right; }
.h77-table td        { padding: 7px 12px !important; }
.h77-table .row-even { background: #fff; }
.h77-table .row-odd  { background: #FFF9E6; }
.h77-table .td-money { color: #0B3D2E; font-weight: 600; }
.h77-row-tong-tho    { background: #C9A961; }
.h77-row-tong-tho td { font-weight: 700; color: #0B3D2E; padding: 9px 12px !important; }
.h77-row-tong-ck     { background: #0B3D2E; }
.h77-row-tong-ck td  { font-weight: 900; color: #fff; padding: 11px 12px; font-size: 13px; border-bottom: 0;}
.h77-row-tong-ck .td-ck-val { color: #C9A961; font-size: 15px; text-align: right; }

/* ──  NOTICES ── */
.h77-notice {
    border-radius: 8px; padding: 10px 14px;
    margin-bottom: 16px; font-size: 12px;
}
.h77-notice.warn    { background:#FFF9E6; color:#666; }
.h77-notice.error   { background:#fff0f0; border:1px solid #ffcccc; color:#C00000; }
.h77-notice.zalo    { background:rgba(0,104,255,0.06); border:1px solid rgba(0,104,255,0.2); color:#444; }
.h77-notice.zalo strong { color:#0068FF; font-size:13px; }

/* ──  BUTTONS ── */
.h77-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.h77-btn {
    padding: 2px 16px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    font-family: inherit;
    text-transform: none;
    height: 52px;
}
.h77-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.h77-btn.primary {background: #e5cb9a;color: var(--primary);}
.h77-btn.primary:hover:not(:disabled) {background: var(--primary);color: var(--off-white);}
.h77-btn.outline {background:transparent;color:#C9A961;border: 2px solid #C9A961;}
.h77-btn.outline:hover { background:#C9A96115; }
.h77-btn.dark    { background:#0B3D2E; color:#fff; }
.h77-btn.dark:hover { background:#164d3a; }
.h77-btn.flex1   { flex:1; }

/* ──  NAVIGATION BAR ── */
.h77-nav { padding: 0 32px 24px; display:flex; justify-content:space-between; }

/* ──  SUCCESS PAGE ── */
.h77-success { text-align:center; padding:32px 16px; }
.h77-success-emoji { font-size:56px; margin-bottom:16px; }
.h77-success h3 { color:#0B3D2E; font-size:20px; margin-bottom:8px; }
.h77-success p  { color:#888; font-size:14px; margin-bottom:24px; line-height:1.7; }
.h77-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.h77-status-card {
    padding:16px 12px; border-radius:12px; text-align:center;
}
.h77-status-card .icon  { font-size:24px; margin-bottom:6px; }
.h77-status-card .title { font-size:12px; font-weight:700; }
.h77-status-card .desc  { font-size:11px; color:#888; margin-top:4px; line-height:1.5; }
.h77-status-card.ok-email { background:rgba(11,61,46,0.08); border:1px solid rgba(11,61,46,0.2); }
.h77-status-card.ok-email .title { color:#0B3D2E; }
.h77-status-card.ok-zalo  { background:rgba(0,104,255,0.08); border:1px solid rgba(0,104,255,0.2); }
.h77-status-card.ok-zalo .title  { color:#0068FF; }
.h77-status-card.err { background:rgba(192,0,0,0.06); border:1px solid rgba(192,0,0,0.2); }
.h77-status-card.err .title { color:#C00000; }

/* ──  2-COL GRID ── */
.h77-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ──  FOOTER ── */
.h77-footer {
    background: var(--primary);
    padding:12px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.h77-footer span { color:#7aab90; font-size:11px; }

/* ──  RESPONSIVE ── */
@media (max-width: 480px) {
    .h77-body       { padding:20px 20px; }
    .h77-nav        { padding:0 20px 20px; }
    .h77-header     { padding:18px 20px; }
    .h77-stepbar    { padding:12px 16px; }
    .h77-footer     { padding:10px 20px; }
    .h77-hero-stats { grid-template-columns:1fr 1fr 1fr; }
    .h77-stat-val   { font-size:16px; }
    .h77-ct-grid    { grid-template-columns:1fr 1fr 1fr; }
    .h77-grid-2     { grid-template-columns:1fr; }
    .h77-status-grid{ grid-template-columns:1fr; }
    .h77-steps      { gap:2px; }
    .h77-step-label { font-size:9px; }
}