﻿/* ===== MODULE: _content.css ===== */
    /* ===== CONTENT ===== */
    body{ padding-top: var(--header-h); }
    body{ padding-bottom: calc(2.25 * var(--footer-h) + env(safe-area-inset-bottom,0px)); }
    /* A và B (<= 768px): dùng footer-h-mobile để khỏi che nội dung */
    @media (max-width: 768px) {
      body{ padding-bottom: calc(2.25 * var(--footer-h-mobile) + env(safe-area-inset-bottom,0px)); }
    }

    
    #contentWrap {
      margin-left: 0;
      position: relative;
      z-index: var(--z-content);
    }

    body.sidebar-open #contentWrap{ margin-left:var(--sidebar-width); }
          main{ max-width:1200px; margin:0 auto; padding:0px 14px 14px; }
    
    
    .section {
      position: relative;
      z-index: var(--z-content);
    }

      
      body.logged-out #sidebar,
      body.logged-out #contentWrap,
      body.logged-out #agentSelection { display:none !important; }

      /* ===== THUMBNAIL SLIDESHOW ===== */
      .thumbnail-slideshow {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        bottom: 0;
        background: #e0f2fe; /* Light blue background */
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: var(--z-content);
        padding: 0 !important;
        margin: 0 !important;
      }
      
      .slideshow-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }
      
      .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateX(100%);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      
      .slide.active {
        opacity: 1;
        transform: translateX(0);
      }
      
      .slide.prev {
        transform: translateX(-100%);
      }
      
      .slide img {
        width: 95% !important;
        height: 95% !important;
        max-width: 95% !important;
        max-height: 95% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        position: static !important;
        transform: none !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
      }
      
      
      /* Slideshow moves right when sidebar is open */
      @media (min-width: 1024px) {
        body.sidebar-open .thumbnail-slideshow {
          left: var(--sidebar-width);
        }
        
        body.section-selected .thumbnail-slideshow {
          left: 0;
        }
      }

      /* Hide slideshow when section is selected */
      body.section-selected .thumbnail-slideshow {
        display: none;
      }

      /* Show slideshow when logged out or when no section selected */
      body.logged-out .thumbnail-slideshow {
        display: flex;
        opacity: 1;
      }
      
      body.logged-in:not(.section-selected) .thumbnail-slideshow {
        display: flex;
      }
      
      /* Slideshow visible after login animation */
      body.logged-in .thumbnail-slideshow.login-success-animation {
        opacity: 1;
      }
      
      
      body.logged-out #tocMobile .row { display:none !important; }
      body.logged-out #tocMobile { display:none !important; }
      
      
      body.logged-out .mobile-logout-btn { display:none !important; }
      
      
      body.logged-out #tocMobile::after {
        display: none !important;
      }

    
    
    
    
    
    .section-container {
      background: #f8fafc;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 20px;
      border-radius: 0;
      margin-top: 80px;
      box-shadow: none;
      overflow: hidden;
      position: relative;
      z-index: var(--z-content);
    }
    
    .subsec{ margin:0; font-weight:900; color:#0b3d2c; padding:8px 16px; border-left:6px solid #0ea35b; font-size:1.05rem; background:#f8fafc; }

    /* ===== INFO GRID ===== */
    /* Số cột mặc định 1 cột (mobile-first), sẽ ghi đè tại các breakpoint lớn hơn */
    .info-grid{ display:grid; grid-template-columns: 1fr; gap:.5rem; padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-sm); margin-top: 0; }
    /* Tablet C: 2 cột — Desktop E: 3 cột */
    @media (min-width: 769px) and (max-width: 1023px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
    .section-container.no-alert .info-grid{ margin-top: 0; }
    .info-item{ display:flex; flex-direction:column; gap:.2rem; background:#fff; border:1px solid #e5e7eb; border-left:4px solid #0ea35b; border-radius:.6rem; padding:.5rem .85rem; min-height: 48px; }
    .info-item .val{ font-size:clamp(0.8rem, 1.05rem, 1.05rem); line-height:1.2; word-break:break-word; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Cảnh báo: cỡ chữ tối thiểu 14px để đọc được trên mọi định dạng */
    .pro-alert{ margin-top:0px; margin-bottom:1rem; padding:.7rem .9rem; border:2px solid #dc2626; border-left-width:6px; border-radius:.6rem; background:#fff; color:#b91c1c; font-weight:900; font-size:clamp(14px, 1.05rem, 1.2rem); line-height:1.5; } 

    .list-dot li, .bullet-strong li{ list-style:none; padding-left:0; display:grid; grid-template-columns:minmax(170px,max-content) 1fr; column-gap:1rem; align-items:start; margin:.3rem 0; }
    .bullet-strong li{ border-left:3px solid #0ea35b; padding-left:.75rem; }
    .hl{ grid-column:2; font-weight:900; font-size:clamp(0.8rem, 1.02rem, 1.02rem); line-height:1.3; color:#10b981; text-align: right; }
    .thin{ font-weight:700; color:#0b3d2c; }
    .sub-block {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 2.4px;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      margin-top: 0;
    }
    
    .sub-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    
    
    .sub-content .thin:not(.sub-content-full .thin),
    .content-group .thin,
    .sub-content .list-dot li .thin {
      max-width: 60%;
      word-wrap: break-word;
      white-space: normal;
    }
    
    
    .sub-content-full .thin {
      max-width: none;
      white-space: nowrap;
    }
    
    
    
    @media (min-width: 768px) {
      .sub-block {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        padding: 15px !important;
      }
      
      .sub-content {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
      }
      
      .sub-content-full {
        grid-column: 1 / 3 !important;
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        margin-bottom: 5px !important;
      }
      
      
      .sub-content-full .thin.lvl-2 {
        display: block;
      }
      
      .sub-content-full .thin.lvl-2 strong {
        display: block;
        margin-bottom: 8px;
      }
      
      .sub-content-full .hl {
        display: block;
        text-align: left;
        margin-top: 0;
      }
      
      /* Styling cho title */
      .content-group .thin.mb-1.lvl-2 {
        font-weight: bold;
        margin-bottom: 8px;
        color: #2d5a27;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      /* Styling cho list */
      .content-group .list-dot {
        margin: 0;
        padding: 6px 0;
      }
      
      .content-group .list-dot li {
        margin: 4px 0;
        padding: 2px 0;
        list-style: none;
        position: relative;
        padding-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .content-group .list-dot li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 12px;
        background-color: #2d5a27;
      }
      
      .content-group .list-dot li .thin {
        color: #666;
        font-weight: normal;
        white-space: nowrap;
      }
      
      .content-group .list-dot li .hl {
        color: #333;
        font-weight: 500;
        white-space: nowrap;
      }
    }
    
    /* Desktop gap/padding handled by (min-width: 1024px) and (min-width: 1440px) no intermediate breakpoints needed */
    
    /* Grid cho cic item trong sub-content */
    .sub-content .list-dot {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    
    .sub-content .list-dot li {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 15px;
      align-items: center;
      padding: 8px 0 8px 3px;
      margin-left: 10px;
      border-bottom: 1px solid #f3f4f6;
    }
    
    .sub-content .list-dot li:last-child {
      border-bottom: none;
    }
    
    /* ===== STRONG ELEMENTS ===== */
    strong {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }
    .sub-content{ margin:0; margin-top:0; padding: 0px 16px 24px 16px; } 
    .fa-hide{ display:block; }
    body.is-fa-or-sa .fa-hide{ display:none !important; }

    /* ===== MOBILE ===== */
    @media (min-width: 767px) and (max-width: 768px){
      .header-grid{ grid-template-columns:1fr; }
      .brand-row{ justify-content:flex-start; }
      body.logged-in .brand-row{ justify-content:center; align-items:center; margin-top:10px; }
      body.logged-in .login-cluster{ display:none; }
      
            .login-cluster{ width:100%; justify-self:stretch; grid-template-columns:1fr; }
      .logo-d{ height:44px; max-width: 44px; }
      
      
      .title-top{ font-size: clamp(10px, 1vw + 6px, 14px); }
      .title-main{ font-size: clamp(14px, 1.2vw + 8px, 18px); }
      
      body.sidebar-open #contentWrap{ margin-left:0 }
      body.logged-in #tocMobile{ display:block; }
      .list-dot li, .bullet-strong li{
        grid-template-columns: minmax(0,1fr) auto;
        align-items:flex-start;
      }
      
      .info-item .val, .hl {
        text-align: right;
      }
      
      .info-item {
        padding: 0.3rem 0.85rem;
        min-height: auto;
        gap: 0.15rem;
      }
      
      .info-item .val {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.1;
        font-size: clamp(0.7rem, 1.05rem, 1.05rem);
      }
      
      .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 0.3rem;
      }
      
      .sub-content {
        margin-top: 0;
        margin-left: 5px;
        padding: 12px 12px 12px 0px;
      }
      
      /* Grid responsive cho tablet */
      .section-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
      }
      
      .sub-block {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
      }

      /* Keep desktop frame when touch device rotates to landscape. */
      body.force-desktop-landscape .header-grid {
        grid-template-columns: 1fr auto !important;
      }

      body.force-desktop-landscape .brand-row,
      body.force-desktop-landscape.logged-in .brand-row {
        justify-content: flex-start !important;
        align-items: center !important;
        margin-top: 0 !important;
      }

      body.force-desktop-landscape.sidebar-open #contentWrap {
        margin-left: var(--sidebar-width) !important;
      }

      body.force-desktop-landscape.logged-in #tocMobile {
        display: none !important;
      }
      
      .info-grid {
        padding: 12px;
        margin-top: 0;
      }
      
      
      
      
      .sub-block {
        margin-top: 0;
      }
      
      
      body.viewing-report .sub-block {
        margin-top: 0;
      }
      
      
      body.viewing-report .info-grid {
        margin-top: 0;
      }
      
      
      .sub-content {
        margin-top: 0;
      }
      
      /* Grid responsive cho mobile */
      .section-container {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
      }
      
      .sub-block {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
      }
      
      .sub-content .list-dot li {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
        padding: 8px 0 8px 3px;
        margin-left: 10px;
      }
      
      .sub-content .list-dot li .hl {
        text-align: left;
        margin-top: 4px;
      }

      
      .sub-content-full .thin.lvl-2 {
        display: block !important;
      }

      .sub-content-full .thin.lvl-2 strong {
        display: block !important;
        margin-bottom: 8px !important;
      }

      .sub-content-full .hl {
        display: block !important;
        text-align: left !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
      }

      
      body.showing-agent-selection #tocMobile {
        top: var(--toc-showing-agent-selection-top);
      }
      

      
      .sidebar-update-info {
        display: none !important;
      }
      
      /* Footer trin mobile */
      #pageFooter {
        flex-direction: column;
        gap: 2px;
        padding: 3px 10px 4px;
        font-size: 1.75px !important; 
        font-weight: 600;
        min-height: var(--footer-h-mobile);
      }
      
      .footer-left {
        align-items: center;
        text-align: center;
        gap: 3px;
        font-size: 8px !important; 
      }
      
      .footer-right {
        justify-content: center;
      }
      
      #pageFooter img {
        height: 1px; 
        width: auto;
      }
      
       .print-btn {
         display: inline-block !important;
         font-size: 10px;
         padding: 4px 8px;
         height: 20px; 
         line-height: 1.2;
         display: flex;
         align-items: center;
         justify-content: center;
         white-space: nowrap;
       }
      
      #supportFooter {
        font-size: 10px; 
        padding: 4px 8px;
        height: 20px; 
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      
      /* Mobile popup */
      .popup-content {
        margin: 10px;
        max-width: calc(100% - 20px);
      }
      
      .popup-header {
        padding: 16px 20px 12px;
      }
      
      .popup-header h3 {
        font-size: 18px;
      }
      
      .popup-body {
        padding: 16px 20px 20px;
      }
      
      .popup-btn {
        padding: 12px;
      }
      
      .btn-icon {
        font-size: 20px;
        margin-right: 10px;
      }
      
      .btn-title {
        font-size: 14px;
      }
      
      .btn-desc {
        font-size: 12px;
      }
      
      /* ===== TOP/BOTTOM OVERRIDES TẠI 768px =====
         Đồng bộ với tablet để tránh chồng lấp header/footer ở mốc đặc biệt này */
      .mobile-update-date { top: var(--tablet-mobile-update-top) !important; }
      /* Đặt TOC bên dưới update-date, tránh chồng lấp (125px) */
      body.logged-in #tocMobile { top: var(--tablet-toc-top) !important; }
      body.logged-in.showing-agent-selection #tocMobile { top: var(--toc-showing-agent-selection-top) !important; }
      .mobile-viewing-info { top: var(--tablet-mobile-viewing-top) !important; }
      .search-result { top: var(--tablet-search-result-top) !important; }
      .filter-results { bottom: calc(var(--footer-h-mobile) + 10px) !important; }
      .search-result { bottom: calc(var(--footer-h-mobile) + 10px) !important; }
      /* Đẩy nội dung xuống dưới các thanh cố định */
      main { margin-top: 135px; }
      body.viewing-report main { margin-top: 175px; }
      /* Chuyển agent-selection về in-flow thay vì fixed tại 768px */
      #agentSelection {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 60px auto 5px auto;
        max-width: 1200px;
      }
    }

    /* Tablet width inside mobile/tablet flow: keep explicit and non-nested for predictable cascade */
    @media (min-width: 769px) and (max-width: 1023px) {
      .info-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
      }
    }
    

    /* ===== MEDIUM PORTRAIT STYLE (481px-1023px) ===== */
    /* Header/login/brand rules already set in (max-width: 1023px) base no repeat */
    @media (min-width: 769px) and (max-width: 1023px){

      /* Mobile responsive cho warning content - single column layout */
      main {
        /* 135px clears update-date + TOC stacked below header */
        margin-top: 135px;
      }
      body.viewing-report main { margin-top: 175px; }
      
      .warning-content.has-two-columns {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      
      
      body{ padding-bottom: calc(2.25 * var(--footer-h-mobile) + env(safe-area-inset-bottom,0px)); }
      
      /* Mobile responsive cho pinned warning */
      .pinned-warning .large-warning-text {
        font-size: 1.2em !important;
      }
      
      .pinned-warning .info-group-title {
        font-size: 0.75em !important;
        margin-bottom: 8px !important;
      }
      
      .pinned-warning .info-group-content {
        font-size: 0.9em !important;
        line-height: 1.4 !important;
        padding-top: 0;
        padding-bottom: 0;
      }
      
      /* Mobile responsive cho agent search */
      .agent-search-container {
        flex-direction: row;
        gap: 8px; 
      }
      .agent-search-input { font-size: 14px; height: 40px; }
      .search-agent-btn { height: 40px; font-size: 10px; min-width: 100px; }
      .search-result { margin-top: 15px; padding: 30px 15px 15px 15px; }
      .agent-name { font-size: 16px; }
      .agent-msdl { font-size: 13px; }
      
      
      .selection-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 8px 5px 0px 5px;
        max-width: 100%;
        margin: 0 auto;
      }
      
      
      #agentSelection {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 60px auto 5px auto;
        max-width: 1200px;
      }
      
      
      .mobile-update-date {
        top: var(--tablet-mobile-update-top) !important;
      }
      
      
      .search-result {
        top: var(--tablet-search-result-top) !important;
      }
      
      
      .mobile-viewing-info {
        top: var(--tablet-mobile-viewing-top) !important;
      }
      /* Đặt TOC bên dưới update-date, tránh chồng lấp (125px) */
      body.logged-in #tocMobile { top: var(--tablet-toc-top) !important; }
      body.logged-in.showing-agent-selection #tocMobile { top: var(--toc-showing-agent-selection-top) !important; }
      
      /* Section-container modern-info-container - Fix banner overlap */
      .section-container.modern-info-container {
        margin-top: 20px !important;
        padding-top: 20px !important;
      }
      
      /* Footer trin tablet */
      #pageFooter {
        padding: 6px 18px 8px;
      }
      
      #supportFooter {
        padding: 8px 16px;
        font-size: 14px;
        height: 28px; 
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
    }

    @media (min-width: 1024px) and (hover: hover) and (pointer: fine){
      body.logged-in #sidebar{ display:block; }
      
      

      
      .mobile-update-date {
        display: none !important;
      }
      
      /* Footer trin desktop */
      #pageFooter {
        padding: 6px 20px 8px;
      }
      
      #supportFooter {
        padding: 8px 16px;
        font-size: 14px;
        height: 28px; 
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
    }

    /* ===== LARGE DESKTOP ===== */
    @media (min-width: 1440px){
      .header-grid{ padding: 16px 24px; }
      .logo-d{ height: 80px; }
      .title-top{ font-size: 22px; }
      .title-main{ font-size: 30px; }
      .section-container{ padding: 24px 24px 24px 16px; }
      .sub-content{ padding: 0px 20px 28px 0px; margin-top: 0 !important; } 
      
      
      .section-container.no-alert .info-grid {
        margin-top: 40px; 
      }
      
      
      .info-grid{ padding: 20px; }
      main{ max-width: 1400px; }
      
      
      .section-container {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 25px;
      }
      
      .sub-block {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        padding: 25px;
      }
      
      .sub-content .list-dot li {
        grid-template-columns: 1fr auto;
        gap: 10px;
        margin-left: 10px;
        padding-left: 3px;
      }
      
      
      /* Footer trin large desktop */
      #pageFooter {
        padding: 6px 24px 8px;
      }
      
      #supportFooter {
        padding: 8px 16px;
        font-size: 14px;
        height: 28px; 
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
    }

    /* ===== MOBILE CSS ADDITIONS ===== */
    @media (max-width: 767px){
      .header-grid{
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: 10px;
        padding: 8px 8px;
      }
      .brand-row{
        justify-content: center;
        align-items: center;
        overflow: visible;
      }
      .title-wrap{
        align-items: center;
        overflow: visible;
      }
      .title-top,
      .title-main{
        text-align: center;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
      }
      body.logged-out .login-cluster{
        width: 100%;
        justify-self: stretch;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
      }
      body.logged-out .login-cluster .input-group{
        flex: 1 1 auto;
        min-width: 0;
      }
      body.logged-out .login-cluster input{ width: 100%; }
      body.logged-out .login-cluster .login-btn{
        flex: 0 0 auto;
        min-width: 110px;
        height: 40px;
      }
      body.logged-in .login-cluster{ display: none !important; }
      .logo-d{ height: 40px; max-width: 40px; }
      .title-top{ font-size: clamp(10px, 1vw + 6px, 14px); }
      .title-main{ font-size: clamp(14px, 1.2vw + 8px, 18px); }
      .login-cluster input{ width: 100%; }
      .login-btn{ min-width: 120px; font-size: 14px; }
      .section-container{ padding: 12px 15px 12px 8px; margin-top: 120px; } 
      .sub-content{ padding: 0px 10px 16px 0px; margin-top: 0 !important; } 
      .info-grid{ padding: 8px; }
      #tocMobile .row { align-items: stretch; }
      #tocMobile .mobile-menu-btn { order: 1; }
      #tocMobile .mobile-view-other-btn { order: 2; }
      #tocMobile .mobile-logout-btn {
        order: 3;
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
      }
      .mobile-menu-btn, .mobile-view-other-btn, .mobile-logout-btn{ height: 40px; font-size: 14px; }
      .agent-selection { min-width: 320px; position: fixed; top: var(--agent-selection-mobile-top); left: var(--sidebar-width); right: 0; margin: 0 8px; } 
      .filter-results { position: fixed; top: var(--filter-results-mobile-top); bottom: calc(var(--footer-h) + 10px); left: var(--sidebar-width); right: 0; margin: 0 8px; overflow-y: auto; border-radius: 0; box-shadow: none; } 
      .search-result { position: fixed; top: var(--search-results-mobile-top); bottom: calc(var(--footer-h) + 10px); left: var(--sidebar-width); right: 0; margin: 0 8px; overflow-y: auto; border-radius: 0; box-shadow: none; } 
      body:not(.sidebar-open) .agent-selection,
      body:not(.sidebar-open) .search-result,
      body:not(.sidebar-open) .filter-results { left: 0; }
      body.sidebar-open .agent-selection,
      body.sidebar-open .search-result,
      body.sidebar-open .filter-results { left: var(--sidebar-width); }
      .selection-container { padding: 4px 10px 0px 10px; }
      /* H2 removed - no longer needed */
      .search-wrapper { 
        flex-direction: row;
        gap: 8px; 
      }
      .agent-search-input { font-size: 14px; height: 40px; }
      .search-agent-btn { height: 40px; font-size: 10px; min-width: 100px; } 
      .search-result { margin-top: 15px; padding: 30px 15px 15px 15px; }
      .agent-name { font-size: 16px; }
      .agent-msdl { font-size: 13px; }
    }

    /* ===== REFACTOR: NOI DUNG RESPONSIVE GON NHAT ===== */
    .section-container.modern-info-container {
      margin-top: 20px;
      padding-top: 20px;
    }

    .section-container.no-alert .info-grid,
    body.viewing-report .info-grid,
    body.viewing-report .sub-block,
    .sub-block,
    .sub-content {
      margin-top: 0;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem;
    }

    .sub-block {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .sub-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    @media (min-width: 768px) {
      .section-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
      }

      .sub-block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 15px;
      }

      .sub-content {
        display: block;
        width: 100%;
      }

      .sub-content-full {
        grid-column: 1 / -1;
      }

      .sub-content .list-dot li {
        grid-template-columns: 1fr auto;
      }
    }

    @media (min-width: 1024px) {
      .section-container {
        gap: 20px;
        padding: 20px;
      }

      .info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding: var(--space-sm);
      }
    }

    @media (max-width: 767px) {
      .section-container {
        padding: 12px;
        gap: 12px;
      }

      .sub-block {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
      }

      .info-grid {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding: 8px;
      }

      .sub-content .list-dot li {
        grid-template-columns: 1fr;
      }
    }

    @media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) and (min-width: 768px) and (max-width: 1023px) {
      .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sub-block {
        grid-template-columns: 1fr;
      }
    }



