﻿/* ===== MODULE: _sections.css ===== */
    /* ===== MANULIFE PRO SECTION ===== */
    #sectionManulifePro .info-item .val { font-weight: 900; color: #10b981; }
    #sectionManulifePro .warning-item .info-value { font-weight: bold; color: #dc2626; }
    #sectionManulifePro .warning-text { font-weight: bold; color: #dc2626; }
    
    /* Full width and two columns layout for Manulife Pro section */
    #sectionManulifePro .info-group.full-width { grid-column: 1 / -1; }
    #sectionManulifePro .info-group-content.two-columns { 
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    
    /* Medium/Landscape layout (min-width: 768px) */
    @media (min-width: 768px) {
      /* Three row layout for Duy tri sections - Desktop */
      #sectionManulifePro .info-group-content.three-row-layout {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      
      
      #sectionManulifePro .info-group-content.two-row-layout {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern {
        display: flex;
        flex-direction: column;
        min-height: 90px; 
      }
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-1, :nth-child(1)) {
        grid-column: 1 / -1; 
        min-height: auto; 
      }
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-2, :nth-child(2)),
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-3, :nth-child(3)),
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-4, :nth-child(4)),
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-5, :nth-child(5)) {
        grid-column: span 1; 
      }
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-6, :nth-child(6)),
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-7, :nth-child(7)),
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-8, :nth-child(8)),
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-9, :nth-child(9)) {
        grid-column: span 1; 
      }
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-10, :nth-child(10)) {
        grid-column: 1 / -1; 
        min-height: auto; 
      }
      
      /* Two row layout - 4 items per row */
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern {
        display: flex;
        flex-direction: column;
        min-height: 90px; 
      }
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-1, :nth-child(1)),
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-2, :nth-child(2)),
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-3, :nth-child(3)),
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-4, :nth-child(4)) {
        grid-column: span 1; 
      }
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-9, :nth-child(9)) {
        grid-column: 1 / -1; 
        min-height: auto; 
      }

      /* Custom placement for Fast-Track 2-row layout */
      #sectionManulifePro .info-group-content.two-row-layout.fasttrack-layout .info-item-modern:is(.mp-pos-7, :nth-child(7)) {
        grid-column: 1 / -1; 
        min-height: auto; 
      }

      #sectionManulifePro .info-group-content.two-row-layout.fasttrack-layout .info-item-modern:is(.mp-pos-3, :nth-child(3)) {
        grid-column: 3 / span 2; 
        grid-row: 1;
      }

      #sectionManulifePro .info-group-content.two-row-layout.fasttrack-layout .info-item-modern:is(.mp-pos-4, :nth-child(4)) {
        grid-column: 3 / span 2; 
        grid-row: 2; 
      }

      #sectionManulifePro .info-group-content.two-row-layout.fasttrack-layout .info-item-modern:is(.mp-pos-5, :nth-child(5)),
      #sectionManulifePro .info-group-content.two-row-layout.fasttrack-layout .info-item-modern:is(.mp-pos-6, :nth-child(6)) {
        grid-column: span 1; 
        grid-row: 2;
      }

      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-5, :nth-child(5)) {
        grid-column: 1;
      }

      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-6, :nth-child(6)) {
        grid-column: 2;
      }
    }
    
    /* Portrait layout (max-width: 767px) */
    @media (max-width: 767px) {
      #sectionManulifePro .pinned-warning {
        grid-column: 1 / -1;
      }
      
      /* Two columns layout for info items within each group */
      #sectionManulifePro .info-group-content {
        column-count: 2;
        column-gap: 12px;
        column-fill: balance;
      }
      
      /* Override two-columns class for mobile */
      #sectionManulifePro .info-group-content.two-columns {
        display: block;
        column-count: 2;
        column-gap: 12px;
        column-fill: balance;
      }
      
      
      #sectionManulifePro .info-group-content.three-row-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern {
        min-height: 85px;
      }
      
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-1, :nth-child(1)) {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: auto;
      }
      
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-2, :nth-child(2)) {
        grid-column: 1;
        grid-row: 2;
      }
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-6, :nth-child(6)) {
        grid-column: 2;
        grid-row: 2;
      }
      
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-3, :nth-child(3)) {
        grid-column: 1;
        grid-row: 3;
      }
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-7, :nth-child(7)) {
        grid-column: 2;
        grid-row: 3;
      }
      
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-4, :nth-child(4)) {
        grid-column: 1;
        grid-row: 4;
      }
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-8, :nth-child(8)) {
        grid-column: 2;
        grid-row: 4;
      }
      
      
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-5, :nth-child(5)) {
        grid-column: 1;
        grid-row: 5;
      }
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-9, :nth-child(9)) {
        grid-column: 2;
        grid-row: 5;
      }
      
      /* Hing 6: Note full width */
      #sectionManulifePro .info-group-content.three-row-layout .info-item-modern:is(.mp-pos-10, :nth-child(10)) {
        grid-column: 1 / -1;
        grid-row: 6;
        min-height: auto;
      }
      
      
      #sectionManulifePro .info-group-content.two-row-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern {
        min-height: 85px;
      }
      
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-1, :nth-child(1)) {
        grid-column: 1;
        grid-row: 1;
      }
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-5, :nth-child(5)) {
        grid-column: 2;
        grid-row: 1;
      }
      
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-2, :nth-child(2)) {
        grid-column: 1;
        grid-row: 2;
      }
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-6, :nth-child(6)) {
        grid-column: 2;
        grid-row: 2;
      }
      
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-3, :nth-child(3)) {
        grid-column: 1;
        grid-row: 3;
      }
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-7, :nth-child(7)) {
        grid-column: 2;
        grid-row: 3;
      }
      
      
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-4, :nth-child(4)) {
        grid-column: 1;
        grid-row: 4;
      }
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-8, :nth-child(8)) {
        grid-column: 2;
        grid-row: 4;
      }
      
      /* Hing 5: Note full width */
      #sectionManulifePro .info-group-content.two-row-layout .info-item-modern:is(.mp-pos-9, :nth-child(9)) {
        grid-column: 1 / -1;
        grid-row: 5;
        min-height: auto;
      }
      
      #sectionManulifePro .info-item-modern {
        display: flex;
        flex-direction: column;
        min-height: 0;
        break-inside: avoid;
        margin-bottom: 8px;
      }
      
      /* Ensure warning items span full width */
      #sectionManulifePro .warning-item {
        column-span: all;
        margin-bottom: 8px;
      }
    }
    
    /* Pinned warning styles */
    .pinned-warning {
      border: 2px solid #dc2626;
      border-radius: 3.6px;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
      grid-column: 1 / -1; 
    }
    
    .pinned-warning .info-group-header {
      background: #dc2626;
      color: white;
      border-radius: 10px 10px 0 0;
    }
    
    .pinned-warning .info-group-icon {
      font-size: 20px;
    }
    
    .pinned-warning .info-group-title {
      font-weight: 700;
      font-size: 12px;
    }
    
    .pinned-warning .large-warning-text {
      font-size: 2em !important;
      font-weight: 800 !important;
      text-align: center;
      padding: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: font-size 0.3s ease;
    }
    
    .auto-fit-text {
      font-size: inherit !important;
    }
    
    .pinned-warning .info-group-content {
      padding-top: 0;
      padding-bottom: 0;
    }
    
    /* Portrait responsive pinned warning */
    @media (max-width: 767px) {
      .pinned-warning .large-warning-text {
        font-size: 1.2em !important;
      }
      
      .pinned-warning .info-group-title {
        font-size: 14px;
      }
      
      .pinned-warning .info-group-icon {
        font-size: 16px;
      }
    }
    
    @media (max-width: 480px) {
      .pinned-warning .large-warning-text {
        font-size: 1em !important;
      }
      
      .pinned-warning .info-group-title {
        font-size: 12px;
      }
      
      .pinned-warning .info-group-icon {
        font-size: 14px;
      }
    }
    
    /* ===== M-STAR SECTION ===== */
    #sectionMStar .info-item .val { font-weight: 900; color: #10b981; }
    #sectionMStar .info-group.full-width { grid-column: 1 / -1; }
    
    /* Override default grid layout for M-Star section */
    #sectionMStar .info-group-content {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    #sectionMStar .info-group-content.two-columns { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 10px; 
    }
    #sectionMStar .column { display: flex; flex-direction: column; gap: 12px; }
    
    #sectionChucDanh .info-item .val { font-weight: 900; color: #3b82f6; }
    #sectionChucDanh .info-group.full-width { grid-column: 1 / -1; }
    #sectionChucDanh .info-group-content.two-columns { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 10px; 
    }
    #sectionChucDanh .column { display: flex; flex-direction: column; gap: 12px; }
    #sectionChucDanh .info-item-modern.full-width { grid-column: 1 / -1; }
    #sectionChucDanh .info-item-modern.no-flex { 
      display: block; 
      text-align: center; 
      padding: 8px 0;
      font-style: italic;
      color: #6b7280;
    }
    
    #sectionMbaPro .info-item .val { font-weight: 900; color: #8b5cf6; }
    #sectionMbaPro .info-group.full-width { grid-column: 1 / -1; }
    #sectionMbaPro .info-group-content.two-columns { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 10px; 
    }
    #sectionMbaPro .column { display: flex; flex-direction: column; gap: 12px; }
    
    
    #sectionMbaPro .info-group:first-child .info-group-header {
      padding: 8px 20px;
    }
    
    #sectionMbaPro .info-group:first-child .info-group-content {
      padding: 12px 20px;
      gap: 8px;
    }
    
    #sectionMbaPro .info-group:first-child .info-item-modern {
      margin-bottom: 4px;
      gap: 0 !important; 
      padding-top: 0 !important; 
      padding-bottom: 0 !important; 
    }
    
    
    @media (min-width: 1024px) {
      #sectionMbaPro .info-group:first-child .info-label {
        min-height: auto !important;
        line-height: 1.3 !important;
      }

      
      #sectionMbaPro .mba-tracking-label {
        min-height: 2.4em !important;
        line-height: 1.2 !important;
      }
    }
    
    /* MBA Pro responsive */
    @media (max-width: 1023px) {
      #sectionMbaPro .info-item-modern {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        transition: all 0.15s ease;
        min-height: auto;
      }
      
      
      #sectionMbaPro .info-group:first-child .info-item-modern {
        gap: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      
      #sectionMbaPro .info-label {
        font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
        color: #6b7280 !important;
        font-weight: 600 !important;
        min-height: auto !important;
      }
      
      
      #sectionMbaPro .info-group:first-child .info-label {
        min-height: 2.4em !important;
        line-height: 1.2 !important;
      }
      
      #sectionMbaPro .info-value {
        font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
        color: #0b3d2c !important;
        font-weight: 900 !important;
        word-break: break-word;
      }
    }
    

    
    #section-a1_muc_tieu_thang .info-group-content {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    
    /* ===== AUTO-OPTIMIZATION STYLES ===== */
    .stage-allocation-warning {
      background: #fef3c7 !important;
      border: 1px solid #f59e0b !important;
      padding: 10px 14px !important;
      border-radius: 6px !important;
      margin-top: 12px !important;
      font-size: 0.9em !important;
      color: #92400e !important;
      line-height: 1.6 !important;
      animation: fadeIn 0.3s ease-in-out;
      grid-column: 1 / -1 !important; /* Full width across all columns */
    }
    
    .stage-allocation-warning.info {
      background: #e0f2fe !important;
      border-color: #3b82f6 !important;
      color: #1e40af !important;
    }
    
    .stage-allocation-warning.success {
      background: #d1fae5 !important;
      border-color: #10b981 !important;
      color: #065f46 !important;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translateY(0);
      }
      to {
        opacity: 0;
        transform: translateY(-10px);
      }
    }

    /* ===== SUBSECTION STYLES (for tong_hop_chi_so) ===== */
    #section-tong_hop_chi_so .info-group-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .subsection {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 16px;
      width: 100%;
    }
    
    .subsection-title {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: #1f2937;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .subsection-content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      align-items: start;
    }
    
    .subsection-content .info-item-modern {
      display: grid !important;
      grid-template-rows: 42px auto !important;
      gap: 8px;
    }
    
    .subsection-content .info-label {
      font-size: 9px;
      color: #111827;
      font-weight: 700;
      line-height: 1.3;
      height: 42px;
      display: flex;
      align-items: flex-start;
      text-align: left;
      padding: 4px 0;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      overflow: hidden;
    }
    
    .subsection-content .info-value {
      display: flex;
      align-items: center;
    }
    
    .subsection-content .info-value input {
      width: 100%;
      padding: 10px 12px !important;
      border: 1px solid #d1d5db !important;
      border-radius: 6px;
      background: #f9fafb !important;
      font-size: 15px;
      text-align: left;
      color: #1f2937;
      font-weight: 600;
      height: 44px !important;
      box-sizing: border-box !important;
      line-height: 1.4;
    }
    
    /* Strong border for primary summary fields (style: bold) */
    .subsection-content .info-value input.field-highlight {
      border: 2px solid #1f2937;
      background: #ffffff;
      font-weight: 700;
      font-size: 16px;
    }
    
    /* ===== Apply same subsection styling to du_lieu_tham_chieu, cac_khoan_thuong, tong_hop_thu_nhap ===== */
    #section-du_lieu_tham_chieu .info-group-content,
    #section-cac_khoan_thuong .info-group-content,
    #section-tong_hop_thu_nhap .info-group-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    #section-du_lieu_tham_chieu .subsection,
    #section-cac_khoan_thuong .subsection,
    #section-tong_hop_thu_nhap .subsection {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 16px;
      width: 100%;
    }
    
    #section-du_lieu_tham_chieu .subsection-title,
    #section-cac_khoan_thuong .subsection-title,
    #section-tong_hop_thu_nhap .subsection-title {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: #1f2937;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    
    #section-du_lieu_tham_chieu .subsection-content,
    #section-cac_khoan_thuong .subsection-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      align-items: start;
    }
    
    
    #section-tong_hop_thu_nhap .subsection-content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      align-items: start;
    }
    
    #section-du_lieu_tham_chieu .subsection-content .info-item-modern,
    #section-cac_khoan_thuong .subsection-content .info-item-modern,
    #section-tong_hop_thu_nhap .subsection-content .info-item-modern {
      display: grid !important;
      grid-template-rows: 42px auto !important;
      gap: 8px;
    }
    
    #section-du_lieu_tham_chieu .subsection-content .info-label,
    #section-cac_khoan_thuong .subsection-content .info-label,
    #section-tong_hop_thu_nhap .subsection-content .info-label {
      font-size: 9px;
      color: #111827;
      font-weight: 700;
      line-height: 1.3;
      height: 42px;
      display: flex;
      align-items: flex-start;
      text-align: left;
      padding: 4px 0;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      overflow: hidden;
    }
    
    #section-du_lieu_tham_chieu .subsection-content .info-value,
    #section-cac_khoan_thuong .subsection-content .info-value,
    #section-tong_hop_thu_nhap .subsection-content .info-value {
      display: flex;
      align-items: center;
    }
    
    #section-du_lieu_tham_chieu .subsection-content .info-value input,
    #section-cac_khoan_thuong .subsection-content .info-value input,
    #section-tong_hop_thu_nhap .subsection-content .info-value input {
      width: 100%;
      padding: 10px 12px !important;
      border: 1px solid #d1d5db !important;
      border-radius: 6px;
      background: #f9fafb !important;
      font-size: 15px;
      text-align: left;
      color: #1f2937;
      font-weight: 600;
      height: 44px !important;
      box-sizing: border-box !important;
      line-height: 1.4;
    }
    
    #section-du_lieu_tham_chieu .subsection-content .info-value input.field-highlight,
    #section-cac_khoan_thuong .subsection-content .info-value input.field-highlight,
    #section-tong_hop_thu_nhap .subsection-content .info-value input.field-highlight {
      border: 2px solid #1f2937;
      background: #ffffff;
      font-weight: 700;
      font-size: 16px;
    }
    
    /* ===== PRINT REPORT POPUP ===== */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: var(--z-overlay);
      justify-content: center;
      align-items: center;
    }
    
    /* ===== CUSTOM CONFIRM MODAL ===== */
    .custom-confirm-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: var(--z-loading);
      justify-content: center;
      align-items: center;
    }
    
    .custom-confirm-modal {
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      max-width: 400px;
      width: 90%;
      animation: modalSlideIn 0.3s ease-out;
    }
    
    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .custom-confirm-title {
      font-size: 18px;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .custom-confirm-message {
      font-size: 14px;
      color: #374151;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    
    .custom-confirm-buttons {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    
    .custom-confirm-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .custom-confirm-btn-cancel {
      background: #e5e7eb;
      color: #374151;
    }
    
    .custom-confirm-btn-cancel:hover {
      background: #d1d5db;
    }
    
    .custom-confirm-btn-confirm {
      background: #dc2626;
      color: white;
    }
    
    .custom-confirm-btn-confirm:hover {
      background: #b91c1c;
    }
    
    /* ===== RESET BUTTON IN HEADER ===== */
    #section-a1_muc_tieu_thang .info-group-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .header-reset-btn {
      padding: 6px 14px;
      background: #dc2626;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .header-reset-btn:hover {
      background: #b91c1c;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    

    
    
    .info-item-modern.has-can-them input:not([value="0"]):not([value=""]):not([value="0.00"]):not([value="0,00"]),
    .info-item.has-can-them input:not([value="0"]):not([value=""]):not([value="0.00"]):not([value="0,00"]),
    .info-item-modern.has-can-them .val:not([data-value="0"]):not([data-value=""]):not([data-value="0.00"]):not([data-value="0,00"]),
    .info-item.has-can-them .val:not([data-value="0"]):not([data-value=""]):not([data-value="0.00"]):not([data-value="0,00"]),
    .info-item-modern.has-can-them .info-value,
    .info-item.has-can-them .info-value {
      color: #ff0000 !important;
      font-weight: bold !important;
    }
    


    /* Mobile responsive for warning content - single column layout */
    @media (max-width: 1023px) {
      main {
        margin-top: 20px;
      }
      
      .warning-content.has-two-columns {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      
      .warning-section {
        margin: 0 15px;
        padding: 15px;
        border-radius: 2.4px;
        transition: margin-top 0.3s ease;
      }
      
      .warning-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
      }
      
      .warning-title {
        font-size: 14px;
      }
      
      .warning-text {
        font-size: 13px;
      }
    }

    /* ===== LOADING SCREEN ===== */
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      z-index: var(--z-loading); /* Cao hon header vi banner */
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
    }

    .loading-content {
      text-align: center;
      padding: 40px;
      background: #fff;
      border-radius: 4.8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .loading-spinner {
      width: 60px;
      height: 60px;
      border: 4px solid #f3f4f6;
      border-top: 4px solid #0ea35b;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 20px;
    }

    .loading-text {
      font-size: 18px;
      font-weight: 700;
      color: #0b3d2c;
      margin: 0;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes buttonPress {
      0% { transform: scale(1); }
      50% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }

    @keyframes ripple {
      0% {
        transform: scale(0);
        opacity: 0.6;
      }
      100% {
        transform: scale(4);
        opacity: 0;
      }
    }

    /* Button click effect */
    .btn-calculating {
      position: relative;
      overflow: hidden;
      animation: buttonPress 0.3s ease;
    }

    .btn-calculating::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      animation: ripple 0.6s ease-out;
    }

    /* Button hover effect */
    #income_a1_btn_tinh:hover {
      background: #037058 !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(2, 91, 72, 0.3);
    }

    #income_a1_btn_tinh:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(2, 91, 72, 0.2);
    }

    /* ===== REFACTOR: KHU VUC RESPONSIVE TOKEN ===== */
    #sectionManulifePro .info-group.full-width,
    #sectionChucDanh .info-group.full-width,
    #sectionMbaPro .info-group.full-width {
      grid-column: 1 / -1;
    }

    #sectionManulifePro .info-group-content.two-columns,
    #sectionChucDanh .info-group-content.two-columns,
    #sectionMbaPro .info-group-content.two-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (min-width: var(--bp-medium)) {
      #sectionManulifePro .info-group-content.three-row-layout,
      #sectionManulifePro .info-group-content.two-row-layout {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }
    }

    @media (max-width: var(--bp-portrait)) {
      #sectionManulifePro .pinned-warning {
        grid-column: 1 / -1;
      }

      #sectionManulifePro .info-group-content,
      #sectionManulifePro .info-group-content.two-columns {
        column-count: 2;
        column-gap: 12px;
        column-fill: balance;
      }

      #sectionManulifePro .info-group-content.three-row-layout,
      #sectionManulifePro .info-group-content.two-row-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
    }

    @media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) and (min-width: 768px) and (max-width: 1023px) {
      #sectionManulifePro .info-group-content.three-row-layout,
      #sectionManulifePro .info-group-content.two-row-layout {
        gap: 12px;
      }
    }




