/* ====================================================
   9. GHI ĐÈ CHUYÊN BIỆT CHO MOBILE (MAX-WIDTH: 768PX)
==================================================== */
@media screen and (max-width: 768px) {

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 6px !important;
    }

    .header-banner-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px auto 10px auto !important;
        padding: 0 4px !important;
        transform: translateY(0) !important;
    }

    .banner-title-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    img.logo-img,
    .logo-img {
        max-width: 90% !important;
        margin: 0 auto 10px auto !important;
    }

    .outer-border-card,
    .bottom-campaign-card,
    .brand-director-card {
        background: linear-gradient(160deg, #fffcf7 0%, #fdeedb 50%, #fcdcb8 100%) !important;
        border-radius: 18px !important;
        border: 1.5px solid #e7c396 !important;
        box-shadow: 0 10px 25px rgba(168, 79, 11, 0.15) !important;
    }

    .outer-border-card {
        margin-top: 10px !important;
        padding: 16px 12px !important;
    }

    .bottom-campaign-card {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        padding: 20px 16px !important;
        gap: 18px !important;
    }

    .logo-wrapper {
        margin-top: -5px !important;
        margin-bottom: 15px !important;
    }

    .form-container {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .form-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .form-row label {
        width: 100% !important;
        font-weight: 900 !important;
        font-size: 14px !important; 
        color: #831600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-transform: uppercase !important;
        letter-spacing: 0px !important;
    }

    .icon-wrap {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    .input-group {
        width: 100% !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1.5px solid #e0cda7 !important;
        padding: 2px !important;
    }

    .input-group input {
        width: 100% !important;
        height: 40px !important;
        padding: 6px 95px 6px 10px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    .btn-inside-check, .btn-inside-copy {
        position: absolute !important;
        right: 3px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        border-radius: 5px !important;
    }

    .action-buttons-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 16px 0 14px 0 !important;
        width: 100% !important;
    }

    .note-box {
        background: linear-gradient(135deg, #ffffff 0%, #fff0db 100%) !important;
        border: 1.5px solid #f0c384 !important;
        padding: 15px 12px !important;
        border-radius: 12px !important;
    }

    .note-header-img {
        max-width: 180px !important;
    }

    .note-content li {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .brand-director-card {
        border-radius: 16px !important;
    }

    .brand-director-card.interface-v2 .director-card-body {
        flex-direction: column-reverse !important;
        padding: 20px 16px !important;
        gap: 18px !important;
    }

    .director-title {
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .director-subtitle {
        font-size: 19px !important;
    }

    .director-desc {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .brand-director-card.interface-v2 .director-avatar-wrapper,
    .director-avatar-wrapper {
        width: 100% !important;
        max-width: 280px !important;
        height: 240px !important;
        margin: 0 auto !important;
    }

    .director-avatar-img {
        transform: translateY(0) !important;
    }

    .director-quote-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 8px !important;
    }

    .quote-pill {
        font-size: 13.5px !important;
        padding: 10px 16px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .top-row-app-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 0 !important;
    }

    .top-row-app-section .os-buttons-wrapper {
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .top-row-app-section .image-button-os {
        max-width: 115px !important;
        height: auto !important;
    }

    .top-row-app-section .vertical-divider-line {
        height: 45px !important;
        margin: 0 5px !important;
    }

    .phone-signature-combined-group {
        flex-direction: row !important; /* Đổi từ column sang row để nằm trên cùng 1 hàng */
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .signature-divider {
        width: 1px !important; /* Đổi thành độ rộng 1px */
        height: 60px !important; /* Đặt chiều cao phù hợp cho vạch dọc */
        margin: 0 5px !important;
        background: #e0cda7 !important;
    }

    .top-row-app-section .phone-mockup-panel {
        transform: translateX(0) !important;
        width: 50% !important; /* Chia tỉ lệ khoảng 50% cho bên phone */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    .phone-render-img.btn-app-effect {
        max-width: 130px !important; /* Thu nhỏ bớt lại để nằm vừa 1 hàng */
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .ambassador-signature-panel {
        width: 50% !important; /* Chia tỉ lệ khoảng 50% cho bên chữ ký */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .signature-title {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .ambassador-signature-img {
        max-width: 110px !important; /* Thu nhỏ chữ ký nhẹ để vừa khung */
        height: auto !important;
    }
    .trust-badges-panel {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .trust-badges-panel .badge-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Popup Mobile */
    .popup-content-wrapper.champagne-silk-theme,
    .popup-modal-container,
    .modal-content-box {
        width: 96% !important;
        max-width: 96% !important;
        padding: 12px 6px !important;
        margin: 0 auto !important;
        max-height: 90vh !important;
    }

    .champagne-banner-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px 6px !important;
    }

    .banner-divider {
        width: 85% !important;
        height: 1px !important;
        margin: 8px 0 !important;
    }

    .banner-right {
        width: 100% !important;
    }

    .champagne-banner-card table,
    .champagne-banner-card .table-row,
    .champagne-banner-card .table-header {
        font-size: 9.5px !important;
        letter-spacing: -0.2px !important;
    }

    .champagne-banner-card th,
    .champagne-banner-card td,
    .table-cell {
        padding: 6px 2px !important;
        font-size: 10px !important;
    }

    .champagne-banner-card th {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .champagne-columns-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    .champagne-columns-grid .content-column {
        padding: 8px 4px !important;
        border-radius: 8px !important;
    }

    .champagne-columns-grid .column-title {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .champagne-columns-grid .numbered-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .champagne-columns-grid .numbered-list li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 3px !important;
    }

    .champagne-columns-grid .num-box {
        min-width: 15px !important;
        width: 15px !important;
        height: 15px !important;
        font-size: 8.5px !important;
        line-height: 15px !important;
        border-radius: 3px !important;
        flex-shrink: 0 !important;
        margin-top: 1px !important;
    }

    .champagne-columns-grid .numbered-list li p,
    .champagne-columns-grid .numbered-list li span {
        font-size: 10px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        margin: 0 !important;
    }

    .champagne-banner-card table th,
    .champagne-banner-card .table-header,
    .champagne-banner-card .table-row th {
        font-size: 8.5px !important;
        line-height: 1.15 !important;
        padding: 4px 1px !important;
        letter-spacing: -0.3px !important;
    }

    .champagne-banner-card table td,
    .champagne-banner-card .table-cell,
    .champagne-banner-card .table-row td {
        font-size: 9.5px !important;
        padding: 5px 2px !important;
        font-weight: 700 !important;
    }

    .table-header {
        font-size: 8.5px !important;
        letter-spacing: -0.3px !important;
        padding: 8px 2px !important;
    }

    .table-header div {
        font-size: 8.5px !important;
    }

    .table-body {
        font-size: 9.5px !important;
        padding: 8px 2px !important;
    }

    .table-body div {
        font-size: 8.5px !important;
    }

    .table-body .text-highlight {
        font-size: 11px !important;
    }

    .popup-content-wrapper h3,
    .popup-modal-container h3,
    .modal-content-box h3,
    .champagne-silk-theme h3 {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        letter-spacing: 0px !important;
        text-align: center !important;
    }

    .popup-content-wrapper ul li,
    .popup-content-wrapper ol li,
    .modal-content-box ul li,
    .modal-content-box ol li,
    .champagne-silk-theme ul li,
    .champagne-silk-theme ol li,
    .popup-content-wrapper p,
    .modal-content-box p {
        font-size: 8.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
    }

    .popup-content-wrapper ul li::before,
    .modal-content-box ul li::before {
        font-size: 8px !important;
    }

    .popup-content-wrapper div[style*="text-align: center"],
    .popup-modal-container div[style*="text-align: center"],
    .modal-content-box p[style*="text-align: center"],
    .popup-footer-text,
    .footer-tagline,
    .brand-footer-text {
        font-size: 6.5px !important;
        letter-spacing: -0.2px !important;
        margin-top: 8px !important;
        line-height: 1.2 !important;
    }

    /* LiveChat Mobile */
    #vchat-wrapper {
        position: fixed !important;
        bottom: 20px !important;
        right: 15px !important;
        z-index: 999999 !important;
    }

    #vchat-window {
        position: fixed !important;
        bottom: 90px !important; 
        right: 10px !important;  
        left: auto !important;
        width: calc(100vw - 20px) !important; 
        max-width: 360px !important;          
        height: 70vh !important;               
        border-radius: 16px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
        overflow: hidden !important;
    }

    #vchat-window iframe {
        width: 100% !important;
        height: calc(100% - 48px) !important;
    }
}