@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Colors */
  --primary-blue: #2C69B3;
  --secondary-blue: #E8F0FE;
  --accent-red: #E32633;
  --text-main: #333333;
  --text-muted: #666666;
  --bg-light: #F8F9FA;
  --bg-white: #FFFFFF;
  --border-color: #E0E0E0;

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography Classes */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  font-family: var(--font-heading);
  text-wrap: wrap;
}

p, li, td, th {
  text-wrap: wrap;
}

.h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.h3 { font-size: 1.5rem; font-weight: 600; }
.text-center { text-align: center; }
.text-primary { color: var(--primary-blue); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
}
.btn:active {
  transform: scale(0.95) !important;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: var(--bg-white);
}
.btn-primary:hover {
  background-color: #1f4982;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(44, 105, 179, 0.3);
}

.btn-danger {
  background-color: var(--accent-red);
  color: var(--bg-white);
}
.btn-danger:hover {
  background-color: #c92a27;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(227, 38, 51, 0.3);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-outline:hover {
  background-color: var(--primary-blue);
  color: var(--bg-white);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(44, 105, 179, 0.25);
}

/* Header */
.header {
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 15px 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
}
.logo span {
  color: var(--accent-red);
}

.nav-menu {
  display: flex;
  gap: 30px;
}
.nav-link {
  font-weight: 500;
  color: var(--text-main);
  transition: color var(--transition-fast);
}
.nav-link:hover, .nav-link.active {
  color: var(--primary-blue);
}

.header-actions {
  display: flex;
  gap: 15px;
}

/* Footer */
.footer {
  background-color: var(--secondary-blue);
  padding: 60px 0 30px;
  margin-top: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  color: var(--primary-blue);
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.footer-info {
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.footer-info i {
  color: var(--primary-blue);
  margin-right: 12px;
  font-size: 1.3rem;
  vertical-align: middle;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color var(--transition-fast);
}
.footer-links a:hover {
  color: var(--primary-blue);
}
.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}
.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}
.social-icon:hover {
  background: var(--primary-blue);
  color: var(--bg-white);
  transform: translateY(-3px);
}
.footer-bottom {
  text-align: left;
  padding-top: 20px;
  border-top: 1px solid rgba(42, 92, 159, 0.1);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Marquee Carousel */
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  animation: marquee 30s linear infinite;
}

/* Pause animation on hover */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-content img {
  height: 50px; /* Base height for logos */
  margin: 0 40px;
  object-fit: contain;
  transition: all var(--transition-fast);
}



@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Detail Page Styles */
.service-detail-hero {
    background: linear-gradient(135deg, var(--bg-light) 0%, #e0e8f5 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.service-detail-hero .container {
    display: flex;
    align-items: center;
    gap: 40px;
}
.service-detail-content {
    flex: 1;
}
.service-detail-image {
    flex: 1;
    text-align: right;
}
.service-detail-image img {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}
.detail-section {
    padding: 60px 0;
}
.detail-section:nth-child(even) {
    background-color: var(--bg-white);
}
.detail-section:nth-child(odd) {
    background-color: var(--bg-light);
}

/* Table Styles */
.package-table-container {
    overflow-x: auto;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    width: 100% !important;
    max-width: 100% !important;
}
.package-table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
}
.package-table th, .package-table td {
    padding: 15px;
    border: 1px solid #e2e8f0;
    text-align: left;
    font-size: 0.95rem;
}
.package-table th {
    background-color: var(--secondary-blue);
    color: var(--primary-blue);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.package-table th.text-center, .package-table td.text-center {
    text-align: center;
}
.package-table td.purpose-cell {
    background-color: #f8fafc;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.check-icon {
    color: var(--primary-blue);
    font-size: 1.2rem;
    font-weight: bold;
}
.price-row td {
    background-color: var(--primary-blue);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}
.price-row td.price-value {
    background-color: var(--accent-red);
}

/* ========================================================================== */
/* POSTS FORMATTING - TIN TỨC & TUYỂN DỤNG (NEWS & RECRUITMENT POSTS)       */
/* - Đảm bảo hiển thị đầy đủ, full chiều ngang bảng và nội dung trên mọi thiết bị */
/* ========================================================================== */
.article-content,
.jd-detail-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}

.article-content *,
.jd-detail-card * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ngăn chặn xuống dòng sớm (text-wrap: balance) trong tất cả các tiêu đề và nội dung bài viết Tin tức & Tuyển dụng */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6,
.article-content p,
.article-content li,
.article-content td,
.article-content th,
.article-content span,
.article-content a,
.jd-detail-card h1,
.jd-detail-card h2,
.jd-detail-card h3,
.jd-detail-card h4,
.jd-detail-card h5,
.jd-detail-card h6,
.jd-detail-card p,
.jd-detail-card li,
.jd-detail-card td,
.jd-detail-card th,
.jd-detail-card span,
.jd-detail-card a,
#hero-section h1 {
    text-wrap: wrap !important;
    text-wrap-mode: wrap !important;
    text-wrap-style: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Tables inside News & Recruitment posts */
.article-content table,
.jd-detail-card table,
.jd-content table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
    display: table !important;
}

.article-content table th,
.article-content table td,
.jd-detail-card table th,
.jd-detail-card table td,
.jd-content table th,
.jd-content table td {
    padding: 12px 10px !important;
    border: 1px solid #e2e8f0 !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

.article-content table th,
.jd-detail-card table th,
.jd-content table th {
    background-color: var(--secondary-blue, #eff6ff) !important;
    color: var(--primary-blue, #0d3b66) !important;
    font-weight: 600 !important;
}

/* Images & embedded media inside News & Recruitment posts */
.article-content img,
.article-content iframe,
.article-content video,
.jd-detail-card img,
.jd-detail-card iframe,
.jd-detail-card video,
.jd-content img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.article-content figure,
.article-content .wp-caption {
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
}

/* Accordion Styles */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.accordion-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-main);
    transition: background-color 0.3s ease;
}
.accordion-header:hover {
    background-color: var(--bg-light);
}
.accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--text-muted);
    line-height: 1.6;
}
.accordion-item.active .accordion-content {
    padding: 20px;
    max-height: 500px;
    border-top: 1px solid #e2e8f0;
}
.accordion-icon {
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.service-detail-hero h1 {
    line-height: 1.5 !important;
}

/* Related Packages Carousel */
.related-carousel-wrapper {
    position: relative;
    padding: 0 40px;
}
.related-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.related-carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.related-package-card {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    min-width: 200px;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 1.2rem;
    color: var(--primary-blue);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.carousel-btn:hover {
    background: var(--primary-blue);
    color: white;
}
.carousel-prev {
    left: -10px;
}
.carousel-next {
    right: -10px;
}
@media (max-width: 992px) {
    .related-package-card { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 768px) {
    .related-package-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 480px) {
    .related-package-card { flex: 0 0 100%; }
}

/* New Background Banner Styles for Service Subpages */
.service-detail-hero.bg-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    color: #ffffff;
    text-align: left;
    overflow: hidden;
}
.service-detail-hero.bg-banner .bg-banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(10, 37, 88, 0.7), rgba(10, 37, 88, 0.9));
    z-index: 1;
}
.service-detail-hero.bg-banner .container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.service-detail-hero.bg-banner h1.h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.service-detail-hero.bg-banner p {
    color: #e0e6ed !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Floating Action Buttons */
.floating-action-buttons {
    position: fixed;
    bottom: 40px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 9999;
}
.fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white !important;
    text-decoration: none;
    font-size: 22px;
    transition: all 0.3s ease;
}
.fab-btn:hover {
    transform: translateY(-5px);
}
.fab-facebook {
    background-color: #1877f2;
    box-shadow: 0 0 0 6px rgba(24, 119, 242, 0.25);
}
.fab-youtube {
    background-color: #ff0000;
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.25);
}
.fab-zalo {
    background-color: #0088FF;
    box-shadow: 0 0 0 6px rgba(0, 136, 255, 0.25);
    font-size: 14px;
    font-weight: 800;
    font-family: Arial, Helvetica, sans-serif;
}
.fab-phone {
    background-color: #ea1c24;
    box-shadow: 0 0 0 6px rgba(234, 28, 36, 0.25);
}

/* Global Image Hover Zoom Effect for all Cover Images (Cards & Thumbnails) */
div:has(> img[style*="object-fit: cover"]),
a:has(> img[style*="object-fit: cover"]),
figure:has(> img[style*="object-fit: cover"]) {
    overflow: hidden;
}
img[style*="object-fit: cover"] {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform-origin: center center;
}
div:has(> img[style*="object-fit: cover"]):hover > img[style*="object-fit: cover"],
a:has(> img[style*="object-fit: cover"]):hover > img[style*="object-fit: cover"],
figure:has(> img[style*="object-fit: cover"]):hover > img[style*="object-fit: cover"] {
    transform: scale(1.08) !important;
}

/* Restore bullet points for lists inside content sections (e.g. service details) */
.detail-section ul {
    list-style-type: disc;
}
.detail-section ul li {
    margin-bottom: 8px;
}


/* ========================================= */
/* RESPONSIVE MEDIA QUERIES (TABLET & MOBILE) */
/* ========================================= */

/* Tablet Optimization */
@media (max-width: 992px) {
    .header .container {
        flex-wrap: wrap;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .package-table-container,
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }
    .package-table {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    .service-detail-hero .container {
        flex-direction: column;
        text-align: center;
    }
    .service-detail-content {
        align-items: center !important;
        text-align: center !important;
    }
    .service-detail-image {
        text-align: center;
        margin-top: 20px;
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .h1, .service-detail-hero.bg-banner h1.h1 { font-size: 2rem !important; }
    .h2 { font-size: 1.6rem !important; }
    .h3 { font-size: 1.3rem !important; }
    
    .header .container {
        position: relative;
    }
    .nav-menu {
        display: none;
        width: 85%;
        max-width: 320px;
        flex-direction: column;
        background: var(--bg-white);
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        box-shadow: -4px 10px 20px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        gap: 0;
        z-index: 1001;
        border-bottom-left-radius: 16px;
    }
    .nav-menu.active {
        display: flex;
    }
    .nav-menu li {
        width: 100%;
    }
    .nav-link {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid #f1f5f9;
    }
    .nav-link:last-child {
        border-bottom: none;
    }
    
    .mobile-menu-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 15px 20px 20px 20px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        height: auto !important;
    }
    .mobile-menu-actions .tracuu-dropdown {
        width: 100% !important;
    }
    .mobile-menu-actions .tracuu-btn {
        width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        height: 42px !important;
        padding: 0 15px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border: 1px solid #1565c0 !important;
        color: #1565c0 !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    .mobile-menu-actions .tracuu-menu,
    .mobile-menu-actions .tracuu-dropdown:not(.open) .tracuu-menu,
    .tracuu-dropdown:not(.open) .tracuu-menu {
        display: none !important;
    }
    .mobile-menu-actions .tracuu-dropdown.open .tracuu-menu,
    .tracuu-dropdown.open .tracuu-menu {
        display: block !important;
    }
    .mobile-menu-actions a.btn-danger {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        border: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        color: var(--primary-blue);
        font-size: 1.5rem;
        cursor: pointer;
        order: 1;
    }
    .header-actions {
        display: none; /* Hide header actions on very small screens, or we can move them to menu */
    }
    .nav-menu.active + .header-actions-mobile {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        padding: 15px 20px;
        gap: 10px;
        background: var(--bg-white);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .package-table-container {
        border-radius: 8px;
    }
    
    .stats-section-observer .stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 10px !important;
        width: 100% !important;
    }
    
    .detail-section {
        padding: 40px 0;
    }
    
    /* Fix rigid 450px image cropping on mobile */
    div[style*="height: 450px"] {
        height: auto !important;
        aspect-ratio: 4/3;
    }
    
    /* Fix floating card moving off-screen */
    div[style*="bottom: -20px"] {
        left: 20px !important;
        bottom: -30px !important;
        width: calc(100% - 40px) !important;
        right: 20px !important;
        justify-content: flex-start !important;
        padding: 12px 15px !important;
    }
    
    /* Optimize buttons layout on mobile */
    div[style*="display: flex; gap: 15px;"]:has(> a.btn) {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    div[style*="display: flex; gap: 15px;"] > a.btn {
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
    }
    
    /* Ensure hero sections drop into columns without stretching */
    .service-detail-hero .container > div[style*="flex: 1"] {
        width: 100% !important;
        flex: none !important;
    }
}

@media (min-width: 769px) { .mobile-menu-toggle { display: none !important; } }


@media (max-width: 768px) {
    /* 1. Force 3-column or 4-column inline grids to 1-column on mobile */
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important; /* Reduce gap on mobile */
    }
    
    /* 2. Make the filter tab container horizontal scrolling instead of wrapping */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 15px !important;
        gap: 10px !important;
        scrollbar-width: thin; /* For Firefox */
    }
    
    /* Hide scrollbar for cleaner look on Chrome/Safari */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"]::-webkit-scrollbar {
        height: 4px;
    }
    div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"]::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 4px;
    }
    
    /* Ensure filter tabs themselves don't shrink */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    
    /* 3. Reduce padding in news cards */
    #news-grid-container > div > div[style*="padding: 25px"] {
        padding: 15px !important;
    }
}


/* ========================================= */
/* MODERN UX/UI ENHANCEMENTS                 */
/* ========================================= */

@media (max-width: 768px) {
    
    /* 2. Soft UI: Borders and Shadows */
    .services-grid > div,
    .card {
        box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
    }
    
    /* 3. Typography Hierarchy */
    .h2, h2 {
        font-weight: 700 !important;
    }
    .h3, h3 {
        font-weight: 600 !important;
    }
    p {
        line-height: 1.65 !important;
    }
    
    /* 4. Touch-friendly Hamburger Menu Links */
    .nav-link {
        padding: 16px 20px !important; /* Larger touch area */
        font-size: 1.05rem !important;
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}


@media (max-width: 768px) {
    /* 5. Scale down floating action buttons on mobile */
    .floating-action-buttons {
        transform: scale(0.75);
        transform-origin: bottom right;
        bottom: 20px !important;
        right: 15px !important;
    }
}


/* ========================================= */
/* HERO SECTION RESPONSIVE CSS               */
/* ========================================= */
.hero-section { padding: 80px 0; background-color: var(--bg-white); }
.hero-container { display: flex; gap: 40px; align-items: center; }
.hero-left, .hero-right { flex: 1; }
.hero-badge { background: #e8effc; color: var(--primary-blue); padding: 6px 16px; border-radius: 20px; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; display: inline-block; margin-bottom: 20px; }
.hero-title { color: var(--text-main); margin-bottom: 20px; font-size: 3.5rem; line-height: 1.2; font-weight: 700; }
.hero-desc { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 30px; max-width: 90%; line-height: 1.6; }
.hero-buttons { display: flex; gap: 15px; }
.hero-buttons .btn { padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; }
.hero-buttons .btn i { margin-left: 8px; }

.hero-right { position: relative; }
.hero-img-wrapper { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); height: 450px; background: white; padding: 10px; }
.hero-img-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: #ddd; }

.hero-floating-card { position: absolute; bottom: -20px; left: -40px; background: white; padding: 15px 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 15px; z-index: 10; }
.hero-floating-card .card-icon { width: 45px; height: 45px; background: var(--primary-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; position: relative; }
.hero-floating-card .card-icon-check { position: absolute; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%; width: 14px; height: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-floating-card .card-icon-check i { background: var(--primary-blue); width: 8px; height: 8px; }
.hero-floating-card .title { font-weight: 600; color: var(--text-main); font-size: 0.95rem; margin-bottom: 2px; }
.hero-floating-card .subtitle { color: var(--text-muted); font-size: 0.8rem; }

@media (max-width: 768px) {
    .hero-section { padding: 30px 0; overflow-x: hidden; }
    
    /* Quay lại giao diện 2 cột (Text trái, Hình phải) */
    .hero-container { flex-direction: row; gap: 15px; align-items: center; }
    .hero-left { flex: 1; max-width: 50%; }
    
    /* 1. Hình ảnh 50% bên phải */
    .hero-right {
        flex: 1;
        width: 100%;
        max-width: 50%;
        margin-left: 0;
    }
    .hero-img-wrapper { 
        height: 220px; /* Giảm chiều cao để tỷ lệ ảnh không bị dài sọc */
        width: 100%; 
        padding: 5px; 
        margin: 0;
        border-radius: 12px; 
        box-shadow: var(--shadow-sm); 
    }
    
    /* 2. Text và button nhỏ lại để vừa 50% bên trái */
    .hero-badge { margin-bottom: 8px; font-size: 0.55rem; padding: 4px 8px; }
    .hero-title { font-size: 1.4rem; margin-bottom: 10px; line-height: 1.2; }
    .hero-desc { font-size: 0.75rem; margin-bottom: 15px; line-height: 1.4; max-width: 100%; }
    
    /* Buttons: Khóa 2 nút Đặt lịch & Tìm hiểu dịch vụ trên 1 dòng ngang, scale down nhỏ gọn (0.58rem) để không bị sát thẻ bên phải */
    .hero-buttons { 
        gap: 4px !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .hero-buttons .btn { 
        padding: 5px 4px !important; 
        font-size: 0.58rem !important; 
        justify-content: center !important; 
        text-align: center !important;
        white-space: nowrap !important;
        flex: 1 1 50% !important;
        min-width: 0 !important;
    }
    .hero-buttons .btn i {
        display: none !important;
    }
    
    /* 3. Thẻ kết quả: Scale down xuống 0.62 và nép sát góc dưới phải để tạo khoảng trống lớn với nút bên trái */
    .hero-floating-card {
        padding: 6px 10px !important;
        bottom: -6px !important;
        left: auto !important;
        right: 0px !important;
        margin: 0 !important;
        width: max-content !important;
        gap: 6px !important;
        transform: scale(0.62) !important;
        transform-origin: bottom right !important;
        z-index: 10 !important;
    }
}


/* Hide mobile menu buttons on Desktop */
@media (min-width: 769px) {
    .mobile-menu-actions {
        display: none !important;
    }
    .partnership-philosophy-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .partnership-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ========================================= */
/* STATS SECTION MOBILE FIXES                */
/* ========================================= */
@media (max-width: 768px) {
    /* 1. Lưới 2x2 cho 4 chi tiết nổi bật */
    .stats-row,
    .stats-section-observer .stats-row { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 10px !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }
    .stats-item { 
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 5px 0 !important;
    }
    
    /* Đảm bảo số lượng (400k+, 1.400+, 650+, ISO) nằm trên 1 dòng, không rớt dấu + */
    .stats-item h3 { 
        font-size: 2.3rem !important; 
        color: var(--primary-blue) !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }
    
    /* Đảm bảo phụ đề nằm trên 1 dòng, không bị xuống dòng ngẫu nhiên */
    .stats-item p {
        font-size: 0.72rem !important;
        letter-spacing: 0px !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
    }
    
    /* 2. Kéo dài đoạn text dưới cùng 100% và canh giữa */
    .stats-footer-text,
    .stats-section-observer .stats-footer-text { 
        display: block !important;
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 20px auto 0 !important; 
        padding: 0 15px !important; 
        text-align: center !important; 
        box-sizing: border-box !important;
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 480px) {
    .stats-item h3 { 
        font-size: 2.0rem !important; 
    }
    .stats-item p {
        font-size: 0.68rem !important;
    }
}


/* ========================================================================== */
/* GLOBAL MOBILE UI/UX AUDIT & OPTIMIZATION SUITE (320px - 768px)             */
/* SAFEGUARDED: DOES NOT AFFECT DESKTOP (ONLY APPLIES <= 768px)               */
/* ========================================================================== */

@media (max-width: 768px) {
    /* 1. Global Layout & Overflow Prevention */
    html, body {
        overflow-x: clip !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative;
    }

    /* Neo Header cố định trên cùng khi cuộn trang cho Mobile */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }
    main {
        padding-top: 72px !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Prevent text or long URLs from breaking layout */
    p, h1, h2, h3, h4, h5, h6, a, span, li {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* 2. Typography & Readability Optimization (768px & below) */
    .h1, h1 {
        font-size: 2.1rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }
    .h2, h2 {
        font-size: 1.9rem !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
    }
    .h3, h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    p, li {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }

    /* 3. Images & Media Fluidity */
    img, iframe, video, svg {
        max-width: 100% !important;
        height: auto;
    }

    /* 4. Touch Targets & CTA Accessibility (Min 44x44px for touch screens) */
    .btn, button, .nav-link, .accordion-header, .carousel-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* iOS Safari Auto-Zoom Prevention on Input Focus */
    input, select, textarea, .form-control {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* 5. Table Responsive Enhancement - Hiển thị full bảng chi tiết gói xét nghiệm trên màn hình di động */
    .package-table-container,
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
    }

    .package-table {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    .package-table th,
    .package-table td {
        padding: 8px 5px !important;
        font-size: 0.76rem !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    .package-table th {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .package-table td.purpose-cell {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    .package-table th[width],
    .package-table td[width] {
        width: auto !important;
    }

    /* 5b. Posts Responsive Formatting (Tin tức & Tuyển dụng) - Hiển thị full bảng và nội dung trên mobile */
    .article-content,
    .jd-detail-card,
    .jd-content {
        padding: 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    .article-content table,
    .jd-detail-card table,
    .jd-content table {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        margin: 15px 0 !important;
        box-sizing: border-box !important;
    }

    .article-content table th,
    .article-content table td,
    .jd-detail-card table th,
    .jd-detail-card table td,
    .jd-content table th,
    .jd-content table td {
        padding: 8px 5px !important;
        font-size: 0.76rem !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    .article-content table th,
    .jd-detail-card table th,
    .jd-content table th {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .article-content table th[width],
    .article-content table td[width],
    .jd-detail-card table th[width],
    .jd-detail-card table td[width],
    .jd-content table th[width],
    .jd-content table td[width] {
        width: auto !important;
    }

    /* Override inline padding 40px on JD detail containers on mobile */
    .jd-detail-card[style*="padding: 40px"],
    .jd-detail-card {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }

    #hero-section h1 {
        font-size: 1.8rem !important;
        line-height: 1.35 !important;
    }

    /* 6. Mobile Navigation Enhancement */
    .nav-menu {
        width: 90% !important;
        max-width: 320px !important;
        right: 0 !important;
        left: auto !important;
        box-sizing: border-box !important;
    }
    .nav-link {
        padding: 14px 20px !important;
        min-height: 48px;
    }
}

/* Specific optimizations for Small Phones & Narrow Aspect Ratios (320px - 480px) */
@media (max-width: 480px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .package-table th,
    .package-table td {
        padding: 6px 3px !important;
        font-size: 0.72rem !important;
    }
    .package-table th {
        font-size: 0.68rem !important;
    }
    .package-table td.purpose-cell {
        font-size: 0.68rem !important;
    }
    .article-content table th,
    .article-content table td,
    .jd-detail-card table th,
    .jd-detail-card table td,
    .jd-content table th,
    .jd-content table td {
        padding: 6px 3px !important;
        font-size: 0.72rem !important;
    }
    .article-content table th,
    .jd-detail-card table th,
    .jd-content table th {
        font-size: 0.68rem !important;
    }
    .jd-detail-card[style*="padding: 40px"],
    .jd-detail-card {
        padding: 15px 10px !important;
    }
    #hero-section h1 {
        font-size: 1.55rem !important;
    }

    /* Hero Section: Layout 1 cột xếp thứ tự Title -> Hình ảnh -> Text -> Buttons chuẩn đẹp trên Mobile */
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-left {
        display: contents !important;
    }
    .hero-badge {
        order: 1 !important;
        margin-bottom: 4px !important;
        font-size: 0.75rem !important;
        padding: 5px 14px !important;
        border-radius: 20px !important;
        width: fit-content !important;
    }
    .hero-title {
        order: 2 !important;
        font-size: 1.85rem !important;
        margin-bottom: 8px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-right {
        order: 3 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        margin-bottom: 25px !important;
        position: relative !important;
    }
    .hero-img-wrapper { 
        height: 220px !important; 
        width: 100% !important; 
        padding: 6px !important; 
        margin: 0 !important;
        border-radius: 16px !important; 
        box-shadow: var(--shadow-md) !important; 
    }
    .hero-floating-card {
        padding: 8px 15px !important;
        bottom: -15px !important;
        left: auto !important;
        right: 15px !important;
        margin: 0 !important;
        width: max-content !important;
        gap: 10px !important;
        transform: scale(0.88) !important;
        transform-origin: bottom right !important;
        z-index: 10 !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
    }
    .hero-desc {
        order: 4 !important;
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
        line-height: 1.55 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-buttons { 
        order: 5 !important;
        gap: 10px !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .hero-buttons .btn { 
        padding: 11px 14px !important; 
        font-size: 0.82rem !important; 
        font-weight: 600 !important;
        justify-content: center !important; 
        text-align: center !important;
        white-space: nowrap !important;
        flex: 1 1 50% !important;
        min-width: 0 !important;
        border-radius: 8px !important;
    }
    .hero-buttons .btn i {
        display: inline-block !important;
        margin-left: 5px !important;
        font-size: 0.85em !important;
    }

    /* Footer adjustments for small phones */
    .footer {
        padding: 40px 0 25px !important;
    }
    .footer-grid {
        gap: 25px !important;
    }
}


/* ========================================================================== */
/* NĂNG LỰC XÉT NGHIỆM SECTION MOBILE FIXES (768px & below)                   */
/* ========================================================================== */

@media (max-width: 768px) {
    /* 1. Canh top (flex-start) cho header và button Hồ sơ năng lực thuộc section Năng lực xét nghiệm */
    div[style*="justify-content: space-between; align-items: flex-end"]:has(a[href*="ho-so-nang-luc.html"]),
    div[style*="justify-content: space-between; align-items: flex-end"] {
        align-items: flex-start !important;
    }
    
    /* 2. Tăng kích thước text "Năng lực xét nghiệm" và canh chuẩn top edge */
    div[style*="justify-content: space-between; align-items: flex-end"] h2.h2,
    div[style*="justify-content: space-between; align-items: flex-end"] h2 {
        font-size: 1.95rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }
    
    /* 3. Loại bỏ margin hay padding trên nhóm button để đỉnh button thẳng hàng 100% với đỉnh H2 */
    div[style*="justify-content: space-between; align-items: flex-end"] div[style*="display: flex"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    div[style*="justify-content: space-between; align-items: flex-end"] div[style*="display: flex"] > a.btn:first-child {
        margin-top: 0 !important;
    }
    
    /* 4. Giới hạn chiều rộng đoạn phụ đề bên trái để nằm gọn hơn, ngắt dòng đều và không bị sát nút bấm */
    div[style*="justify-content: space-between; align-items: flex-end"]:has(a[href*="ho-so-nang-luc.html"]) p,
    div[style*="justify-content: space-between; align-items: flex-end"] p {
        max-width: 78% !important;
        padding-right: 15px !important;
        line-height: 1.55 !important;
        text-wrap: pretty !important;
    }
}

@media (max-width: 480px) {
    div[style*="justify-content: space-between; align-items: flex-end"] h2.h2,
    div[style*="justify-content: space-between; align-items: flex-end"] h2 {
        font-size: 1.75rem !important;
    }
    div[style*="justify-content: space-between; align-items: flex-end"]:has(a[href*="ho-so-nang-luc.html"]) p,
    div[style*="justify-content: space-between; align-items: flex-end"] p {
        max-width: 85% !important;
        padding-right: 10px !important;
    }
}


/* Mặc định trên Desktop ẩn thẻ ngắt dòng di động (.mobile-br) */
.mobile-br {
    display: none !important;
}

/* ========================================================================== */
/* TIN TỨC & SỨC KHỎE SECTION MOBILE FIXES (768px & below)                    */
/* ========================================================================== */

@media (max-width: 768px) {
    /* 1. Đảm bảo carousel Tin tức & Sức khỏe hiển thị 1 thẻ duy nhất gọn gàng trên Mobile */
    #home-news-carousel {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        min-height: auto !important;
        padding: 10px 0 20px !important;
    }

    /* 2. Chuẩn hóa hình dáng thẻ tin tức (Card Shape & Styling): scale to lên để giảm padding 2 bên */
    #home-news-carousel > div {
        background: #ffffff !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        margin: 5px 0 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    /* 3. Tối ưu hình ảnh trong thẻ tin tức: tăng chiều cao tương ứng với độ rộng thẻ */
    #home-news-carousel > div > img {
        width: 100% !important;
        height: 260px !important;
        object-fit: cover !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        display: block !important;
    }

    /* 4. Nội dung bài viết bên trong thẻ (Padding & Layout) */
    #home-news-carousel > div > div {
        padding: 28px 26px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    /* 5. Chuyên mục và Ngày tháng (Category & Date) */
    #home-news-carousel > div > div > div:first-child {
        font-size: 0.82rem !important;
        color: var(--text-muted) !important;
        margin-bottom: 12px !important;
        font-weight: 500 !important;
    }
    #home-news-carousel > div > div > div:first-child span {
        color: var(--primary-blue) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    /* 6. Tiêu đề bài viết (Title H4) - Khóa 2 dòng */
    #home-news-carousel > div h4 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        color: var(--text-main) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 7. Đoạn tóm tắt (Excerpt P) - Khóa 3 dòng có dấu ... */
    #home-news-carousel > div p {
        font-size: 0.95rem !important;
        color: var(--text-muted) !important;
        line-height: 1.6 !important;
        margin-bottom: 22px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 8. Nút "Đọc tiếp" dưới cùng */
    #home-news-carousel > div a {
        color: var(--primary-blue) !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        margin-top: auto !important;
    }
}

@media (max-width: 480px) {
    #home-news-carousel > div > img {
        height: 210px !important;
    }
    #home-news-carousel > div > div {
        padding: 22px 18px !important;
    }
}


/* ========================================================================== */
/* CHỨNG CHỈ ISO 15189:2022 & CTA BANNER MOBILE FIXES (768px & below)         */
/* ========================================================================== */

@media (max-width: 768px) {
    /* 1. Chuyển bố cục từ 2 cột (50% - 50%) sang 1 cột dọc (100% width) */
    div[style*="display: flex; align-items: center; gap: 60px;"] {
        flex-direction: column !important;
        gap: 35px !important;
        align-items: stretch !important;
    }

    /* 2. Cột nội dung (Text, thẻ, button) chiếm trọn 100% chiều ngang */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* 2a. Tăng kích thước chữ "CHỨNG NHẬN QUỐC TẾ" cho to và nổi bật hơn */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div:first-child {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 12px !important;
    }

    /* 2b. Đảm bảo "Đạt tiêu chuẩn ISO 15189:2022" hiển thị trên 1 dòng duy nhất (ẩn thẻ br) */
    div[style*="display: flex; align-items: center; gap: 60px;"] h2 {
        font-size: 1.35rem !important;
        white-space: nowrap !important;
        margin-bottom: 20px !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] h2 br {
        display: none !important;
    }

    /* 2c. Ẩn nút "Tìm hiểu về tiêu chuẩn" ở trên cùng, hiển thị nút bên dưới hình ảnh giấy chứng nhận */
    section a.btn.desktop-iso-btn {
        display: none !important;
    }
    .mobile-iso-btn {
        display: inline-flex !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 15px !important;
    }

    /* 3. Đưa 3 thẻ tag ISO vào lưới 3x1 dàn đều 100% chiều ngang thay vì bị gom về bên trái */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] > div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 10px !important;
        white-space: normal !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Cột hình ảnh chứng chỉ ISO chiếm trọn 100% chiều ngang (không còn bị nhỏ ở 50% bên phải) */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-top: 10px !important;
    }

    /* 5. Tối ưu khung hình chứng chỉ và bóng đổ */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:last-child > div:first-child {
        padding: 15px !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:last-child img {
        width: 100% !important;
        height: auto !important;
    }

    /* 6. Thẻ Huy chương floating "TIÊU CHUẨN VÀNG" nằm an toàn không bị tràn viền */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:last-child > div[style*="position: absolute"] {
        bottom: -12px !important;
        right: 15px !important;
        padding: 10px 20px !important;
        font-size: 0.82rem !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    }

    /* 7. CTA Banner "Bảo vệ sức khỏe" chuyển thành cột dọc trên Mobile, mang icon lên trên đầu */
    div[style*="background: linear-gradient(135deg, #103463 0%, var(--primary-blue) 100%)"] {
        flex-direction: column !important;
        padding: 35px 22px !important;
        text-align: center !important;
        gap: 25px !important;
    }
    div[style*="background: linear-gradient(135deg, #103463 0%, var(--primary-blue) 100%)"] > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
    }
    div[style*="background: linear-gradient(135deg, #103463 0%, var(--primary-blue) 100%)"] > div:first-child > div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    div[style*="background: linear-gradient(135deg, #103463 0%, var(--primary-blue) 100%)"] > div:nth-child(2) {
        order: 1 !important;
        margin-right: 0 !important;
        margin: 0 auto !important;
    }

    /* 8. Footer trên Mobile: Mang cột Danh mục (col 4) lên phía trên (hàng 1, cột phải) sát bên Logo/Giờ làm việc; Trụ sở HN & HCM trải đều 100% width bên dưới */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1.15fr 0.85fr !important;
        gap: 25px 20px !important;
    }
    .footer-grid > .footer-col:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .footer-grid > .footer-col:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding-left: 15px !important;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
    }
    .footer-grid > .footer-col:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: 20px !important;
    }
    .footer-grid > .footer-col:nth-child(3) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    /* ========================================================================== */
    /* 9. ABOUT PAGE - CÂU CHUYỆN CỦA CHÚNG TÔI (MOBILE OPTIMIZATION <= 768px)    */
    /* Layout 50-50 ngang: 50% trái hiện Text & Stats, 50% phải hiện Ảnh (bo góc) & Thẻ ISO */
    /* ========================================================================== */
    div[style*="display: flex; gap: 50px; align-items: center;"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
        align-items: center !important;
        padding: 25px 25px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* 50% BÊN TRÁI: Khối chữ & Cụm số liệu 2021, ISO (order: 1) */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:nth-child(2) {
        order: 1 !important;
        width: 50% !important;
        max-width: 50% !important;
        flex: 1 !important;
        text-align: left !important;
    }

    /* Tiêu đề H2 vừa vặn trong cột 50% bên trái */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:nth-child(2) h2 {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    /* Đoạn văn gọn gàng, sắc nét trong cột 50% */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:nth-child(2) p {
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    /* Cụm số liệu 2021 và ISO hiển thị bên trái dưới chữ, vừa vặn trong cột 50% */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:nth-child(2) > div[style*="display: flex"] {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        margin-top: 15px !important;
        margin-bottom: 0 !important;
    }
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:nth-child(2) > div[style*="display: flex"] > div > div:first-child {
        font-size: 1.45rem !important;
    }
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:nth-child(2) > div[style*="display: flex"] > div > div:last-child {
        font-size: 0.72rem !important;
    }

    /* 50% BÊN PHẢI: Khối hình ảnh bo góc & Thẻ Đạt chuẩn quốc tế (order: 2) */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child {
        order: 2 !important;
        width: 50% !important;
        max-width: 50% !important;
        flex: 1 !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Hình ảnh hiển thị có bo góc (border-radius: 16px) và chiều cao cân đối */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > img {
        width: 100% !important;
        min-height: 320px !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 16px !important;
        box-shadow: var(--shadow-md) !important;
    }

    /* Thẻ Đạt chuẩn quốc tế nằm gọn ở góc dưới phải của ảnh trong cột 50% */
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > div[style*="position: absolute"] {
        bottom: 10px !important;
        right: 8px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > div[style*="position: absolute"] i {
        font-size: 1.2rem !important;
    }
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > div[style*="position: absolute"] div > div:first-child {
        font-size: 0.65rem !important;
    }
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > div[style*="position: absolute"] div > div:last-child {
        font-size: 0.75rem !important;
    }

    /* ========================================================================== */
    /* 10. ABOUT PAGE - HÀNH TRÌNH PHÁT TRIỂN (TIMELINE MOBILE <= 768px)          */
    /* Ẩn thẻ <br> ngắt dòng gượng ép trong thẻ quote trên Mobile                 */
    /* ========================================================================== */
    div[style*="border-bottom: 3px solid"] p br {
        display: none !important;
    }

    /* ========================================================================== */
    /* 11. ABOUT PAGE - TẦM NHÌN & SỨ MỆNH (MOBILE OPTIMIZATION <= 768px)         */
    /* Sắp xếp 2 thẻ Tầm nhìn & Sứ mệnh theo bố cục dọc từ trên xuống dưới        */
    /* ========================================================================== */
    div.container[style*="display: flex; gap: 30px;"] {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Tinh chỉnh padding và bo góc thẻ Tầm nhìn / Sứ mệnh trên Mobile gọn gàng, đẹp mắt */
    div.container[style*="display: flex; gap: 30px;"] > div[style*="background: #f4f6f9"] {
        width: 100% !important;
        padding: 30px 25px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        flex: none !important;
    }

    /* Giảm kích thước watermark icon chìm trên Mobile để không chiếm quá nhiều khoảng không */
    div.container[style*="display: flex; gap: 30px;"] > div[style*="background: #f4f6f9"] > div:first-child {
        font-size: 140px !important;
        top: -15px !important;
        right: -15px !important;
    }

    /* Căn chỉnh icon và tiêu đề h3 trên Mobile */
    div.container[style*="display: flex; gap: 30px;"] > div[style*="background: #f4f6f9"] h3 {
        font-size: 1.6rem !important;
        margin-bottom: 15px !important;
    }

    div.container[style*="display: flex; gap: 30px;"] > div[style*="background: #f4f6f9"] p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    /* ========================================================================== */
    /* 12. ABOUT PAGE - BAN CỐ VẤN & CHUYÊN GIA ĐẦU NGÀNH (MOBILE <= 768px)       */
    /* Stack dọc Header, tiêu đề trên 1 dòng, thẻ chuyên gia dạng Carousel        */
    /* ========================================================================== */
    /* Stack dọc phần Header: Subtitle -> H2 -> Đoạn văn mô tả */
    div[style*="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 30px;"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 25px !important;
    }

    div[style*="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 30px;"] > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* 1) "ĐỘI NGŨ CỦA CHÚNG TÔI" làm to hơn */
    div[style*="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 30px;"] > div:first-child > div:first-child {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
    }

    /* 2) "Ban Cố Vấn & Chuyên Gia Đầu Ngành" hiển thị trên 1 dòng duy nhất (white-space: nowrap) */
    div[style*="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 30px;"] > div:first-child > h2 {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* 3) Dòng text "Invivo Lab hội tụ..." đặt ở dưới "Ban Cố Vấn...", gom gọn trong 2 dòng có độ dài cân đối */
    div[style*="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 30px;"] > div:last-child > p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-top: 5px !important;
        max-width: 100% !important;
    }

    div[style*="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 30px;"] > div:last-child > p .mobile-br {
        display: inline !important;
    }

    /* 4) Chuyển lưới 5 chuyên gia thành dạng Carousel ngang swipeable trên Mobile */
    div[style*="grid-template-columns: repeat(5, 1fr)"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 25px !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]::-webkit-scrollbar {
        display: none !important;
    }

    /* Điều chỉnh chiều ngang mỗi thẻ lên 52% (hiển thị 2 thẻ song song trên Mobile), tạo đủ không gian chiều ngang để các dòng chức danh dài không bị rớt dòng vụn */
    div[style*="grid-template-columns: repeat(5, 1fr)"] > div {
        flex: 0 0 52% !important;
        width: 52% !important;
        max-width: 52% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    }

    /* Đặt aspect-ratio 4/5 kết hợp object-fit: cover và object-position: top center để ảnh tràn mép thẻ trái-phải 100% không còn một chút nền xám thừa nào, đồng thời không bị xén đỉnh đầu chuyên gia */
    div[style*="grid-template-columns: repeat(5, 1fr)"] > div > img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        object-fit: cover !important;
        object-position: top center !important;
        background: #eaeef5 !important;
    }

    /* Tinh chỉnh padding vùng text trong thẻ gọn gàng */
    div[style*="grid-template-columns: repeat(5, 1fr)"] > div > div:last-child {
        padding: 15px 10px !important;
    }

    /* 1) Tên chuyên gia: 0.98rem, in đậm 600 */
    div[style*="grid-template-columns: repeat(5, 1fr)"] > div h4 {
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    /* 2) Chức vụ / vai trò (italic blue text): 0.82rem */
    div[style*="grid-template-columns: repeat(5, 1fr)"] > div div[style*="font-style: italic"] {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    /* 3) Đoạn tiểu sử / công tác: cỡ chữ 0.68rem, thu gọn khoảng cách chữ (-0.35px) để hạn chế tối đa rớt dòng ở các dòng "Nguyên trưởng Bộ môn..." */
    div[style*="grid-template-columns: repeat(5, 1fr)"] > div > div:last-child > div:last-child {
        font-size: 0.68rem !important;
        line-height: 1.45 !important;
        letter-spacing: -0.35px !important;
        word-spacing: -0.5px !important;
        color: #333333 !important;
    }

    /* ========================================================================== */
    /* 13. SERVICES PAGE - TẦM SOÁT CHỦ ĐỘNG, THEO BỆNH LÝ & UNG THƯ (MOBILE)       */
    /* Hiển thị thẻ dịch vụ nhỏ gọn dạng hình vuông (aspect-ratio: 1/1), lưới 5 thẻ/dòng */
    /* ========================================================================== */
    div[style*="grid-template-columns: repeat(5, 1fr)"]:has(> a) {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
        overflow-x: visible !important;
        margin-bottom: 40px !important;
    }

    div[style*="grid-template-columns: repeat(5, 1fr)"]:has(> a) > a {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-decoration: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    div[style*="grid-template-columns: repeat(5, 1fr)"]:has(> a) > a > div {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        padding: 6px 3px !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Icon + shape + text dịch vụ: tăng kích thước shape (38px), icon (1.2rem) và text (0.68rem bold) để hiển thị rõ ràng và nổi bật hơn */
    div[style*="grid-template-columns: repeat(5, 1fr)"]:has(> a) > a > div > div:first-child {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }

    div[style*="grid-template-columns: repeat(5, 1fr)"]:has(> a) > a > div > div:first-child i {
        font-size: 1.2rem !important;
    }

    /* Tiêu đề H4 dịch vụ: cỡ chữ 0.68rem in đậm, rõ ràng và cân đối */
    div[style*="grid-template-columns: repeat(5, 1fr)"]:has(> a) > a > div h4 {
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        line-height: 1.22 !important;
        letter-spacing: -0.25px !important;
        color: var(--text-main) !important;
        text-align: center !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* ========================================================================== */
    /* 14. SERVICES PAGE - SECTION iNIPT (MOBILE OPTIMIZATION <= 768px)          */
    /* - Sàng lọc trước sinh iNIPT hiển thị trên 1 dòng                          */
    /* - Hiểu con từ tuần thai thứ 9 - ... hiển thị trên 1 dòng                  */
    /* - Đoạn text Xét nghiệm iNIPT ... dàn dài ra tối đa chiều ngang             */
    /* ========================================================================== */
    .inipt-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .inipt-title {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
        white-space: nowrap !important;
        letter-spacing: -0.8px !important;
    }

    .inipt-subtitle {
        font-size: clamp(0.72rem, 3.6vw, 0.95rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
        white-space: nowrap !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
    }

    .inipt-desc {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
        margin-bottom: 22px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    /* ========================================================================== */
    /* 15. PARTNERSHIP PAGE - HERO SECTION OPTIMIZATION (MOBILE <= 768px)         */
    /* - Tag HỢP TÁC CHIẾN LƯỢC ở trên cùng                                       */
    /* - Title Gắn kết cộng đồng... kéo dài ra và hiển thị trong 2 dòng            */
    /* - 50% bên trái (text + 2 button bằng nhau) + 50% bên phải (hình ảnh)       */
    /* ========================================================================== */
    /* Tăng kích thước Tag và Title trên Mobile */
    .partnership-hero-tag {
        font-size: 0.88rem !important;
        padding: 8px 18px !important;
        margin-bottom: 16px !important;
    }

    .partnership-hero-title {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        margin-bottom: 15px !important;
        letter-spacing: -0.6px !important;
    }

    /* Giảm khoảng cách giữa text và hình ảnh (khoảng cách đang quá xa) */
    .partnership-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .partnership-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .partnership-left p {
        margin-bottom: 10px !important;
    }

    /* Bo góc hình mịn màng (28px) và khử hoàn toàn shape trắng */
    .partnership-right {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 28px !important;
        -webkit-border-radius: 28px !important;
        overflow: hidden !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Đảm bảo hình ảnh Hero trên mọi thiết bị di động không bị cắt hình (dùng aspect-ratio 16/10 thay vì fixed height) */
    .partnership-right img,
    .partnership-right > div {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 28px !important;
        -webkit-border-radius: 28px !important;
        display: block !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07) !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ẩn buttons trong cột trái, hiển thị buttons phía dưới hình ảnh */
    .partnership-buttons-desktop {
        display: none !important;
    }

    .partnership-buttons-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    /* Chiều ngang của button sẽ bằng tấm hình (width: 100%) */
    .partnership-buttons-mobile > a {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.95rem !important;
        padding: 14px 20px !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    /* ========================================================================== */
    /* 16. PARTNERSHIP PAGE - PHILOSOPHY SECTION (TRIẾT LÝ CỦA CHÚNG TÔI)         */
    /* - "Phục vụ bằng cả trái tim" làm cho to lên                                */
    /* - 4 thẻ hiển thị dạng hình vuông, để trong 2 dòng (mỗi dòng 2 thẻ)        */
    /* ========================================================================== */
    .partnership-philosophy-quote {
        font-size: 1.38rem !important;
        font-weight: 700 !important;
        margin-bottom: 28px !important;
        line-height: 1.4 !important;
    }

    .partnership-philosophy-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .partnership-philosophy-grid > div {
        aspect-ratio: 1 / 1 !important;
        padding: 16px 10px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .partnership-philosophy-grid > div > div:first-child {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.45rem !important;
        margin-bottom: 12px !important;
    }

    .partnership-philosophy-grid > div h3 {
        font-size: 1.65rem !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
        line-height: 1.15 !important;
    }

    .partnership-philosophy-grid > div p {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    /* ========================================================================== */
    /* 17. PARTNERSHIP PAGE - BENEFITS SECTION (ĐẶC QUYỀN DÀNH CHO ĐỐI TÁC)       */
    /* - 6 thẻ làm dạng vuông và hiển thị ở dạng lưới 2x3 (2 cột, 3 dòng)        */
    /* ========================================================================== */
    .partnership-benefits-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .partnership-benefits-grid > div {
        aspect-ratio: 1 / 1 !important;
        padding: 16px 12px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
        border-left: none !important;
        border-top: 3px solid var(--primary-blue) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
    }

    .partnership-benefits-grid > div i {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }

    .partnership-benefits-grid > div h3 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        line-height: 1.25 !important;
        color: #0d264c !important;
    }

    .partnership-benefits-grid > div p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        color: var(--text-muted) !important;
    }

    /* ========================================================================== */
    /* 18. PARTNERSHIP PAGE - BOTTOM CTA SECTION (SẴN SÀNG NÂNG TẦM DỊCH VỤ)        */
    /* - Đảm bảo 2 button hiển thị trên 1 dòng text duy nhất trên mọi điện thoại  */
    /* ========================================================================== */
    #partner-form > .container > div {
        padding: 40px 20px !important;
        border-radius: 16px !important;
    }

    .partnership-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .partnership-cta-buttons > a {
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 0.98rem !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 12px !important;
    }

    /* ========================================================================== */
    /* 19. NEWS PAGE - FILTER TABS (TRANG TIN TỨC - BỘ LỌC DANH MỤC)             */
    /* - Hiển thị ĐẦY ĐỦ các thẻ filter trên màn hình (lưới 3 cột x 5-6 dòng)     */
    /* ========================================================================== */
    #filter-container > div,
    #filter-container div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
        gap: 8px !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
        margin-bottom: 30px !important;
        width: 100% !important;
    }

    #filter-container > div > a,
    #filter-container div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] > a {
        padding: 8px 6px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-height: 40px !important;
        line-height: 1.25 !important;
    }

    /* ========================================================================== */
    /* 20. NEWS PAGE - NEWS CARDS GRID (TRANG TIN TỨC - THẺ VUÔNG ASPECT RATIO 1:1) */
    /* ========================================================================== */
    #news-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 14px !important;
        margin-bottom: 35px !important;
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #news-grid-container > div {
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
        background: white !important;
        box-sizing: border-box !important;
    }

    #news-grid-container > div img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
    }

    /* Padding bên trong khối nội dung thẻ tin tức vuông */
    #news-grid-container > div > div:last-child {
        padding: 14px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        box-sizing: border-box !important;
    }

    /* Category & Date */
    #news-grid-container > div > div:last-child > div:first-child {
        font-size: 0.72rem !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Tiêu đề bài viết H4: Cỡ chữ 0.98rem */
    #news-grid-container > div h4 {
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Đoạn tóm tắt (excerpt) */
    #news-grid-container > div p {
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        flex-grow: 1 !important;
    }

    /* Nút "Đọc tiếp" */
    #news-grid-container > div > div:last-child > a {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        margin-top: auto !important;
    }

    /* ========================================================================== */
    /* 21. NEWS PAGE - PAGINATION CONTAINER (TRANG TIN TỨC - PHÂN TRANG)         */
    /* - Hiển thị phân trang gọn gàng tối đa 1-2 hàng, không bị bóp méo số trang  */
    /* ========================================================================== */
    #pagination-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 40px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    #pagination-container > a,
    #pagination-container > span {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    /* ========================================================================== */
    /* 22. CAREERS PAGE - WHY CHOOSE US BENEFITS (TRANG TUYỂN DỤNG - 4 THẺ LỢI ÍCH) */
    /* - Hiển thị 4 thẻ ở dạng lưới 2x2, mỗi thẻ hình vuông (aspect-ratio: 1/1)    */
    /* ========================================================================== */
    div.careers-benefits-grid,
    div.careers-benefits-grid[style],
    div.careers-benefits-grid[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    div.careers-benefits-grid > div,
    div.careers-benefits-grid[style] > div {
        aspect-ratio: auto !important;
        min-height: 160px !important;
        padding: 18px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Icon circular badge: tăng kích thước lên 58pxx58px và font chữ icon 1.6rem nổi bật hơn trên mobile */
    div.careers-benefits-grid > div > div:first-child,
    div.careers-benefits-grid[style] > div > div:first-child {
        width: 58px !important;
        height: 58px !important;
        font-size: 1.6rem !important;
        margin: 0 auto 10px !important;
        flex-shrink: 0 !important;
    }

    /* Tiêu đề H4: cỡ chữ 0.88rem in đậm, rõ ràng */
    div.careers-benefits-grid > div h4,
    div.careers-benefits-grid[style] > div h4 {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Đoạn mô tả P: cỡ chữ 0.67rem, tối đa 3 dòng gọn gàng */
    div.careers-benefits-grid > div p,
    div.careers-benefits-grid[style] > div p {
        font-size: 0.67rem !important;
        line-height: 1.28 !important;
        margin: 0 !important;
        color: var(--text-muted) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ========================================================================== */
    /* 23. CAREERS PAGE - JOB POSITIONS 70/30 SPLIT (TRANG TUYỂN DỤNG - VỊ TRÍ 70/30) */
    /* - 70% bên trái hiện text và icon, 30% bên phải 2 button đặt trên dưới      */
    /* ========================================================================== */
    #positions > div > div > div {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 18px 14px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* 70% bên trái: Text và Icon */
    #positions > div > div > div > div:first-child {
        width: 67% !important;
        max-width: 67% !important;
        flex: 0 0 67% !important;
        box-sizing: border-box !important;
        padding-right: 6px !important;
    }

    #positions > div > div > div > div:first-child h3 {
        font-size: 0.98rem !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    #positions > div > div > div > div:first-child > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        font-size: 0.72rem !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    #positions > div > div > div > div:first-child p {
        font-size: 0.76rem !important;
        line-height: 1.38 !important;
        margin-bottom: 0 !important;
        color: var(--text-muted) !important;
    }

    /* 30% bên phải: 2 button đặt trên dưới (vertical stacking) */
    #positions > div > div > div > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        width: 30% !important;
        max-width: 30% !important;
        flex: 0 0 30% !important;
        gap: 8px !important;
        align-items: stretch !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #positions > div > div > div > div:last-child > a {
        width: 100% !important;
        padding: 8px 4px !important;
        font-size: 0.71rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 6px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 36px !important;
        box-sizing: border-box !important;
    }

    /* ========================================================================== */
    /* 24. CAREERS PAGE - APPLICATION PROCESS (TRANG TUYỂN DỤNG - QUY TRÌNH 3 BƯỚC) */
    /* - Thêm line mảnh dọc và mũi tên chỉ xuống giữa các bước trên Mobile       */
    /* ========================================================================== */
    .careers-process-line {
        display: none !important; /* Ẩn đường ngang PC trên Mobile */
    }

    .careers-process-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        position: relative !important;
    }

    .careers-process-grid > div {
        position: relative !important;
        padding: 10px 15px 32px !important;
        background: transparent !important;
    }

    /* Line mảnh dọc nối giữa các bước (bước 1->2 và bước 2->3) */
    .careers-process-grid > div:not(:last-child)::before {
        content: "" !important;
        position: absolute !important;
        bottom: 4px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 24px !important;
        background: var(--primary-blue) !important;
        opacity: 0.35 !important;
        z-index: 1 !important;
    }

    /* Mũi tên chỉ xuống (chevron arrow) ở đầu dưới của line mảnh */
    .careers-process-grid > div:not(:last-child)::after {
        content: "" !important;
        position: absolute !important;
        bottom: 3px !important;
        left: 50% !important;
        transform: translateX(-50%) rotate(45deg) !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid var(--primary-blue) !important;
        border-bottom: 2px solid var(--primary-blue) !important;
        z-index: 2 !important;
    }

    .careers-process-grid > div h4 {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    .careers-process-grid > div p {
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        color: var(--text-muted) !important;
    }

    /* ========================================================================== */
    /* 25. CONTACT PAGE - HERO OPERATING HOURS BADGES (TRANG LIÊN HỆ - THẺ GIỜ HÀNH CHÍNH) */
    /* - 2 thẻ thời gian hoạt động cố định trong 2 dòng (dòng trên icon + ngày, dòng dưới giờ) */
    /* ========================================================================== */
    .contact-hero-badges-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .contact-hero-badge {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 18px !important;
        border-radius: 16px !important;
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        min-width: 155px !important;
    }

    /* Trên Mobile ẩn dấu hai chấm ": " để tách thành 2 dòng hoàn hảo */
    .contact-hero-badge .badge-separator {
        display: none !important;
    }

    .contact-hero-badge > span:first-child {
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 3px !important;
        white-space: nowrap !important;
    }

    .contact-hero-badge > span:last-child {
        font-weight: 700 !important;
        font-size: 0.92rem !important;
        white-space: nowrap !important;
    }

    /* ========================================================================== */
    /* 26. CONTACT PAGE - CONTACT BOX CARDS (TRANG LIÊN HỆ - 2 THẺ LỚN XẾP DỌC)   */
    /* - Hiển thị 2 thẻ lớn lần lượt từ trên xuống dưới, bắt đầu từ thẻ bên trái */
    /* ========================================================================== */
    .contact-box-grid {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc từ trên xuống dưới */
        gap: 25px !important;
        width: 100% !important;
    }

    /* Thẻ bên trái (Thông tin liên lạc): hiển thị trên cùng (order: 1) */
    .contact-box-grid > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        order: 1 !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }

    /* Thẻ bên phải (Gửi yêu cầu tư vấn): hiển thị phía dưới (order: 2) */
    .contact-box-grid > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        order: 2 !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }

    /* Đảm bảo các hàng input trong form xếp dọc trên màn hình điện thoại nhỏ */
    .contact-box-grid > div:last-child form > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* ========================================================================== */
    /* 27. CONTACT PAGE - LAB MAP BADGES (TRANG LIÊN HỆ - THẺ TRỤ SỞ & CHI NHÁNH) */
    /* - Đảm bảo thẻ "TRỤ SỞ HÀ NỘI" và "CHI NHÁNH HỒ CHÍ MINH" luôn hiện 1 dòng  */
    /* ========================================================================== */
    .lab-map-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
    }

    .lab-map-badge {
        white-space: nowrap !important;
        max-width: 92% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.76rem !important;
        padding: 6px 14px !important;
        left: 15px !important;
        bottom: 15px !important;
        box-sizing: border-box !important;
    }

    /* ========================================================================== */
    /* 28. BOOKING PAGE - HERO SECTION (TRANG ĐẶT LỊCH - GIỮ LAYOUT MỌI ĐIỆN THOẠI) */
    /* - Giữ layout 2 cột ngang (Ảnh bên trái, Chữ bên phải) trên tất cả điện thoại */
    /* ========================================================================== */
    .booking-hero-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 10px 0 !important;
        box-sizing: border-box !important;
    }

    /* Khối Chữ (Dịch vụ trực tuyến + Đặt lịch...): hiển thị bên phải (order: 2, 55% chiều rộng) */
    .booking-hero-container > div:first-child {
        order: 2 !important;
        width: 55% !important;
        max-width: 55% !important;
        flex: 0 0 55% !important;
        text-align: left !important;
    }

    .booking-hero-container > div:first-child h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .booking-hero-container > div:first-child p {
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        display: block !important;
    }

    /* Khối Ảnh (banner booking-hero.jpg): hiển thị bên trái (order: 1, 45% chiều rộng) */
    .booking-hero-container > div:last-child {
        order: 1 !important;
        width: 45% !important;
        max-width: 45% !important;
        flex: 0 0 45% !important;
    }

    .booking-hero-container > div:last-child img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-sm) !important;
    }

    /* ========================================================================== */
    /* 29. BOOKING PAGE - CONTENT CARDS (TRANG ĐẶT LỊCH - CÁC THẺ NỘI DUNG XẾP DỌC) */
    /* - Hiển thị từng thẻ từ trên xuống dưới, bắt đầu từ thẻ bên trái (form)    */
    /* ========================================================================== */
    .booking-content-grid {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc từ trên xuống dưới */
        gap: 25px !important;
        width: 100% !important;
    }

    /* Thẻ bên trái (Form Thông tin đăng ký): hiển thị trên cùng (order: 1) */
    .booking-content-grid > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        order: 1 !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }

    /* Thẻ bên phải (Tại sao nên đặt lịch & Hỗ trợ): hiển thị phía dưới (order: 2) */
    .booking-content-grid > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        order: 2 !important;
        box-sizing: border-box !important;
    }

    /* Đảm bảo các hàng input song song trong form đặt lịch xếp dọc trên Mobile */
    .booking-content-grid > div:first-child form > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    /* Khóa 3 thẻ ISO (Chất lượng kết quả, Quy trình nghiêm ngặt, Tin cậy tuyệt đối) hiện trên 1 dòng duy nhất không xuống dòng */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] > div {
        flex-direction: column !important;
        gap: 3px !important;
        padding: 7px 2px !important;
        font-size: 0.65rem !important;
        text-align: center !important;
        flex: 1 1 33.33% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        letter-spacing: -0.3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] > div div {
        white-space: nowrap !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
    }

    /* Đảm bảo tiêu đề ISO vừa vặn trên 1 dòng ở màn hình điện thoại nhỏ */
    div[style*="display: flex; align-items: center; gap: 60px;"] h2 {
        font-size: 1.15rem !important;
    }
}


/* =========================================
   Tra cứu kết quả - Dropdown Menu (Desktop & Mobile)
   ========================================= */
.tracuu-dropdown {
    position: relative;
    display: inline-block;
}
.tracuu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tracuu-btn i {
    font-size: 0.75em;
    transition: transform 0.25s ease;
}
.tracuu-dropdown.open .tracuu-btn i {
    transform: rotate(180deg);
}
.tracuu-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    min-width: 170px;
    z-index: 99999;
    padding: 8px;
    flex-direction: column;
    gap: 6px;
}
.tracuu-dropdown.open .tracuu-menu {
    display: flex;
    animation: tracuuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tracuuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tracuu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-blue, #1d4ed8);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.tracuu-item:hover {
    background: var(--primary-blue, #1d4ed8);
    color: #ffffff !important;
    border-color: var(--primary-blue, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.2);
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    .mobile-menu-actions .tracuu-dropdown {
        display: block;
        width: 100%;
    }
    .mobile-menu-actions .tracuu-btn {
        width: 100%;
    }
    .mobile-menu-actions .tracuu-menu {
        position: static;
        width: 100%;
        margin-top: 6px;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
    }
    .mobile-menu-actions .tracuu-item {
        background: #ffffff;
    }
}

/* ========================================================================== */
/* 30. CAPACITY DOSSIER PAGE (TRANG HỒ SƠ NĂNG LỰC - TĂNG DIỆN TÍCH HIỂN THỊ) */
/* - Tăng chiều cao (82vh) và chiều rộng (98%) để HSNL chiếm phần lớn màn hình */
/* ========================================================================== */
.profile-book-wrapper {
    width: 98% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

#df_manual_book,
._df_book,
.df-container {
    width: 100% !important;
    height: 82vh !important;
    min-height: 750px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    #df_manual_book,
    ._df_book,
    .df-container {
        height: 80vh !important;
        min-height: 580px !important;
    }
    .profile-book-wrapper {
        width: 100% !important;
        padding: 0 5px !important;
    }

    /* ========================================================================== */
    /* 32. ISO 15189 PAGE - BENEFITS CARDS (TRANG ISO 15189 - LỢI ÍCH XẾP DỌC)      */
    /* - Hiển thị từng thẻ từ trên xuống dưới: Người bệnh ở trên, Y tế ở dưới     */
    /* ========================================================================== */
    .iso-benefits-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Chuyển từ 2 cột ngang sang 1 cột xếp dọc */
        gap: 25px !important;
        width: 100% !important;
    }

    /* Thẻ đầu tiên (Đối với Người bệnh): hiển thị trên cùng (order: 1) */
    .iso-benefits-grid > div:first-child {
        order: 1 !important;
        width: 100% !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }

    /* Thẻ thứ hai (Đối với Y tế & Bác sĩ): hiển thị phía dưới (order: 2) */
    .iso-benefits-grid > div:last-child {
        order: 2 !important;
        width: 100% !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }
}

/* ========================================================================== */
/* 31. ISO 15189 PAGE (TRANG ISO 15189 - SECTION ISO 15189:2022 LÀ GÌ?)          */
/* - Bố cục dọc từ trên xuống dưới: Tiêu đề 1 dòng -> Ảnh lớn -> Text -> Thẻ  */
/* ========================================================================== */
.iso-what-section-container {
    max-width: 950px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.iso-what-title {
    white-space: nowrap !important;
    font-size: clamp(1.4rem, 4.5vw, 2.2rem) !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.iso-what-image-wrapper {
    width: 100% !important;
    margin-bottom: 35px !important;
    background: #ffffff !important;
    padding: 12px !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lg) !important;
    box-sizing: border-box !important;
}

.iso-what-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

.iso-what-text-wrapper {
    width: 100% !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.iso-what-quote-card {
    width: 100% !important;
    background: #ffffff !important;
    border-left: 5px solid var(--accent-red, #ef4444) !important;
    padding: 25px 30px !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: var(--shadow-sm) !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   33. iNIPT HERO CAROUSEL CROP & HEIGHT FIX (REQUEST #10 & #11)
   Ensure carousel images crop from center and increase display height.
   ========================================================================== */
#hero-slides {
    height: clamp(460px, 125vw, 640px) !important;
}
@media (min-width: 1024px) {
    #hero-slides-desktop {
        height: 620px !important;
    }
}
#hero-slides img,
#hero-slides-desktop img {
    object-position: center center !important;
}

/* ==========================================================================
   34. HOMEPAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG CHỦ TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi kích thước màn hình mobile (320px - 768px)
   - Khóa tỷ lệ, khoảng cách, grid và loại bỏ tuyệt đối lỗi tràn viền ngang
   ========================================================================== */
@media (max-width: 768px) {
    /* Khóa tổng thể Trang chủ: không tràn viền ngang trên bất kỳ thiết bị nào */
    body, html, .hero-section, section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 1. Hero Section Trang chủ: Giao diện 1 cột xếp thứ tự Title -> Hình ảnh -> Text -> Buttons cho Mobile */
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-left {
        display: contents !important;
    }
    .hero-badge {
        order: 1 !important;
        margin-bottom: 4px !important;
        font-size: 0.75rem !important;
        padding: 5px 14px !important;
        border-radius: 20px !important;
        width: fit-content !important;
    }
    .hero-title {
        order: 2 !important;
        font-size: 1.85rem !important;
        margin-bottom: 8px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-right {
        order: 3 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        margin-bottom: 25px !important;
        position: relative !important;
    }
    .hero-img-wrapper { 
        height: 220px !important; 
        width: 100% !important; 
        padding: 6px !important; 
        margin: 0 !important;
        border-radius: 16px !important; 
        box-shadow: var(--shadow-md) !important; 
    }
    .hero-floating-card {
        padding: 8px 15px !important;
        bottom: -15px !important;
        left: auto !important;
        right: 15px !important;
        margin: 0 !important;
        width: max-content !important;
        gap: 10px !important;
        transform: scale(0.88) !important;
        transform-origin: bottom right !important;
        z-index: 10 !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
    }
    .hero-desc {
        order: 4 !important;
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
        line-height: 1.55 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-buttons { 
        order: 5 !important;
        gap: 10px !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .hero-buttons .btn { 
        padding: 11px 14px !important; 
        font-size: 0.82rem !important; 
        font-weight: 600 !important;
        justify-content: center !important; 
        text-align: center !important;
        white-space: nowrap !important;
        flex: 1 1 50% !important;
        min-width: 0 !important;
        border-radius: 8px !important;
    }
    .hero-buttons .btn i {
        display: inline-block !important;
        margin-left: 5px !important;
        font-size: 0.85em !important;
    }
    .hero-buttons { 
        gap: 4px !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .hero-buttons .btn { 
        padding: 5px 4px !important; 
        font-size: 0.58rem !important; 
        justify-content: center !important; 
        text-align: center !important;
        white-space: nowrap !important;
        flex: 1 1 50% !important;
        min-width: 0 !important;
    }
    .hero-buttons .btn i {
        display: none !important;
    }
    .hero-floating-card {
        position: absolute !important;
        bottom: -6px !important;
        right: 0px !important;
        left: auto !important;
        margin: 0 !important;
        transform: scale(0.62) !important;
        transform-origin: bottom right !important;
        width: max-content !important;
        z-index: 10 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
        background: white !important;
        padding: 6px 10px !important;
    }

    /* 2. Lưới con số thống kê (Stats Grid 2x2) */
    .stats-grid,
    div[style*="grid-template-columns: repeat(4, 1fr)"]:has(h3):not(.about-equipment-grid) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 15px !important;
    }

    /* 3. Tại sao chọn Invivo Lab (Why Choose Invivo Lab cards) */
    .why-choose-grid > div,
    section[style*="background-color: var(--bg-light)"] .container > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Năng lực xét nghiệm (Testing Capabilities 2x2 grid) */
    .testing-capabilities-grid,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 12px !important;
    }
    /* Scale down các thẻ Năng lực xét nghiệm: Giảm chiều cao thẻ và giảm size chữ (h3 & p) để thẻ thoáng đẹp, chữ gọn gàng */
    .testing-capabilities-grid > div,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        height: 175px !important;
    }
    .testing-capabilities-grid > div h3,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) > div h3 {
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
        margin-bottom: 5px !important;
    }
    .testing-capabilities-grid > div p,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) > div p {
        font-size: 0.65rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }
    .testing-capabilities-grid > div > div:last-child,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) > div > div:last-child {
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
    }

    /* 4b. Removed forcing 5-column grid into 2 columns */

    /* 5. Tin tức & Sức khỏe (News & Health cards) */
    .home-news-grid > div,
    #home-news-container > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 6. Chứng nhận ISO 15189:2022 (ISO Section) */
    #iso-section,
    #iso-section .container,
    #iso-section div[style*="background: white"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #iso-section img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 7. Khóa 3 thẻ ISO (Chất lượng kết quả - Quy trình nghiêm ngặt - Tin cậy tuyệt đối) trên 1 dòng ngang không bao giờ bị xuống dòng */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] > div {
        flex: 1 1 33.33% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        font-size: 0.64rem !important;
        padding: 7px 2px !important;
        gap: 3px !important;
        letter-spacing: -0.3px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] > div div {
        white-space: nowrap !important;
        font-size: 0.64rem !important;
        font-weight: 600 !important;
    }

    /* 8. Khóa Header Năng lực xét nghiệm trên Mobile: Chuyển tiêu đề thành 1 cột dọc và 2 nút hiện trên 1 dòng ngang */
    @media (max-width: 768px) {
        section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 15px !important;
            width: 100% !important;
        }
        section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child > div:last-child {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 8px !important;
            width: 100% !important;
            justify-content: flex-start !important;
        }
        section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child > div:last-child a.btn {
            white-space: nowrap !important;
            font-size: 0.65rem !important;
            padding: 6px 12px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            max-width: none !important;
        }
    }

    /* 9. Khóa các Nút trên Trang chủ không bị rớt chữ hoặc xuống dòng */
    .hero-buttons a.btn,
    #iso-section a.btn.desktop-iso-btn,
    section:has(a[href*="ho-so-nang-luc"]) a.btn,
    .why-choose-grid a.btn,
    #cta-section a.btn,
    .cta-section a.btn {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 10. Reorder About Page Hero Section (Title -> Text -> Image -> Highlights) */
    /* 10. Reorder About Page Hero Section (Title -> Text -> Image -> Highlights) */
    .about-hero-container,
    .about-story-container {
        flex-direction: column !important;
    }
    .about-hero-text,
    .about-story-text-col {
        display: contents !important;
    }
    .about-hero-title,
    .about-story-title,
    .about-story-text-col > div:first-child,
    .about-story-text-col > h2 { 
        order: 1 !important; 
        width: 100% !important;
    }
    .about-hero-desc,
    .about-story-desc,
    .about-story-text-col > p { 
        order: 2 !important; 
        width: 100% !important;
        display: block !important;
    }
    .about-hero-image,
    .about-story-img-col { 
        order: 3 !important; 
        margin: 20px 0 !important; 
        width: 100% !important;
        display: block !important;
    }
    .about-hero-highlights,
    .about-story-stats-row { 
        order: 4 !important; 
        width: 100% !important;
    }

    /* 11. Partnership Hero Mobile Buttons */
    .partnership-buttons-desktop {
        display: none !important;
    }
    .partnership-buttons-mobile {
        display: flex !important;
    }

    /* 12. Services Package Cards 2-column grid and size lock */
    .services-grid,
    div[style*="grid-template-columns: repeat(4"]:not(.experts-grid),
    div[style*="grid-template-columns: repeat(5"]:not(.experts-grid),
    div[style*="grid-template-columns: repeat(6"]:not(.experts-grid) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .services-grid > a > div,
    div[style*="grid-template-columns: repeat(4"]:not(.experts-grid) > a > div,
    div[style*="grid-template-columns: repeat(5"]:not(.experts-grid) > a > div,
    div[style*="grid-template-columns: repeat(6"]:not(.experts-grid) > a > div {
        padding: 25px 12px 18px 12px !important;
        border-radius: 16px !important;
        min-height: 140px !important;
    }
    .services-grid > a > div > div:first-child,
    div[style*="grid-template-columns: repeat(4"]:not(.experts-grid) > a > div > div:first-child,
    div[style*="grid-template-columns: repeat(5"]:not(.experts-grid) > a > div > div:first-child,
    div[style*="grid-template-columns: repeat(6"]:not(.experts-grid) > a > div > div:first-child {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        margin: 0 0 12px 0 !important;
    }
    .services-grid > a > div > div:first-child > i,
    .services-grid > a > div > div:first-child > svg,
    .services-grid > a > div > div:first-child > img,
    div[style*="grid-template-columns: repeat(4"]:not(.experts-grid) > a > div > div:first-child > i,
    div[style*="grid-template-columns: repeat(5"]:not(.experts-grid) > a > div > div:first-child > i,
    div[style*="grid-template-columns: repeat(6"]:not(.experts-grid) > a > div > div:first-child > i {
        font-size: 1.35rem !important;
        transform: scale(1) !important;
    }
    .services-grid > a > div > div:last-child,
    div[style*="grid-template-columns: repeat(4"]:not(.experts-grid) > a > div > div:last-child,
    div[style*="grid-template-columns: repeat(5"]:not(.experts-grid) > a > div > div:last-child,
    div[style*="grid-template-columns: repeat(6"]:not(.experts-grid) > a > div > div:last-child {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
    }
}

/* ==========================================================================
   35. CTA, HEADER/MOBILE NAV & FOOTER MOBILE LAYOUT LOCK
   (KHÓA BỐ CỤC CTA, HEADER, MENU MOBILE & FOOTER TRÊN MỌI DÒNG ĐIỆN THOẠI)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. CTA Banner Section Lock */
    #cta-section, .cta-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #cta-section .container,
    .cta-section .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    #cta-section div[style*="background"],
    .cta-section div[style*="background"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Header & Mobile Menu Modal Lock */
    header, .navbar {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    #mobile-menu, .mobile-menu, .mobile-nav-modal {
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* 3. Footer Mobile Layout Lock (Khóa 2 cột trên cùng + 2 hàng 100% width bên dưới) */
    footer, .footer {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .footer-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
        gap: 25px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .footer-grid > .footer-col {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    .footer-grid > .footer-col:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .footer-grid > .footer-col:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding-left: 15px !important;
        border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    .footer-grid > .footer-col:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding-top: 20px !important;
    }
    .footer-grid > .footer-col:nth-child(3) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}

/* ==========================================================================
   36. ABOUT PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG GIỚI THIỆU TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa tỷ lệ 50-50 Câu chuyện của chúng tôi, lưới 2 cột Đội ngũ Bác sĩ, thẻ Tầm nhìn - Sứ mệnh - Trang thiết bị
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. About Hero Section Lock */
    .about-hero, section:has(h1:contains("Về chúng tôi")) {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Câu Chuyện Của Chúng Tôi (Our Story 50-50 side-by-side Lock) */
    div[style*="display: flex; gap: 50px; align-items: center;"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 3. Hành Trình Phát Triển (Timeline Cards Lock) */
    .timeline-item, .timeline-card,
    div[style*="border-radius:"]:has(h4:contains("Sự Ra Đời")),
    div[style*="border-radius:"]:has(h4:contains("Chứng Chỉ")) {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* 4. Tầm Nhìn & Sứ Mệnh (Vision & Mission 100% width Cards Lock) */
    .vision-mission-grid > div,
    div[style*="background"]:has(h3:contains("Tầm nhìn")),
    div[style*="background"]:has(h3:contains("Sứ mệnh")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Đội Ngũ Bác Sĩ & Chuyên Gia (Team Doctors 2-Column Grid Lock) */
    .team-grid,
    div[style*="grid-template-columns"]:has(h4:contains("PGS. TS. BS.")) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .team-grid > div,
    div[style*="grid-template-columns"]:has(h4:contains("PGS. TS. BS.")) > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    div[style*="grid-template-columns"]:has(h4:contains("PGS. TS. BS.")) img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 6. Hệ Thống Trang Thiết Bị Tối Tân (Equipment 100% width Cards Lock) */
    .equipment-grid > div,
    div[style*="background"]:has(h4:contains("Hệ thống")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 7. Đối Tác Chiến Lược (Strategic Partners Lock) */
    .partners-grid,
    div:has(h3:contains("ĐỐI TÁC CHIẾN LƯỢC")) {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   37. SERVICES PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG DỊCH VỤ TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Tại sao nên tầm soát, lưới icon Đối tượng/Bệnh lý/Ung thư, thẻ thiết bị & iNIPT
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Services Hero Section Lock */
    section:has(h1:contains("Dịch vụ xét nghiệm y khoa")) {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Tại Sao Nên Tầm Soát Bệnh Thường Xuyên (Why Regular Screening Lock) */
    section:has(h2:contains("Tại sao nên tầm soát")) img,
    section:has(h2:contains("Tại sao nên tầm soát")) > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    section:has(h2:contains("Tại sao nên tầm soát")) div[style*="background"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Lưới Icon Tầm Soát Bệnh (Target / Disease / Cancer Categories Lock) */
    div[style*="display: flex; flex-wrap: wrap"]:has(div[style*="border-radius"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div[style*="display: flex; flex-wrap: wrap"] > div[style*="border-radius"] {
        max-width: 48% !important;
        box-sizing: border-box !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* 4. Thẻ Trang Bị Hệ Thống Máy Xét Nghiệm Hiện Đại (Equipment Card & Button 1-Line Lock) */
    div[style*="background"]:has(h3:contains("Trang bị hệ thống máy")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    div[style*="background"]:has(h3:contains("Trang bị hệ thống máy")) a,
    div[style*="background"]:has(h3:contains("Trang bị hệ thống máy")) button {
        white-space: nowrap !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5. Sàng Lọc Trước Sinh iNIPT (iNIPT Section Lock) */
    section:has(h2:contains("iNIPT")),
    div:has(h2:contains("iNIPT")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    div:has(h2:contains("iNIPT")) a,
    div:has(h2:contains("iNIPT")) button {
        white-space: nowrap !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    div:has(h2:contains("iNIPT")) img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   38. PARTNERS PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG HỢP TÁC TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, lưới 2x2 Triết lý/Con số, lưới 2 cột Đặc quyền đối tác & CTA cuối trang
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Partners Hero Section Lock */
    section:has(h1:contains("Gắn kết cộng đồng")) {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    section:has(h1:contains("Gắn kết cộng đồng")) img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 2. Triết Lý Của Chúng Tôi (Philosophy & Stats 2x2 Grid Lock) */
    div[style*="grid-template-columns"]:has(h3:contains("400k+")),
    div[style*="grid-template-columns"]:has(div:contains("1400+")),
    section:has(h2:contains("Triết lý của chúng tôi")) div[style*="grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Đặc Quyền Dành Cho Đối Tác (Partner Privileges 2-Column Grid Lock) */
    .privileges-grid,
    div[style*="grid-template-columns"]:has(h4:contains("Độ chính xác cao")),
    section:has(h2:contains("Đặc quyền dành cho đối tác")) div[style*="grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div[style*="grid-template-columns"]:has(h4:contains("Độ chính xác cao")) > div,
    section:has(h2:contains("Đặc quyền dành cho đối tác")) div[style*="grid"] > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    /* 4. Thẻ CTA Cuối Trang Hợp Tác (Bottom CTA Box Lock) */
    div[style*="background"]:has(h2:contains("Sẵn sàng nâng tầm")),
    div[style*="background"]:has(h3:contains("Sẵn sàng nâng tầm")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    div[style*="background"]:has(h2:contains("Sẵn sàng nâng tầm")) a,
    div[style*="background"]:has(h2:contains("Sẵn sàng nâng tầm")) button,
    div[style*="background"]:has(h3:contains("Sẵn sàng nâng tầm")) a,
    div[style*="background"]:has(h3:contains("Sẵn sàng nâng tầm")) button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   39. NEWS PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG TIN TỨC TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, lưới 3 cột bộ lọc chuyên mục, lưới 2 cột thẻ tin tức & phân trang
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. News Hero Section Lock */
    section:has(h1:contains("Tin tức")),
    .news-hero {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Lưới Bộ Lọc Chuyên Mục (3 Cột trên Mobile: Tất cả, BỆNH GAN, ...) */
    #category-filters,
    div[style*="grid-template-columns"]:has(button:contains("Tất cả")) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #category-filters button,
    #category-filters > div,
    div[style*="grid-template-columns"]:has(button:contains("Tất cả")) button {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* 3. Lưới Thẻ Tin Tức 2 Cột (#news-container Lock) */
    #news-container,
    .news-grid,
    div[style*="grid-template-columns"]:has(a:contains("Đọc tiếp")) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #news-container > div,
    .news-grid > div,
    div[style*="grid-template-columns"]:has(a:contains("Đọc tiếp")) > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #news-container > div img,
    .news-grid > div img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* 4. Thanh Phân Trang (Pagination Buttons Wrap Lock) */
    #pagination,
    .pagination,
    div:has(button:contains("25")) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   40. CAREERS PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG TUYỂN DỤNG TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, 4 thẻ phúc lợi, danh sách vị trí tuyển dụng & quy trình ứng tuyển
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Careers Hero Section Lock */
    section:has(h1:contains("Phát triển sự nghiệp")),
    .careers-hero {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Khóa 4 Thẻ Phúc Lợi (Why Choose Invivo Lab Benefit Cards Lock) */
    .careers-benefits-grid,
    div[style*="grid-template-columns"]:has(h4:contains("Tiếp cận công nghệ")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .careers-benefits-grid > div,
    div[style*="grid-template-columns"]:has(h4:contains("Tiếp cận công nghệ")) > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 3. Danh Sách Vị Trí Đang Tuyển (Open Positions Job Cards Lock) */
    #positions,
    section:has(h2:contains("Vị trí đang tuyển")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #positions div[style*="border-radius"],
    section:has(h2:contains("Vị trí đang tuyển")) div[style*="border-radius"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    #positions a,
    #positions button,
    section:has(h2:contains("Vị trí đang tuyển")) a,
    section:has(h2:contains("Vị trí đang tuyển")) button {
        white-space: nowrap !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Quy Trình Ứng Tuyển (Application Process Steps Lock) */
    section:has(h2:contains("Quy trình ứng tuyển")),
    div:has(h2:contains("Quy trình ứng tuyển")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    section:has(h2:contains("Quy trình ứng tuyển")) div[style*="border-radius: 50%"],
    div:has(h2:contains("Quy trình ứng tuyển")) div[style*="border-radius: 50%"] {
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   41. CONTACT PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG LIÊN HỆ TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, thẻ thông tin liên lạc, form tư vấn & hệ thống phòng lab toàn quốc
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Contact Hero Section Lock */
    section:has(h1:contains("Hỗ trợ chuyên nghiệp")),
    .contact-hero {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Thẻ Thông Tin Liên Lạc & Form Gửi Yêu Cầu Tư Vấn Lock */
    .contact-grid,
    div:has(h3:contains("Thông tin liên lạc")),
    div:has(h3:contains("Gửi yêu cầu tư vấn")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div:has(h3:contains("Thông tin liên lạc")) > div,
    div:has(h3:contains("Gửi yêu cầu tư vấn")) > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    div:has(h3:contains("Gửi yêu cầu tư vấn")) input,
    div:has(h3:contains("Gửi yêu cầu tư vấn")) select,
    div:has(h3:contains("Gửi yêu cầu tư vấn")) textarea,
    div:has(h3:contains("Gửi yêu cầu tư vấn")) button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Hệ Thống Phòng Lab Toàn Quốc (Nationwide Lab Network Map Cards Lock) */
    section:has(h2:contains("Hệ thống phòng Lab")),
    div:has(h2:contains("Hệ thống phòng Lab")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    section:has(h2:contains("Hệ thống phòng Lab")) img,
    div:has(h2:contains("Hệ thống phòng Lab")) img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   42. BOOKING PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG ĐẶT LỊCH TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, form Thông tin đăng ký, thẻ Hotline 24/7 & huy hiệu chứng nhận
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Booking Hero Section Lock */
    section:has(h1:contains("Đặt lịch")),
    .booking-hero {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Form Thông Tin Đăng Ký (Booking Registration Form & Inputs Lock) */
    .booking-form,
    #booking-form,
    div:has(h3:contains("Thông tin đăng ký")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div:has(h3:contains("Thông tin đăng ký")) input,
    div:has(h3:contains("Thông tin đăng ký")) select,
    div:has(h3:contains("Thông tin đăng ký")) textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div:has(h3:contains("Thông tin đăng ký")) button {
        white-space: nowrap !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 3. Thẻ Bên Phải / Cuối Trang: Tại Sao Đặt Lịch Trước, Hotline & Chứng Nhận Lock */
    div:has(h4:contains("Tại sao nên đặt lịch")),
    div:has(h3:contains("Tại sao nên đặt lịch")),
    div[style*="background"]:has(h4:contains("1900 8668 96")),
    div[style*="background"]:has(div:contains("1900 8668 96")),
    div:has(div:contains("Chứng nhận ISO 15189:2022")),
    div:has(div:contains("An toàn & Bảo mật")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: normal !important;
    }
}

/* ==========================================================================
   43. ISO 15189 PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG ISO 15189 TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, 3 thẻ Tiêu chuẩn vàng, 2 thẻ Lợi ích & CTA cuối trang
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. ISO Hero Section Lock */
    section:has(h1:contains("ISO 15189")),
    .iso-hero {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. ISO 15189:2022 Là Gì? (What is ISO Section & Quote Lock) */
    section:has(h2:contains("ISO 15189:2022 là gì")),
    div:has(h2:contains("ISO 15189:2022 là gì")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    section:has(h2:contains("ISO 15189:2022 là gì")) img,
    div:has(h2:contains("ISO 15189:2022 là gì")) img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    div[style*="border-left"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* 3. Tại Sao Được Coi Là "Tiêu Chuẩn Vàng"? (Gold Standard 3 Cards Lock) */
    section:has(h2:contains("Tiêu chuẩn vàng")) div[style*="border-radius"],
    div:has(h2:contains("Tiêu chuẩn vàng")) div[style*="border-radius"],
    div:has(h4:contains("Tầm quan trọng lâm sàng")),
    div:has(h4:contains("Hệ quy chiếu toàn cầu")),
    div:has(h4:contains("Quản lý rủi ro vượt trội")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    /* 4. Lợi Ích Mang Lại (Benefits Section & Patient/Doctor White Cards Lock) */
    section:has(h2:contains("Lợi ích mang lại")),
    div[style*="background"]:has(h2:contains("Lợi ích mang lại")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    section:has(h2:contains("Lợi ích mang lại")) div[style*="background: white"],
    section:has(h2:contains("Lợi ích mang lại")) div[style*="background:#fff"],
    section:has(h2:contains("Lợi ích mang lại")) div[style*="background: #fff"],
    div:has(h3:contains("Đối với Người bệnh")),
    div:has(h3:contains("Đối với Y tế & Bác sĩ")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* 5. Thẻ CTA Cuối Trang ("Tự hào mang đến dịch vụ Y tế chuẩn Quốc tế" Lock) */
    section:has(h2:contains("Tự hào mang đến")),
    div:has(h2:contains("Tự hào mang đến")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    section:has(h2:contains("Tự hào mang đến")) a,
    section:has(h2:contains("Tự hào mang đến")) button,
    div:has(h2:contains("Tự hào mang đến")) a,
    div:has(h2:contains("Tự hào mang đến")) button {
        white-space: nowrap !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   44. PROFILE PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG HỒ SƠ NĂNG LỰC TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa tiêu đề, khung chứa & trình xem sách lật PDF (DFlip)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Profile Title & Header Lock */
    section:has(h1:contains("Hồ sơ năng lực")) {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 15px 0 30px !important;
    }
    section:has(h1:contains("Hồ sơ năng lực")) h1 {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* 2. DFlip Flipbook PDF Viewer Wrapper & Canvas Lock */
    .profile-book-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #df_manual_book,
    ._df_book,
    .df-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 78vh !important;
        min-height: 520px !important;
        max-height: 85vh !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   45. iNIPT PAGE MOBILE LAYOUT LOCK (KHÓA BỐ CỤC TRANG iNIPT TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Hero, thẻ tư vấn Bé Mắm, quy trình 3 bước NIPT & các thẻ gói iNIPT
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. iNIPT Hero Section & Slider Lock */
    section:has(h1:contains("iNIPT")),
    .inipt-hero {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Khóa Lưới 4 Huy Hiệu Thông Tin & Nút CTA Hero */
    div[style*="grid-template-columns"]:has(div:contains("99,9%")),
    div[style*="grid-template-columns"]:has(div:contains("25 gene")) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div[style*="grid-template-columns"]:has(div:contains("99,9%")) > div,
    div[style*="grid-template-columns"]:has(div:contains("25 gene")) > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: normal !important;
    }

    /* 3. Khóa Thẻ Quiz "Bé Mắm" & 3 Bước Quy Trình NIPT */
    div[style*="background"]:has(h3:contains("Bé Mắm")),
    div[style*="background"]:has(h2:contains("Bé Mắm")),
    div[style*="background"]:has(h4:contains("Lấy mẫu máu mẹ")),
    div[style*="background"]:has(h4:contains("Phân tích cfDNA")),
    div[style*="background"]:has(h4:contains("Trả kết quả")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* 4. Khóa Thẻ Chi Tiết Các Gói iNIPT (iNIPT+, iNIPT 7+, iNIPT 23+, iNIPT Pro+) */
    div[style*="border-radius"]:has(h3:contains("iNIPT")),
    div[style*="border-radius"]:has(h2:contains("iNIPT 7+")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    div[style*="border-radius"]:has(h3:contains("iNIPT")) img,
    div[style*="border-radius"]:has(h2:contains("iNIPT 7+")) img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    div[style*="display: flex"]:has(span:contains("iNIPT Twins+")),
    div[style*="display: flex"]:has(span:contains("iNIPT 7+")) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    div:has(h3:contains("iNIPT")) a,
    div:has(h3:contains("iNIPT")) button,
    div:has(h2:contains("iNIPT 7+")) a,
    div:has(h2:contains("iNIPT 7+")) button {
        white-space: nowrap !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   46. iNIPT PAGE REMAINING SECTIONS MOBILE LAYOUT LOCK (KHÓA BỐ CỤC PHẦN CÒN LẠI TRANG iNIPT TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa phần Gene lặn, 4 thẻ chính sách 2x2, bảng so sánh gói, chuyên gia, đánh giá mẹ bầu, FAQ, Form đăng ký & thanh CTA đáy
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Gene Lặn Là Gì? (Recessive Gene Section & Chat Bubbles Lock) */
    section:has(h2:contains("Gene lặn là gì")),
    div:has(h2:contains("Gene lặn là gì")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* 2. Chính Sách Hỗ Trợ: 4 Thẻ Blue Stats 2x2 Grid & Bảng So Sánh Scroll Lock */
    section:has(h2:contains("Chính sách hỗ trợ")),
    div:has(h2:contains("Chính sách hỗ trợ")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div[style*="grid-template-columns"]:has(div:contains("300 triệu")),
    div[style*="grid-template-columns"]:has(div:contains("Độ đặc hiệu")) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    section:has(h2:contains("Chính sách hỗ trợ")) table,
    div:has(h2:contains("Chính sách hỗ trợ")) table,
    div[style*="overflow-x"] {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    /* 3. Đội Ngũ Chuyên Gia & Mẹ Bầu Nói Gì (Experts & Testimonials Lock) */
    section:has(h2:contains("Đội ngũ chuyên gia")),
    section:has(h2:contains("Mẹ bầu nói gì")),
    div:has(h2:contains("Đội ngũ chuyên gia")),
    div:has(h2:contains("Mẹ bầu nói gì")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    div:has(h2:contains("Mẹ bầu nói gì")) div[style*="background: white"],
    div:has(h2:contains("Mẹ bầu nói gì")) div[style*="background:#fff"],
    div:has(h2:contains("Mẹ bầu nói gì")) div[style*="background: #fff"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* 4. FAQ Accordion & Form Đăng Ký Tư Vấn ("Mẹ muốn biết gói iNIPT nào phù hợp?") */
    section:has(h2:contains("Câu hỏi thường gặp")),
    section:has(h2:contains("Mẹ muốn biết gói iNIPT")),
    div:has(h2:contains("Câu hỏi thường gặp")),
    div:has(h2:contains("Mẹ muốn biết gói iNIPT")) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div:has(h2:contains("Mẹ muốn biết gói iNIPT")) input,
    div:has(h2:contains("Mẹ muốn biết gói iNIPT")) select,
    div:has(h2:contains("Mẹ muốn biết gói iNIPT")) textarea,
    div:has(h2:contains("Mẹ muốn biết gói iNIPT")) button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    div:has(h2:contains("Mẹ muốn biết gói iNIPT")) div[style*="display: flex"]:has(span:contains("iNIPT cơ bản")) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Thanh Sticky CTA Cuối Trang (Bottom Sticky Call-to-Action Bar Lock) */
    div[style*="position: fixed"],
    div[style*="position:sticky"],
    div[style*="position: sticky"] {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   47. ALL DETAIL POSTS MOBILE LAYOUT LOCK (KHÓA BỐ CỤC CÁC BÀI VIẾT CHI TIẾT TIN TỨC, TUYỂN DỤNG & DỊCH VỤ TRÊN MỌI DÒNG ĐIỆN THOẠI)
   - Đảm bảo tương thích 100% trên mọi dòng mobile (320px - 768px)
   - Khóa nội dung bài viết tin tức (article.html), bài tuyển dụng JD (jd-*.html) & bài dịch vụ (service-*.html)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Khóa Tiêu Đề Bài Viết & Thẻ Breadcrumb/Meta */
    .article-header,
    .jd-header,
    .service-header,
    section:has(h1) {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .article-header h1,
    .jd-header h1,
    .service-header h1,
    section:has(h1) h1 {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-wrap: wrap !important;
    }

    /* 2. Khóa Nội Dung Bài Viết (Văn Bản, Hình Ảnh, Bảng Biểu) */
    .article-content,
    .post-content,
    .jd-content,
    .service-content,
    .content-body {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    .article-content img,
    .post-content img,
    .jd-content img,
    .service-content img,
    .content-body img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }
    .article-content table,
    .post-content table,
    .jd-content table,
    .service-content table,
    .content-body table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    /* 3. Khóa Nút CTA Ứng Tuyển / Đặt Lịch Trong Bài Viết */
    .article-content a.btn,
    .jd-content a.btn,
    .service-content a.btn,
    .content-body a.btn,
    .article-content button,
    .jd-content button,
    .service-content button {
        white-space: nowrap !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}


/* ==================================================================================== */
/* SECTION 35: 21:9 ULTRA-TALL MOBILE ASPECT RATIO OPTIMIZATION & LAYOUT LOCK           */
/* ==================================================================================== */
/* Tối ưu và khóa giao diện chuyên biệt cho các dòng điện thoại màn hình dài 20:9, 21:9  */
/* (Sony Xperia, Samsung Galaxy Z Fold/Flip, Motorola Razr, và màn hình tràn viền cao) */
@media screen and (max-width: 480px) and (min-height: 750px),
       screen and (max-width: 480px) and (max-aspect-ratio: 10/20) {
    /* 0. Khung trang toàn cục không bị tràn viền hoặc trượt ngang trên màn hình dài */
    body, html, section, .hero-section, #iso-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 1. Hero Section: Khóa chặt layout 2 cột (50%-50%), ảnh cao cân đối với màn hình 21:9, nút và thẻ kết quả không bao giờ sát nhau */
    .hero-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-left, .hero-right {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        box-sizing: border-box !important;
    }
    .hero-img-wrapper {
        height: 205px !important;
        width: 100% !important;
        aspect-ratio: auto !important;
        border-radius: 12px !important;
    }
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
    }
    .hero-buttons .btn {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        padding: 5px 4px !important;
        font-size: 0.58rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .hero-floating-card {
        position: absolute !important;
        bottom: -6px !important;
        right: 0px !important;
        left: auto !important;
        margin: 0 !important;
        transform: scale(0.62) !important;
        transform-origin: bottom right !important;
        width: max-content !important;
        z-index: 10 !important;
    }

    /* 2. Khóa 3 Thẻ ISO 15189 trên 1 hàng ngang duy nhất không xuống dòng */
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    div[style*="display: flex; align-items: center; gap: 60px;"] > div:first-child > div[style*="flex-wrap: nowrap"] > div {
        flex: 1 1 33.33% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        font-size: 0.64rem !important;
        padding: 7px 2px !important;
    }

    /* 3. Khóa Header & Thẻ Năng Lực Xét Nghiệm (Testing Capabilities) cho màn hình dài 21:9 */
    section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
    }
    section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child > div:last-child a.btn {
        white-space: nowrap !important;
        font-size: 0.65rem !important;
        padding: 6px 12px !important;
        display: inline-flex !important;
    }
    .testing-capabilities-grid,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .testing-capabilities-grid > div,
    div[style*="grid-template-columns: repeat(2, 1fr)"]:has(h3[style*="font-size"]) > div {
        height: 180px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 4. Khóa tất cả các nút (Button) trên toàn trang không bao giờ bị gãy dòng chữ ở màn hình 21:9 */
    a.btn, button.btn, .btn {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   38. FINAL MOBILE & TABLET OVERRIDES (ABOUT STORY, SERVICES 3-COL, PARTNERSHIP)
   - Khóa bố cục Trang Giới thiệu theo thứ tự chuẩn: Title -> Text -> Image -> Highlights
   - Khóa thẻ trang Dịch vụ: 1 hàng 3 thẻ (repeat(3, 1fr)) với kích thước tối ưu
   - Khóa nút Trang Hợp tác: Ẩn cụm nút phía trên hình ảnh, chỉ hiện cụm nút dưới hình
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. ABOUT HERO / STORY: Bố cục từ trên xuống (Title -> Hình ảnh -> Đoạn text -> Cụm 2021 và ISO) */
    .about-hero-container,
    .about-story-container,
    div[style*="display: flex; gap: 50px; align-items: center;"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .about-hero-text,
    .about-story-text-col {
        display: contents !important;
    }

    /* 1st item: Title ("CÂU CHUYỆN CỦA CHÚNG TÔI", "Trung tâm Xét nghiệm Invivo Lab") */
    .about-hero-title,
    .about-story-title,
    .about-story-text-col > div:first-child,
    .about-story-text-col > h2 {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }

    /* 2nd item: Hình ảnh (about-lab.jpg) - Kéo dài 100% chiều ngang theo hình chữ nhật ngang (landscape rectangle), ghi đè selector độ ưu tiên cao cũ */
    .about-hero-image,
    .about-story-img-col,
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child,
    div[style*="display: flex; gap: 50px; align-items: center;"] > div.about-hero-image {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        align-self: stretch !important;
        display: block !important;
        margin: 15px auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
    }

    .about-hero-image img,
    .about-story-img-col img,
    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > img,
    div[style*="display: flex; gap: 50px; align-items: center;"] > div.about-hero-image > img {
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important;
        min-height: 220px !important;
        max-height: 280px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        box-shadow: var(--shadow-md) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    div[style*="display: flex; gap: 50px; align-items: center;"] > div:first-child > div[style*="position: absolute"],
    div[style*="display: flex; gap: 50px; align-items: center;"] > div.about-hero-image > div[style*="position: absolute"] {
        bottom: 12px !important;
        right: 12px !important;
    }

    /* 3rd item: Đoạn text (2 đoạn văn giới thiệu) */
    .about-hero-desc,
    .about-story-desc,
    .about-story-text-col > p {
        order: 3 !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }

    /* 4th item: Cụm số liệu nổi bật 2021 và ISO - phân bố cân bằng 50-50 */
    .about-hero-highlights,
    .about-story-stats-row {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 15px !important;
        background: var(--bg-light) !important;
        padding: 20px 15px !important;
        border-radius: 14px !important;
        margin: 15px auto 0 auto !important;
        box-sizing: border-box !important;
    }
    .about-hero-highlights > div,
    .about-story-stats-row > div {
        flex: 1 1 50% !important;
        width: 50% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. PARTNERSHIP HERO: Loại bỏ tuyệt đối các nút phía trên hình ảnh bằng ID #partnership-hero-buttons-top và specificity cao nhất */
    #partnership-hero-buttons-top,
    div#partnership-hero-buttons-top,
    .partnership-left #partnership-hero-buttons-top,
    .partnership-buttons-desktop,
    .partnership-left .partnership-buttons-desktop,
    .partnership-left .partnership-buttons,
    .partnership-left > div[style*="display: flex"],
    .partnership-left > .partnership-buttons,
    .partnership-left a.btn,
    .partnership-left button.btn {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .partnership-buttons-mobile {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .partnership-buttons-mobile > a,
    .partnership-buttons-mobile > .btn {
        flex: 1 1 50% !important;
        width: 50% !important;
        padding: 13px 10px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 768px) {
    /* 2. SERVICES PACKAGE CARDS: Xếp 1 hàng 3 thẻ (repeat(3, 1fr)) với lề padding trái phải cân bằng tuyệt đối (Chỉ áp dụng cho thẻ Dịch vụ có link a[href*="service-"]) */
    .services-grid,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]),
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]),
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto 30px auto !important;
        box-sizing: border-box !important;
    }

    .services-grid > a,
    .services-grid > div,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) > a,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) > div,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) > a,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) > div,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) > a,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
    }

    .services-grid a > div,
    .services-grid > div,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) a > div,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) > div,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) a > div,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) > div,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) a > div,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) > div {
        padding: 14px 4px 12px 4px !important;
        min-height: 105px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-sm) !important;
        overflow: hidden !important;
        margin: 0 auto !important;
    }

    /* Vòng tròn Icon của thẻ Dịch vụ: Thu nhỏ cân đối 42px */
    .services-grid > div > div:first-child,
    .services-grid a > div > div:first-child,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) > div > div:first-child,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) a > div > div:first-child,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) > div > div:first-child,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) a > div > div:first-child,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) > div > div:first-child,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) a > div > div:first-child {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 auto 8px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icon size bên trong vòng tròn */
    .services-grid i,
    .services-grid svg,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) i,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) i {
        font-size: 1.15rem !important;
    }

    /* Chữ tiêu đề thẻ Dịch vụ (div:last-child hoặc p, h3, h4) */
    .services-grid > div > div:last-child,
    .services-grid a > div > div:last-child,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) > div > div:last-child,
    div[style*="grid-template-columns: repeat(4"]:has(> a[href*="service-"]) a > div > div:last-child,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) > div > div:last-child,
    div[style*="grid-template-columns: repeat(5"]:has(> a[href*="service-"]) a > div > div:last-child,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) > div > div:last-child,
    div[style*="grid-template-columns: repeat(6"]:has(> a[href*="service-"]) a > div > div:last-child {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        text-align: center !important;
        word-break: break-word !important;
        margin: 0 !important;
    }

    /* 3. KHÔI PHỤC SECTION ĐỘI NGŨ CỦA CHÚNG TÔI (BAN CỐ VẤN & CHUYÊN GIA TRANG GIỚI THIỆU) VỀ NGUYÊN BẢN BACKUP (CAROUSEL NGANG) */
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;
        padding: 0 0 25px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"]))::-webkit-scrollbar {
        display: none !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) > div {
        flex: 0 0 65% !important;
        width: 65% !important;
        max-width: 65% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        padding: 0 !important;
        background: white !important;
        box-sizing: border-box !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) > div > img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        object-fit: cover !important;
        object-position: top center !important;
        background: #eaeef5 !important;
        margin: 0 !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) > div > div:last-child {
        padding: 15px 10px !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) > div h4 {
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) > div div[style*="font-style: italic"] {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }
    div[style*="grid-template-columns: repeat(5, 1fr)"]:not(:has(> a[href*="service-"])) > div > div:last-child > div:last-child {
        font-size: 0.68rem !important;
        line-height: 1.45 !important;
        text-align: left !important;
    }

    /* 4. KHÔI PHỤC SECTION HỆ THỐNG TRANG THIẾT BỊ TỐI TÂN VỀ NGUYÊN BẢN BACKUP (LƯỚI 1 CỘT TRÊN MOBILE) */
    div[style*="grid-template-columns: repeat(4, 1fr)"]:not(:has(> a[href*="service-"])):not(.careers-benefits-grid) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
    }
    div[style*="grid-template-columns: repeat(4, 1fr)"]:not(:has(> a[href*="service-"])):not(.careers-benefits-grid) > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        min-height: auto !important;
        padding: 25px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        background: white !important;
        border: 1px solid var(--border-color) !important;
    }
    div[style*="grid-template-columns: repeat(4, 1fr)"]:not(:has(> a[href*="service-"])):not(.careers-benefits-grid) > div > div:first-child {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        margin: 0 0 20px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #f4f6f9 !important;
        color: var(--primary-blue) !important;
        font-size: 1.2rem !important;
    }
    div[style*="grid-template-columns: repeat(4, 1fr)"]:not(:has(> a[href*="service-"])):not(.careers-benefits-grid) > div h4 {
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        margin-bottom: 10px !important;
        color: var(--text-main) !important;
        text-align: left !important;
    }
    div[style*="grid-template-columns: repeat(4, 1fr)"]:not(:has(> a[href*="service-"])):not(.careers-benefits-grid) > div p {
        font-size: 0.85rem !important;
        color: var(--text-muted) !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* 4. iNIPT PAGE - SECTION GENE LẶN (#recessive): 2 nút Xem danh mục & Tư vấn hiển thị trên dưới và bằng nhau */
    #recessive .flex.flex-wrap.gap-3 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    #recessive .flex.flex-wrap.gap-3 > button,
    #recessive .flex.flex-wrap.gap-3 > a {
        width: 100% !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 5. ABOUT PAGE (HÀNH TRÌNH PHÁT TRIỂN): Đoạn text Chứng chỉ ISO & Mở rộng quy mô xuống dòng tự nhiên */
    .about-timeline p,
    div[style*="margin-bottom: 60px;"] p,
    div:has(> h4:contains("Chứng Chỉ ISO")) p,
    div:has(> h4:contains("Mở Rộng Quy Mô")) p {
        white-space: normal !important;
        word-break: normal !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 768px) {
    /* Khối Ảnh (banner booking-hero.jpg): hiển thị dạng hình chữ nhật ngang tràn 100% chiều ngang trên Mobile/Tablet */
    .booking-hero-container > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .booking-hero-container > div:last-child img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        border-radius: 16px !important;
        box-shadow: var(--shadow-sm) !important;
    }

    /* Fix icon dấu tích nằm trực tiếp trước tiêu đề (inline trước title) trong section "Tại sao nên đặt lịch trước?" (Original HTML on Mobile) */
    div:has(> h4:contains("Tại sao nên đặt lịch trước?")) + div[style*="display: flex"] {
        display: block !important;
        margin-bottom: 20px !important;
    }
    div:has(> h4:contains("Tại sao nên đặt lịch trước?")) + div[style*="display: flex"] > i {
        float: left !important;
        margin-right: 12px !important;
        margin-top: 2px !important;
        font-size: 1.15rem !important;
    }
    div:has(> h4:contains("Tại sao nên đặt lịch trước?")) + div[style*="display: flex"] > div {
        display: block !important;
        overflow: hidden !important;
    }
    div:has(> h4:contains("Tại sao nên đặt lịch trước?")) + div[style*="display: flex"] ~ div[style*="display: flex"] {
        display: block !important;
        margin-bottom: 20px !important;
    }
    div:has(> h4:contains("Tại sao nên đặt lịch trước?")) + div[style*="display: flex"] ~ div[style*="display: flex"] > i {
        float: left !important;
        margin-right: 12px !important;
        margin-top: 2px !important;
        font-size: 1.15rem !important;
    }
    div:has(> h4:contains("Tại sao nên đặt lịch trước?")) + div[style*="display: flex"] ~ div[style*="display: flex"] > div {
        display: block !important;
        overflow: hidden !important;
    }

    /* Tối ưu Negative Space tối đa: Thu gọn lề đệm 2 bên container xuống 4px, đệm thẻ 10px 8px, gap 8px */
    .news-page-section > .container {
        padding-left: 4px !important;
        padding-right: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #news-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 8px !important;
        width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    #news-grid-container > div {
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    }
    #news-grid-container img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
    }
    #news-grid-container > div > div {
        padding: 10px 8px !important;
    }
    #news-grid-container h4 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    #news-grid-container p {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
/* ========================================================================== */
/* DESKTOP LAYOUT RESTORATION (KHÔI PHỤC TOÀN BỘ GIAO DIỆN DESKTOP CHUẨN HTML TĨNH) */
/* ========================================================================== */
@media (min-width: 769px) {
    /* 1. Trang chủ - Hero Section 2 cột chuẩn (Text trái, Hình phải) */
    .hero-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 40px !important;
        align-items: center !important;
        text-align: left !important;
    }
    .hero-left {
        display: block !important;
        flex: 1 1 50% !important;
        max-width: 50% !important;
    }
    .hero-right {
        display: block !important;
        flex: 1 1 50% !important;
        max-width: 50% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }
    .hero-badge {
        order: initial !important;
        margin-bottom: 20px !important;
        font-size: 0.88rem !important;
        padding: 8px 18px !important;
    }
    .hero-title {
        order: initial !important;
        font-size: 3.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        font-weight: 700 !important;
    }
    .hero-desc {
        order: initial !important;
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 30px !important;
    }
    .hero-buttons {
        order: initial !important;
        flex-direction: row !important;
        gap: 15px !important;
        width: auto !important;
    }
    .hero-buttons .btn {
        flex: initial !important;
        width: auto !important;
        padding: 14px 28px !important;
        font-size: 1rem !important;
    }
    .hero-img-wrapper {
        height: 380px !important;
        border-radius: 24px !important;
    }
    .hero-floating-card {
        transform: none !important;
        bottom: -20px !important;
        right: -20px !important;
        padding: 15px 24px !important;
    }

    /* 2. Trang Tin tức - Lưới 3 cột chuẩn HTML tĩnh (gap 30px, ảnh 200px, padding 25px, bo góc 16px) */
    .news-page-section > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 1200px !important;
    }
    #news-grid-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        width: 100% !important;
        margin-bottom: 50px !important;
    }
    #news-grid-container > div {
        border-radius: 16px !important;
        box-shadow: var(--shadow-sm) !important;
        background: white !important;
    }
    #news-grid-container img {
        width: 100% !important;
        height: 200px !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    #news-grid-container > div > div {
        padding: 25px !important;
    }
    #news-grid-container h4 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
    }
    #news-grid-container p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* 3. Trang Dịch vụ & Ban Cố Vấn - Lưới 5 cột chuẩn */
    .about-team-grid,
    .service-icon-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
    }

    /* 4. Trang Tuyển dụng - Lưới 4 cột chuẩn */
    .careers-benefits-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px !important;
    }
    .careers-benefits-grid > div {
        padding: 40px 28px !important;
        border-radius: 20px !important;
    }
    .careers-benefits-grid > div > div {
        width: 86px !important;
        height: 86px !important;
        font-size: 2.3rem !important;
        margin: 0 auto 24px !important;
    }
    .careers-benefits-grid > div > h4 {
        font-size: 1.25rem !important;
    }
    .careers-benefits-grid > div > p {
        font-size: 0.95rem !important;
    }

    /* 5. Section Năng lực xét nghiệm - Header 2 cột ngang (Tiêu đề trái, 2 nút bấm ở bên phải) */
    section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        width: 100% !important;
        gap: 0 !important;
    }
    section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
        width: auto !important;
        justify-content: flex-end !important;
    }
    section:has(a[href*="ho-so-nang-luc"]) > .container > div:first-child > div:last-child a.btn {
        font-size: 1rem !important;
        padding: 12px 24px !important;
    }

    /* 6. Section Chứng nhận ISO - Bố cục Desktop 2 cột chuẩn (Ẩn nút mobile, hiện nút desktop dưới bài viết) */
    #iso-section .container,
    section:has(.desktop-iso-btn) > .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 60px !important;
    }
    .mobile-iso-btn {
        display: none !important;
    }
    .desktop-iso-btn {
        display: inline-flex !important;
        padding: 12px 28px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
    }

    /* 7. Trang Giới thiệu - Khôi phục Bố cục 2 cột ngang cho "Câu chuyện của chúng tôi" */
    .about-story-container,
    .about-hero-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 50px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }
    .about-story-text-col,
    .about-hero-text {
        display: block !important;
        flex: 1 !important;
        max-width: 50% !important;
        order: initial !important;
        text-align: left !important;
    }
    .about-story-img-col,
    .about-hero-image {
        display: block !important;
        flex: 1.3 !important;
        max-width: 55% !important;
        order: initial !important;
        position: relative !important;
    }
    .about-story-img-col img,
    .about-hero-image img {
        width: 100% !important;
        min-height: 400px !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
    .about-story-title,
    .about-story-desc {
        display: block !important;
        width: auto !important;
        text-align: left !important;
    }
    .about-story-stats-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important;
        margin-top: 20px !important;
    }

    /* 8. Trang Giới thiệu - Khôi phục Lưới 4x1 (4 cột x 1 hàng) cho "Hệ thống trang thiết bị tối tân" */
    .about-equipment-grid,
    div.about-equipment-grid,
    section .container > div.about-equipment-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* 9. Trang Hợp tác - Khôi phục Bố cục Desktop 2 cột chuẩn (Nút bấm nằm ở cột trái, ẩn nút mobile dư thừa) */
    .partnership-grid {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 60px !important;
    }
    .partnership-left {
        flex: 1 !important;
        width: 50% !important;
    }
    .partnership-right {
        flex: 1 !important;
        width: 50% !important;
    }
    .partnership-right img {
        width: 100% !important;
        border-radius: 20px !important;
        display: block !important;
    }
    .partnership-buttons-mobile {
        display: none !important;
    }
    /* 10. Bảo vệ Header chuẩn khỏi Tailwind CSS resets trên trang iNIPT */
    body header.header {
        background-color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        padding: 15px 0 !important;
        height: auto !important;
        min-height: auto !important;
    }
    body header.header .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    body header.header a.logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--primary-blue, #1565c0) !important;
        text-decoration: none !important;
        margin-right: 35px !important;
        flex-shrink: 0 !important;
    }
    body header.header a.logo img {
        height: 40px !important;
        width: auto !important;
        display: block !important;
    }
    body header.header nav {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body header.header ul.nav-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 26px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        width: auto !important;
    }
    body header.header ul.nav-menu > li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        width: auto !important;
    }
    body header.header ul.nav-menu > li > a.nav-link,
    body header.header ul.nav-menu > li > a {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #334155 !important;
        text-decoration: none !important;
        padding: 8px 0 !important;
        transition: color 0.2s ease !important;
        display: inline-block !important;
        background: transparent !important;
        border: none !important;
    }
    body header.header ul.nav-menu > li > a.nav-link:hover,
    body header.header ul.nav-menu > li > a.nav-link.active,
    body header.header ul.nav-menu > li.current-menu-item > a,
    body header.header ul.nav-menu > li > a.active {
        color: #1565c0 !important;
        font-weight: 700 !important;
    }
    body header.header .header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    body header.header .header-actions .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        height: 42px !important;
        line-height: 1 !important;
    }
    body header.header .header-actions .btn-outline {
        background: #ffffff !important;
        color: #1565c0 !important;
        border: 1px solid #1565c0 !important;
        padding: 0 18px !important;
    }
    body header.header .header-actions .btn-danger {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 0 22px !important;
    }

    .mobile-menu-actions,
    li.mobile-menu-actions,
    ul.nav-menu > li.mobile-menu-actions {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
}

@media (max-width: 768px) {
    body header.header {
        position: relative !important;
    }
    body header.header nav {
        position: static !important;
    }
    body header.header .header-actions {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        color: #1565c0 !important;
        font-size: 1.25rem !important;
        cursor: pointer !important;
        margin-left: auto !important;
    }
    body header.header ul.nav-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
        padding: 15px 20px 20px 20px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        gap: 0 !important;
        z-index: 9999 !important;
        border-bottom: 3px solid #1565c0 !important;
        border-bottom-left-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
    }
    body header.header ul.nav-menu.active {
        display: flex !important;
    }
    body header.header ul.nav-menu > li {
        display: block !important;
        width: 100% !important;
    }
    body header.header ul.nav-menu > li > a.nav-link,
    body header.header ul.nav-menu > li > a {
        display: block !important;
        padding: 12px 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #334155 !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    ul.nav-menu > li.mobile-menu-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid #e2e8f0 !important;
        width: 100% !important;
    }
    ul.nav-menu > li.mobile-menu-actions .btn,
    ul.nav-menu > li.mobile-menu-actions .tracuu-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* 2. Trang Dịch vụ - Lưới 3 cột vừa vặn trên Mobile */
    .service-icon-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .service-icon-grid > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .service-icon-grid > a > div {
        padding: 15px 4px !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .service-icon-grid > a > div > h4 {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    /* 3. Trang Tuyển dụng - Thẻ dọc 100% chiều rộng trên Mobile */
    .job-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }
    .job-card-actions {
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
    }
    .job-card-actions > a {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .job-card-meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px 15px !important;
    }
}