/* ==============================================================================
   MATSUYA R&D VIETNAM - MOBILE RESPONSIVE OPTIMIZATION STYLESHEET
   Model: MRD-BWT002 Automatic Bobbin Winder Landing Page
   
   NGUYÊN TẮC:
   - Toàn bộ rule CHỈ áp dụng trong @media (max-width: 991px), (max-width: 768px), (max-width: 480px).
   - KHÔNG chỉnh sửa hay ghi đè bất kỳ style PC gốc nào ngoài media query.
   - Bảo toàn 100% độ sắc nét, typography và bố cục đã duyệt trên màn hình PC.
   ============================================================================== */

/* Ẩn trên Desktop / PC (> 768px) */
@media screen and (min-width: 769px) {
  .mrd-table-slider-wrap {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET RESPONSIVE (max-width: 991px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  /* Hero Grid */
  .mrd-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .mrd-hero-video-frame {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Overview */
  .mrd-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }

  /* Comparison */
  .mrd-compare-2col-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* Structure 6-Module Grid */
  .mrd-structure-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Specifications */
  .mrd-specs-table-row {
    flex-direction: column !important;
  }

  .mrd-specs-cell-pair {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .mrd-specs-cell-pair.mrd-specs-left {
    border-right: none !important;
    border-bottom: 1px dashed #cbd5e1;
  }

  /* About */
  .mrd-about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* FAQ */
  .mrd-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }
}

/* --------------------------------------------------------------------------
   MOBILE RESPONSIVE (max-width: 768px) - TOÀN DIỆN UX/UI CHO SMARTPHONE
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Global Body Adjustment for Mobile Header */
  body {
    padding-top: 60px !important;
    overflow-x: hidden !important;
  }

  /* ==========================================================================
     SECTION 01: HEADER & NAVIGATION DRAWER
     ========================================================================== */
  .mrd-mobile-bar {
    height: 60px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  .mrd-mobile-logo {
    height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .mrd-hamburger-btn {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .mrd-hamburger-line {
    width: 22px !important;
    height: 2.5px !important;
    background-color: #004b87 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  /* Mobile Drawer Menu */
  .mrd-mobile-drawer {
    width: min(320px, 86vw) !important;
    z-index: 100002 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mrd-drawer-header {
    height: 60px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
  }

  .mrd-drawer-close-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
  }

  .mrd-drawer-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 12px 16px !important;
  }

  .mrd-drawer-item {
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .mrd-drawer-link-row a,
  .mrd-drawer-link-row {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
  }

  .mrd-drawer-submenu {
    padding: 4px 0 10px 14px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  .mrd-drawer-sublink {
    display: block !important;
    padding: 8px 0 !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    text-decoration: none !important;
  }

  .mrd-drawer-footer {
    padding: 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
  }

  .mrd-drawer-footer .mrd-cta-btn {
    width: 100% !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
  }

  .mrd-drawer-contact-quick {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  .mrd-drawer-contact-quick a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #475569 !important;
    text-decoration: none !important;
  }

  .mrd-drawer-contact-quick svg {
    width: 16px !important;
    height: 16px !important;
    fill: #009fe3 !important;
    flex-shrink: 0 !important;
  }

  /* ==========================================================================
     SECTION 02: HERO BANNER (#hero)
     ========================================================================== */
  .mrd-hero-wrapper {
    padding: 24px 16px 44px 16px !important;
  }

  .mrd-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Đưa các phần tử con của mrd-hero-right lên cấp cha để sắp xếp thứ tự linh hoạt trên mobile */
  .mrd-hero-right {
    display: contents !important;
  }

  /* 1. Nhãn tag */
  .mrd-hero-tag {
    order: 1 !important;
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin-bottom: 8px !important;
    align-self: flex-start !important;
  }

  /* 2. Tiêu đề H1 */
  .mrd-hero-title {
    order: 2 !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 8px !important;
  }

  /* 3. Đoạn mô tả giới thiệu */
  .mrd-hero-desc {
    order: 3 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #cbd5e1 !important;
    margin-bottom: 16px !important;
  }

  /* 4. 3 Hộp điểm mạnh / giá trị vượt trội */
  .mrd-hero-usps {
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }

  /* 5. KHỐI VIDEO YOUTUBE (CHUYỂN XUỐNG DƯỚI 3 HỘP ĐIỂM MẠNH & TRÊN FORM) */
  .mrd-hero-left {
    order: 5 !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  .mrd-hero-video-badge {
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
  }

  .mrd-hero-video-frame {
    width: 100% !important;
    max-width: 320px !important;
    height: 480px !important;
    min-height: 480px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  }

  .mrd-hero-usp-item {
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 10px !important;
  }

  .mrd-hero-usp-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .mrd-hero-usp-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .mrd-hero-usp-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .mrd-hero-usp-desc {
    font-size: 12px !important;
  }

  /* 6. Form Báo Giá Nhanh (Nằm dưới khối Video) */
  .mrd-hero-form-card {
    order: 6 !important;
    padding: 18px 16px !important;
    border-radius: 14px !important;
    margin-top: 0 !important;
    border-width: 1.5px !important;
    width: 100% !important;
  }

  .mrd-hero-form-header {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    text-align: center !important;
  }

  .mrd-hero-form-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .mrd-hero-form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .mrd-hero-label {
    font-size: 13px !important;
  }

  .mrd-hero-input,
  .mrd-hero-textarea {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .mrd-hero-submit-btn {
    height: 48px !important;
    font-size: 14.5px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  .mrd-hero-wrapper {
    padding: 24px 16px 170px 16px !important;
  }

  /* ==========================================================================
     SECTION 03: QUICK STATS BAR (#stats) - NẰM 1/2 TRÊN HERO 1/2 DƯỚI OVERVIEW
     Đường divider giữa Row 1 và Row 2 phải thẳng hàng tuyệt đối với mép đáy Hero
     ========================================================================== */
  .mrd-stats-wrapper {
    position: relative !important;
    z-index: 20 !important;
    transform: translateY(calc(-50% - 6.5px)) !important;
    margin: 0 16px -85px 16px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-shadow: 0 14px 35px rgba(0, 20, 50, 0.42), 0 0 24px rgba(0, 159, 227, 0.25) !important;
  }

  .mrd-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    width: 100% !important;
  }

  .mrd-stats-col,
  .mrd-stats-col:first-child,
  .mrd-stats-col:last-child {
    border-radius: 0 !important;
  }

  .mrd-stats-col:nth-child(1) {
    border-top-left-radius: 16px !important;
  }
  .mrd-stats-col:nth-child(2) {
    border-top-right-radius: 16px !important;
  }
  .mrd-stats-col:nth-child(3) {
    border-bottom-left-radius: 16px !important;
  }
  .mrd-stats-col:nth-child(4) {
    border-bottom-right-radius: 16px !important;
  }

  .mrd-stats-col {
    padding: 14px 10px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: none !important;
    position: static !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 2x2 Clean Divider Borders */
  .mrd-stats-col:nth-child(1),
  .mrd-stats-col:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .mrd-stats-col:nth-child(1),
  .mrd-stats-col:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .mrd-stats-img-frame {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
  }

  .mrd-stats-content {
    align-items: center !important;
    text-align: center !important;
  }

  .mrd-stats-num {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .mrd-stats-unit {
    font-size: 15px !important;
  }

  .mrd-stats-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Hiển thị hiệu ứng Popover Preview trên mobile khi tap/hover */
  .mrd-stats-popover {
    display: block !important;
    position: absolute !important;
    bottom: calc(100% + 12px) !important;
    width: 270px !important;
    max-width: calc(100vw - 36px) !important;
    background: rgba(6, 24, 44, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 20px 45px rgba(0, 10, 30, 0.85), 0 0 30px rgba(0, 159, 227, 0.4) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s ease !important;
    z-index: 1000 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Cột bên trái (Col 1 & Col 3): Đặt vị trí hợp lý không tràn mép trái */
  .mrd-stats-col:nth-child(1) .mrd-stats-popover,
  .mrd-stats-col:nth-child(3) .mrd-stats-popover {
    left: 6px !important;
    right: auto !important;
    transform: translateY(8px) scale(0.95) !important;
  }

  .mrd-stats-col:nth-child(1) .mrd-stats-popover::after,
  .mrd-stats-col:nth-child(3) .mrd-stats-popover::after {
    left: 76px !important;
    right: auto !important;
  }

  /* Cột bên phải (Col 2 & Col 4): Đặt vị trí hợp lý không tràn mép phải */
  .mrd-stats-col:nth-child(2) .mrd-stats-popover,
  .mrd-stats-col:nth-child(4) .mrd-stats-popover {
    right: 6px !important;
    left: auto !important;
    transform: translateY(8px) scale(0.95) !important;
  }

  .mrd-stats-col:nth-child(2) .mrd-stats-popover::after,
  .mrd-stats-col:nth-child(4) .mrd-stats-popover::after {
    right: 76px !important;
    left: auto !important;
  }

  /* Mũi tên tam giác chỉ xuống */
  .mrd-stats-popover::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    border-width: 8px 8px 0 8px !important;
    border-style: solid !important;
    border-color: rgba(6, 24, 44, 0.98) transparent transparent transparent !important;
    transform: translateX(-50%) !important;
  }

  /* Khi active hoặc hover: Hiển thị mượt mà */
  .mrd-stats-col.is-active .mrd-stats-popover,
  .mrd-stats-col:hover .mrd-stats-popover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .mrd-stats-pop-img-box {
    width: 100% !important;
    height: 120px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    background: #000000 !important;
  }

  .mrd-stats-pop-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mrd-stats-pop-num {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #38bdf8 !important;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
  }

  .mrd-stats-pop-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
  }

  .mrd-stats-pop-desc {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #cbd5e1 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     SECTION 04: OVERVIEW (#overview)
     ========================================================================== */
  .mrd-overview-wrapper {
    padding: 18px 0 44px 0 !important;
  }

  .mrd-overview-container {
    padding: 0 16px !important;
  }

  .mrd-overview-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Cho phép các phần tử con của mrd-overview-left trở thành flex items để sắp xếp thứ tự */
  .mrd-overview-left {
    display: contents !important;
  }

  /* 1. Tag badge */
  .mrd-overview-tag {
    order: 1 !important;
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
    align-self: flex-start !important;
  }

  /* 2. Tiêu đề H2 */
  .mrd-overview-title {
    order: 2 !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  /* 3. Đoạn mô tả */
  .mrd-overview-desc {
    order: 3 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 4px !important;
  }

  /* 4. KHỐI ALBUM HÌNH ẢNH (CHUYỂN LÊN ĐÂY: DƯỚI ĐOẠN MÔ TẢ & TRÊN 4 THẺ TÍNH NĂNG) */
  .mrd-overview-right {
    order: 4 !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }

  .mrd-gallery-wrapper {
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5. 4 Thẻ tính năng */
  .mrd-overview-features {
    order: 5 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    width: 100% !important;
  }

  /* 6. 2 Nút hành động CTA */
  .mrd-overview-actions {
    order: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .mrd-overview-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .mrd-overview-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }

  .mrd-overview-card-content {
    flex: 1 1 auto !important;
  }

  .mrd-overview-card-title {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
  }

  .mrd-overview-card-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  .mrd-overview-btn-primary,
  .mrd-overview-btn-secondary {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .mrd-gallery-main-frame {
    height: 240px !important;
    min-height: 240px !important;
    border-radius: 14px !important;
    flex: none !important;
  }

  /* 5 Thumbnails trên 1 hàng duy nhất */
  .mrd-gallery-thumbs-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
    margin-top: 6px !important;
  }

  .mrd-gallery-thumb-item {
    height: 52px !important;
    border-radius: 8px !important;
  }

  /* ==========================================================================
     SECTION 05: SO SÁNH CHẤT LƯỢNG (#comparison)
     ========================================================================== */
  .mrd-compare-wrapper {
    padding: 44px 0 !important;
  }

  .mrd-compare-container {
    padding: 0 16px !important;
  }

  .mrd-compare-header {
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .mrd-compare-tag {
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
  }

  .mrd-compare-title {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .mrd-compare-title .mrd-vs-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    margin: 0 4px !important;
  }

  .mrd-compare-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .mrd-compare-2col-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mrd-slider-container {
    height: 260px !important;
    min-height: 260px !important;
    border-radius: 14px !important;
    flex: none !important;
  }

  /* Ẩn icon 4 mũi tên ở dòng hướng dẫn kéo thanh trượt trên mobile */
  .mrd-slider-hint {
    margin-top: 8px !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    gap: 0 !important;
  }

  .mrd-slider-hint svg {
    display: none !important;
  }

  .mrd-slider-badge {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  /* Ẩn bảng tĩnh 2 cột của desktop trên mobile */
  .mrd-compact-card {
    display: none !important;
  }

  /* HIỂN THỊ THANH TRƯỢT SO SÁNH CẮT ĐÔI DÀNH RIÊNG CHO MOBILE */
  .mrd-table-slider-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .mrd-table-slider-box {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Base Layer (Phải / Dưới): Máy Tự Động MRD-BWT002 */
  .mrd-table-panel-good {
    width: 100% !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mrd-table-panel-header {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
  }

  .mrd-table-th-good {
    justify-content: flex-end !important;
    padding-right: 14px !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    color: #0284c7 !important;
    border-bottom: 2px solid #bae6fd !important;
  }

  .mrd-table-th-bad {
    justify-content: flex-start !important;
    padding-left: 14px !important;
    background: #fff5f5 !important;
    color: #dc2626 !important;
    border-bottom: 2px solid #fecaca !important;
  }

  .mrd-table-panel-body {
    display: flex !important;
    flex-direction: column !important;
  }

  .mrd-table-cell {
    padding: 12px 14px !important;
    height: 84px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .mrd-table-cell:last-child {
    border-bottom: none !important;
  }

  .mrd-table-cell strong {
    display: block !important;
    font-size: 13.5px !important;
    margin-bottom: 3px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  .mrd-table-cell span {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .mrd-table-cell-good {
    background: rgba(240, 249, 255, 0.45) !important;
  }

  .mrd-table-cell-good strong {
    color: #0284c7 !important;
  }

  .mrd-table-cell-good span {
    color: #334155 !important;
  }

  .mrd-table-cell-bad {
    background: rgba(254, 242, 242, 0.45) !important;
  }

  .mrd-table-cell-bad strong {
    color: #dc2626 !important;
  }

  .mrd-table-cell-bad span {
    color: #4b5563 !important;
  }

  /* Clipped Layer (Trái / Trên): Máy Thông Thường */
  .mrd-table-layer-bad {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 50%;
    overflow: hidden !important;
    z-index: 4 !important;
    border-right: 2.5px solid #009fe3 !important;
    background: #ffffff !important;
    box-shadow: 3px 0 12px rgba(0, 0, 0, 0.12) !important;
  }

  .mrd-table-panel-bad {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Slider Handle kéo ở giữa */
  .mrd-table-slider-handle {
    position: absolute !important;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2.5px solid #009fe3 !important;
    box-shadow: 0 3px 16px rgba(0, 159, 227, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 8 !important;
    pointer-events: auto !important;
    cursor: ew-resize !important;
  }

  .mrd-table-slider-handle svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    pointer-events: none !important;
  }

  /* Range Input trong suốt hỗ trợ bàn phím / accessibility */
  .mrd-table-slider-range {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
  }

  /* Dòng hướng dẫn */
  .mrd-table-slider-hint {
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    font-style: italic !important;
  }

  .mrd-table-slider-wrap .mrd-compact-footer {
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    padding: 16px 14px !important;
  }

  /* Mid Gallery Marquee */
  .mrd-mid-gallery-wrapper {
    padding: 24px 0 !important;
  }

  .mrd-mid-gallery-track {
    gap: 10px !important;
  }

  .mrd-mid-gallery-item {
    width: 200px !important;
    height: 140px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  /* ==========================================================================
     SECTION 06: CẤU TRÚC 6 MODULE THIẾT BỊ (#structure) - KHẮC PHỤC LỖI ÉP CỘT
     ========================================================================== */
  .mrd-structure-wrapper {
    padding: 44px 0 !important;
  }

  .mrd-structure-container {
    padding: 0 16px !important;
  }

  .mrd-structure-header {
    margin-bottom: 22px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .mrd-structure-tag {
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
  }

  .mrd-structure-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.3px !important;
  }

  .mrd-structure-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  /* Chuyển grid 2 cột thành 1 cột dọc (Stack Layout) */
  .mrd-structure-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .mrd-structure-col-left,
  .mrd-structure-col-right {
    width: 100% !important;
  }

  /* Khung 3D hiển thị cân xứng phía trên (cao 280px, không bị bóp méo) */
  .mrd-structure-visual-box {
    width: 100% !important;
    height: 280px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .mrd-structure-visual-top-badge {
    height: 24px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    top: 10px !important;
    left: 10px !important;
  }

  /* Cụm 6 module chi tiết bên dưới */
  .mrd-structure-col-right {
    margin-top: 6px !important;
  }

  .mrd-structure-col-right .mrd-mod-gallery-box {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .mrd-mod-gallery-main {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    flex: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1.5px solid #cbd5e1 !important;
    background-color: #0f172a !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    display: block !important;
  }

  .mrd-mod-gallery-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .mrd-mod-gallery-top-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    z-index: 3 !important;
  }

  .mrd-mod-gallery-caption {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(10, 25, 47, 0.84) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 3 !important;
  }

  .mrd-mod-gallery-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
  }

  .mrd-mod-gallery-desc {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: #cbd5e1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* 6 Thumbnails dạng grid 3x2 thoáng đãng */
  .mrd-mod-thumbs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
    margin-top: 4px !important;
    height: auto !important;
  }

  .mrd-mod-thumb-item {
    height: 64px !important;
    border-radius: 8px !important;
  }

  .mrd-mod-thumb-pill {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
    bottom: 3px !important;
  }

  /* ==========================================================================
     SECTION 07: FULL-WIDTH CTA BANNER (#cta-banner) - KHẮC PHỤC KHOẢNG TRỐNG THỪA
     ========================================================================== */
  .mrd-cta-banner-wrapper {
    padding: 38px 0 !important;
    background: linear-gradient(135deg, #071a30 0%, #0a2540 50%, #003666 100%) !important;
  }

  .mrd-cta-banner-wrapper::before,
  .mrd-cta-banner-wrapper::after {
    display: none !important;
  }

  .mrd-cta-banner-container {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
  }

  .mrd-cta-content {
    width: 100% !important;
    text-align: left !important;
  }

  .mrd-cta-tag {
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
  }

  .mrd-cta-title {
    font-size: 21px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.3px !important;
  }

  .mrd-cta-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }

  .mrd-cta-perks {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mrd-cta-perk-item {
    font-size: 12.5px !important;
    gap: 6px !important;
  }

  /* 2 Nút hành động xếp chồng đều đặn, triệt tiêu khoảng trống thừa */
  .mrd-cta-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  .mrd-cta-btn-hotline,
  .mrd-cta-btn-quote {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: none !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
  }

  .mrd-cta-note {
    font-size: 12px !important;
    margin-top: 2px !important;
  }

  /* ==========================================================================
     SECTION 08: 3 CÔNG NGHỆ CỐT LÕI (#core-technologies)
     ========================================================================== */
  .mrd-tech-wrapper {
    padding: 44px 0 !important;
  }

  .mrd-tech-container {
    padding: 0 16px !important;
  }

  /* Yêu cầu Hình 1: Canh giữa phần tag và tiêu đề của Section 08 trên mobile */
  .mrd-tech-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 22px !important;
    width: 100% !important;
  }

  .mrd-tech-tag {
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin: 0 auto 12px auto !important;
    align-self: center !important;
  }

  .mrd-tech-title {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .mrd-tech-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .mrd-tech-viewport {
    padding: 10px 0 20px 0 !important;
  }

  .mrd-tech-card {
    flex: 0 0 min(290px, 82vw) !important;
    width: min(290px, 82vw) !important;
    border-radius: 16px !important;
    transform: scale(0.95) !important;
  }

  .mrd-tech-card.is-center {
    transform: scale(1.02) !important;
  }

  .mrd-tech-card-body {
    padding: 16px 14px !important;
  }

  /* Yêu cầu Hình 2: Canh giữa tag và tiêu đề bên trong từng card công nghệ trên mobile */
  .mrd-tech-card-title-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .mrd-tech-card-tag {
    align-self: center !important;
    margin: 0 auto 10px auto !important;
    text-align: center !important;
  }

  .mrd-tech-card-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .mrd-tech-bullet-item {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .mrd-tech-value-box {
    padding: 8px 10px !important;
    margin-top: 10px !important;
  }

  .mrd-tech-value-text {
    font-size: 12px !important;
  }

  .mrd-tech-nav-btn {
    width: 38px !important;
    height: 38px !important;
  }

  /* ==========================================================================
     SECTION 09: TIÊU CHUẨN KỸ THUẬT (#specifications)
     ========================================================================== */
  .mrd-specs-wrapper {
    padding: 44px 0 !important;
    scroll-margin-top: 70px !important;
  }

  .mrd-specs-container {
    padding: 0 16px !important;
  }

  /* Hình 3: Trên mobile phần header này canh giữa */
  .mrd-specs-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 22px !important;
  }

  .mrd-specs-tag {
    height: 28px !important;
    font-size: 11.5px !important;
    padding: 0 12px !important;
    margin: 0 auto 12px auto !important;
    align-self: center !important;
  }

  .mrd-specs-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .mrd-specs-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .mrd-specs-card {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Hình 4: Banner card bảng - Icon xích lên ngang hàng title, dòng phụ sát ra ngoài mép icon */
  .mrd-specs-card-banner {
    padding: 14px 14px 12px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .mrd-specs-banner-left {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .mrd-specs-banner-left > div:not(.mrd-specs-banner-icon) {
    display: contents !important;
  }

  .mrd-specs-banner-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .mrd-specs-banner-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .mrd-specs-banner-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #ffffff !important;
    align-self: center !important;
  }

  .mrd-specs-banner-sub {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Hình 2: Trên mobile bỏ phần tiêu chuẩn ISO 9001 */
  .mrd-specs-banner-badge {
    display: none !important;
  }

  /* Hình 1: Bảng chia làm 2 cột: Tên thông số và Thông số chi tiết, Zebra striping xen kẽ */
  .mrd-specs-mobile-col-header {
    display: grid !important;
    grid-template-columns: 122px 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background-color: #e2e8f0 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    box-sizing: border-box !important;
  }

  .mrd-specs-col-name {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-right: 1px solid #cbd5e1 !important;
    padding-right: 6px !important;
  }

  .mrd-specs-col-value {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
  }

  .mrd-specs-table-row,
  .mrd-specs-table-row:nth-child(even),
  .mrd-specs-table-row:nth-child(odd) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background-color: transparent !important;
    border-bottom: none !important;
  }

  .mrd-specs-cell-pair {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: grid !important;
    grid-template-columns: 122px 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
    padding: 9px 12px !important;
    min-height: 40px !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
  }

  /* Zebra striping: xen kẽ trắng và xanh nhạt cho từng dòng kế nhau */
  .mrd-specs-cell-pair.mrd-specs-left {
    background-color: #ffffff !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .mrd-specs-cell-pair.mrd-specs-right {
    background-color: #edf3f8 !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .mrd-specs-table-row:last-child .mrd-specs-cell-pair:last-child {
    border-bottom: none !important;
  }

  /* Cột 1: Tên thông số */
  .mrd-specs-label {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.35 !important;
    border-right: 1px solid #cbd5e1 !important;
    padding-right: 6px !important;
    margin: 0 !important;
  }

  .mrd-specs-label-bullet {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background-color: #009fe3 !important;
    flex-shrink: 0 !important;
  }

  /* Cột 2: Thông số chi tiết */
  .mrd-specs-value {
    width: 100% !important;
    flex: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    margin: 0 !important;
  }

  .mrd-specs-value strong {
    color: #004b87 !important;
    font-weight: 700 !important;
  }

  .mrd-specs-footer-strip {
    padding: 14px 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  .mrd-specs-footer-btn {
    width: 100% !important;
    height: 46px !important;
    justify-content: center !important;
  }

  /* ==========================================================================
     SECTION 10: VỀ MATSUYA R&D (#about)
     ========================================================================== */
  .mrd-about-wrapper {
    padding: 44px 0 !important;
  }

  .mrd-about-container {
    padding: 0 16px !important;
  }

  /* Hình 1: Phần header này cho canh giữa */
  .mrd-about-header {
    margin-bottom: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .mrd-about-header .mrd-about-tag {
    align-self: center !important;
    margin: 0 auto 12px auto !important;
  }

  .mrd-about-main-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .mrd-about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mrd-about-gallery-main {
    height: 220px !important;
    border-radius: 12px !important;
  }

  /* Hình 2: Phần này chỉ để 1 hàng hình thôi, không để 2 hàng */
  .mrd-about-thumbs {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 5px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  .mrd-about-thumb-btn {
    flex: none !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 6px !important;
  }

  .mrd-about-nav-btn {
    display: none !important;
  }

  .mrd-about-card {
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }

  .mrd-about-card-title {
    font-size: 17px !important;
    margin-bottom: 10px !important;
  }

  .mrd-about-card-text {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }

  .mrd-about-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  .mrd-about-hl-item {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }

  .mrd-about-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .mrd-about-btn-primary,
  .mrd-about-btn-secondary {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* ==========================================================================
     SECTION 11: FAQ & FORM BÁO GIÁ (#faq & #contact)
     ========================================================================== */
  .mrd-faq-wrapper {
    padding: 48px 0 54px 0 !important;
    background: linear-gradient(135deg, #071a30 0%, #0a2540 50%, #003666 100%) !important;
  }

  .mrd-faq-wrapper::before,
  .mrd-faq-wrapper::after {
    display: none !important;
  }

  .mrd-faq-container {
    padding: 0 16px !important;
  }

  .mrd-faq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .mrd-faq-title {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .mrd-faq-subtitle {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }

  .mrd-faq-btn {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .mrd-faq-btn-text {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .mrd-faq-content-inner {
    padding: 0 16px 14px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .mrd-faq-form-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .mrd-faq-form-title {
    font-size: 18px !important;
    text-align: center !important;
  }

  .mrd-faq-form-sub {
    font-size: 12.5px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  .mrd-form-input,
  .mrd-form-textarea {
    padding: 11px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .mrd-form-submit-btn {
    height: 48px !important;
    font-size: 14.5px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  .mrd-form-footer-note {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  /* ==========================================================================
     SECTION 12: POPUP LEAD CAPTURE & QUICKCHAT FLOATING
     ========================================================================== */
  .mrd-popup-dialog {
    max-width: 92vw !important;
    border-radius: 16px !important;
    margin: 10px !important;
  }

  .mrd-popup-banner {
    height: 110px !important;
  }

  .mrd-popup-body {
    padding: 18px 16px !important;
  }

  .mrd-popup-title {
    font-size: 17px !important;
  }

  .mrd-popup-desc {
    font-size: 12.5px !important;
  }

  .mrd-popup-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .mrd-popup-input,
  .mrd-popup-textarea {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
  }

  .mrd-popup-submit-btn {
    height: 46px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .mrd-popup-call-btn {
    font-size: 12.5px !important;
    padding: 10px 12px !important;
  }

  /* Floating Quickchat Trigger */
  .mrd-quickchat-trigger {
    bottom: 18px !important;
    right: 16px !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .mrd-quickchat-box {
    bottom: 70px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE PHONES (max-width: 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .mrd-hero-title {
    font-size: 23px !important;
  }

  .mrd-structure-title,
  .mrd-overview-title,
  .mrd-specs-title,
  .mrd-about-main-title,
  .mrd-faq-title {
    font-size: 22px !important;
  }

  .mrd-stats-num {
    font-size: 23px !important;
  }

  .mrd-stats-unit {
    font-size: 13.5px !important;
  }

  .mrd-mod-thumbs-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .mrd-mod-thumb-item {
    height: 56px !important;
  }

  .mrd-mod-thumb-pill {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
  }
}