/* ============================================================
   Hồng Nhan — Nền vàng sang trọng + tinh chỉnh giao diện Trang chủ
   Nạp SAU css/style.css. Chỉ tác động tới #homepage-content nên
   các view khác của SPA (dịch vụ, sản phẩm, tin tức) giữ nguyên.
   ============================================================ */

:root {
    --lux-cream: #fdf3dc;
    --lux-gold: #d4a24d;
    --lux-gold-deep: #b8782d;
    --lux-hairline: rgba(184, 120, 45, .28);
    --lux-panel-bg: rgba(255, 255, 255, .82);
    --lux-shadow: 0 22px 48px -26px rgba(120, 78, 20, .55);
    --lux-shadow-lift: 0 30px 60px -26px rgba(120, 78, 20, .62);
}

/* body có background-color riêng trong style.css; nền body được vẽ SAU
   lớp z-index:-1 bên dưới nên phải để trong suốt, nếu không lớp nền vàng
   bị che mất. <html> cũng để trong suốt (xem index.html) nên canvas là màu mặc
   định của trình duyệt. */
body {
    background-color: transparent;
}

/* ---------- Lớp nền vàng cố định ----------
   Đặt vào ::before của #homepage-content: SPA ẩn/hiện phần tử này bằng
   display:none nên nền tự mất khi rời trang chủ, không cần JS. */
#homepage-content::before {
    content: "";
    position: fixed;
    /* KHÔNG dùng inset:0: chiều cao khi đó bám theo viewport, mà trên di động viewport
       co giãn mỗi lần thanh URL ẩn/hiện lúc cuộn → nền cover phải scale lại → ảnh giật
       nhẹ theo nhịp cuộn. 100lvh là chiều cao viewport lớn nhất nên không đổi. */
    inset: 0 0 auto 0;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .52) 0%,
            rgba(255, 255, 255, .30) 38%,
            rgba(255, 255, 255, .38) 72%,
            rgba(255, 255, 255, .58) 100%),
        url("../img/background1.svg") center center / cover no-repeat,
        var(--lux-cream);
    /* Dùng lại cơ chế bù rubber-band + cắt dải status bar của các layer nền
       trang dịch vụ (xem --overscroll-y / --topcover trong index.html). */
    transform: translate3d(0, var(--overscroll-y, 0px), 0);
    will-change: transform;
    -webkit-clip-path: inset(var(--topcover, 60px) 0 0 0);
    clip-path: inset(var(--topcover, 60px) 0 0 0);
}

/* ---------- Panel kính cho từng khối nội dung ---------- */
/* #services-content đi kèm vì trang /dichVu cũng dùng khung kính này — nó nằm NGOÀI
   #homepage-content (hai khối là anh em, không lồng nhau), nên thiếu nhánh ấy là khối
   thẻ bên /dichVu mất sạch nền kính. */
#homepage-content .lux-section,
#services-content .lux-section {
    position: relative;
    /* .85rem chứ không phải .6rem: bên /san-pham, tấm panel có lề .6rem NHƯNG còn nằm
       trong #products-page-content vốn đệm thêm 4px mỗi bên — tổng cộng 13,6px. Trang chủ
       không có khung ngoài ấy nên phải cộng 4px vào chính lề. Desktop tương tự: 28+4=32px. */
    margin: 1.75rem .85rem;
    /* ĐÚNG BẰNG .products-page-panel trong css/style.css (2rem 1.1rem, và 2.75rem 2.25rem
       từ 992px) — chủ trang chốt trang chủ phải giống trang /san-pham về đệm, lề, khoảng
       cách. Hai khối vốn là anh em sinh đôi: cùng nền kính, cùng viền, cùng bóng, cùng bo
       24px; chỉ đệm ngang lệch 0,15rem nên đã kéo về cho khớp hẳn.

       ĐỪNG gắn lại `py-5 px-1` (hay bất cứ lớp đệm nào của Bootstrap) lên thẻ .lux-section:
       chúng khai kèm !important nên đè sạch luật ở đây — đó chính là thứ đã làm trang chủ
       thụt vào 4px trong khi /san-pham thụt 36px, lệch 32px mỗi bên. */
    padding: 2rem 1.1rem;
    border-radius: 24px;
    background: var(--lux-panel-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: var(--lux-shadow);
    overflow: hidden;
}

/* Sợi chỉ vàng trên đỉnh panel */
#homepage-content .lux-section::before,
#services-content .lux-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 162, 77, .1) 12%,
            #f3d68e 38%,
            #fff8e2 50%,
            #f3d68e 62%,
            rgba(212, 162, 77, .1) 88%,
            transparent 100%);
}

/* Khối "Chức năng" là dải bg-primary tràn viền: bo góc thay vì phủ kính */
#homepage-content .lux-section-wide {
    /* Khối này còn mang class .container-fluid (width:100%). Cộng với margin
       ngang bên dưới là thừa ràng buộc → trình duyệt vứt margin-right và đẩy
       khối lòi khỏi mép phải. Trả width về auto để hai margin cân nhau. */
    width: auto;
    /* Lề DỌC bằng đúng .lux-section (1.75rem), không phải 2.25rem như trước.
       Cũng đã gỡ lớp `my-5` khỏi thẻ trong index.html: Bootstrap khai nó kèm !important
       (3rem = 48px) nên luật ở đây thua, sửa số mấy cũng vô ích. Đừng thêm lại.
       Lề dọc của hai khối liền nhau gộp lại, cái lớn thắng — nên dải cam để 2.25rem là
       khoảng hở quanh nó thành 48px trong khi mọi chỗ khác 28px. Đo thật đúng như vậy. */
    margin: 1.75rem .85rem;
    /* 24px cho bằng .lux-section — chủ trang chốt đồng bộ khoảng cách toàn trang chủ theo
       khối Sản phẩm. Dải cam vẫn giữ nguyên là dải cam đặc, chỉ bo góc đi theo. */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--lux-shadow);
    border: 1px solid rgba(255, 255, 255, .5);
}

@media (min-width: 992px) {
    #homepage-content .lux-section,
    #services-content .lux-section {
        /* 2rem = 32px = 28px lề của .products-page-panel + 4px đệm của khung ngoài nó. */
        margin: 2.5rem 2rem;
        padding: 2.75rem 2.25rem;
    }

    #homepage-content .lux-section-wide {
        /* Bằng .lux-section ở cùng khổ màn — xem chú thích lề ở trên. */
        margin: 2.5rem 2rem;
    }
}

/* ---------- Tiêu đề section ---------- */
/* .section-badge: nền vàng đã chuyển sang khai báo chung trong style.css để badge ở
   trang Sản phẩm / chi tiết sản phẩm dùng chung một kiểu với trang chủ. */

#homepage-content .section-title,
#services-content .section-title {
    position: relative;
    display: inline-block;
    padding-bottom: .35rem;
}

/* Gạch chân vàng nhỏ dưới tiêu đề */
/* #homepage-content .text-center>.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 84px;
    height: 0.5px;
    transform: translateX(-50%) scaleY(.9);
    background: linear-gradient(90deg, transparent, var(--lux-gold), transparent);
} */

/* ---------- Hero carousel ---------- */
#homepage-content #header-carousel {
    position: relative;
    margin: .75rem .6rem 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 26px 60px -28px rgba(120, 78, 20, .7);
}

@media (min-width: 992px) {
    #homepage-content #header-carousel {
        margin: 1rem 1.75rem 0;
    }
}

#homepage-content #header-carousel .carousel-item>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 8s ease-out;
}

#homepage-content #header-carousel .carousel-item.active>img {
    transform: scale(1);
}

/* Phủ tối chân ảnh để chữ trắng luôn đọc được */
/* #homepage-content #header-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(30, 12, 4, .28) 0%, rgba(30, 12, 4, 0) 38%, rgba(30, 12, 4, .62) 100%);
    pointer-events: none;
} */

#homepage-content #header-carousel .carousel-caption {
    z-index: 2;
    inset: 0;
    padding: 0;
}

#homepage-content #header-carousel .carousel-caption h4 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

#homepage-content #header-carousel .carousel-caption h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2rem, 1.4rem + 3.4vw, 3.4rem);
    text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}

/* Nút CTA mạ vàng */
#homepage-content #header-carousel .carousel-caption .btn {
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.9rem !important;
    font-weight: 600;
    letter-spacing: .3px;
    color: #5a3410;
    background: linear-gradient(180deg, #fff1a3 0%, #f8c65d 50%, #e4b04d 100%);
    box-shadow: 0 12px 26px -12px rgba(120, 78, 20, .9), inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

#homepage-content #header-carousel .carousel-caption .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 34px -14px rgba(120, 78, 20, .95), inset 0 1px 0 rgba(255, 255, 255, .9);
}

#homepage-content .carousel-control-prev,
#homepage-content .carousel-control-next {
    opacity: 0;
    transition: opacity .3s ease;
}

/* Chạm carousel trên iPhone cũng hiện hai mũi tên (chủ trang muốn GIỮ). Hệ quả: Safari coi
   cú chạm đầu là "rê chuột" và nuốt click — nên menu xổ xuống đóng bằng pointerdown chứ
   không chờ click (js/header-actions.js · dongDropdownKhiChamNgoai). */
#homepage-content #header-carousel:hover .carousel-control-prev,
#homepage-content #header-carousel:hover .carousel-control-next {
    opacity: .9;
}

/* Nút trước/sau — MỘT khai báo cho cả hai carousel.
   Chủ trang chốt nút của "Ý kiến khách hàng" phải trông y như nút của carousel ảnh đầu
   trang, nên hai chỗ dùng chung đúng luật này chứ không chép ra hai bản rồi để chúng trôi
   mỗi nơi một kiểu. */
#homepage-content .carousel-control-prev .btn,
#homepage-content .carousel-control-next .btn,
#homepage-content .testimonial-carousel .owl-nav .owl-prev,
#homepage-content .testimonial-carousel .owl-nav .owl-next {
    border-radius: 50%;
    background: rgba(28, 12, 4, .45) !important;
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Phần nút đầu trang có sẵn mà nút Owl thì không.
   Nút đầu trang là <div class="btn btn-dark" style="width:45px;height:45px"> — cỡ lấy từ
   thuộc tính style, còn canh giữa lấy từ luật .carousel-control-prev .btn trong style.css.
   Owl dựng nút bằng <div class="owl-prev"> trần, không có gì trong hai thứ đó, nên phải
   khai lại ở đây cho bằng.
   Ba dòng cuối là ĐÈ style.css: ở đó .owl-prev đang là màu --dark cỡ 45px — hợp với mũi tên
   chữ trần ngày trước, nhưng đặt vào vòng tròn tối thì thành một dấu đen to tràn ra ngoài. */
#homepage-content .testimonial-carousel .owl-nav .owl-prev,
#homepage-content .testimonial-carousel .owl-nav .owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

/* ---------- Ảnh khối Giới thiệu ---------- */
/* MỘT luật cho mọi ảnh lớn của hai khối giới thiệu — cùng bo góc, cùng viền, cùng đổ bóng.
   Khối "Chức năng" trước đây không có viền nên nhìn lạc hẳn so với khối "Giới thiệu".

   Viền 1px chứ không phải 3px: chủ trang chốt mỏng lại cho bằng viền của THẺ BÁC SĨ. Bộ số
   lấy nguyên của #homepage-content .team-item (xem quanh dòng 303) — cả độ dày lẫn sắc
   trắng .8, chứ không tự đặt một sắc riêng; hai chỗ lệch sắc thì đặt cạnh nhau là nhìn ra.

   Cũng đã gỡ `rounded` khỏi hai ảnh bên Giới thiệu trong index.html: lớp tiện ích ấy khai
   border-radius kèm !important và ghim cứng 8px, nên dòng 18px ngay dưới đây bị đè mất suốt
   — đo ra 8px trong khi mã nói 18px. Đừng gắn lại. */
#homepage-content .lux-about-media img,
#homepage-content .lux-section-wide .col-lg-6.pe-lg-0 img {
    border-radius: 18px;
    box-shadow: var(--lux-shadow);
    border: 1px solid rgba(255, 255, 255, .8);
    transition: transform .45s ease, box-shadow .45s ease;
}

#homepage-content .lux-about-media img:hover {
    transform: translateY(-6px);
    box-shadow: var(--lux-shadow-lift);
}

/* ---------- Thẻ bác sĩ / dịch vụ / sản phẩm ---------- */
#homepage-content .team-item,
/* Trang /bac-si dùng CHUNG thẻ này — cùng một kiểu với khối bác sĩ ngoài trang chủ. */
#bac-si-content .team-item {
    background: rgba(255, 255, 255, .6);
    box-shadow: var(--lux-shadow);
    border: 1px solid rgba(255, 255, 255, .8);
}

/* Thẻ bác sĩ KHÔNG nhấc lên khi rê chuột — chủ trang yêu cầu bỏ. Trên iPhone chạm là dính
   :hover nên thẻ còn nhảy lên ngay lúc khách bấm nút Liên hệ / Chia sẻ. */

/* Thẻ dịch vụ: mọi luật đã chuyển sang .svc-card trong css/service-grids.css.
   Lý do: tệp NÀY chỉ tác động tới #homepage-content, mà trang /dichVu nằm ngoài đó —
   để lại đây thì hai trang không thể giống nhau. Xem chú thích ở .svc-card. */

/* ---------- Ý kiến khách hàng ---------- */
/* KHÔNG viền vàng quanh ảnh — chủ trang đã bỏ hẳn vòng tròn vàng.
   Vành dày là do `bg-light p-2` trên thẻ <img> trong index.html (nền gradient vàng --light
   lộ ra qua 8px đệm); cả hai lớp đó đã gỡ. Viền 2px vàng ở đây là phần còn lại của cùng
   một thứ, giữ lại thì vẫn còn một vòng vàng mảnh. Bóng đổ thì giữ: nó tạo chiều sâu chứ
   không vẽ ra cái vòng. */
#homepage-content .testimonial-item img {
    box-shadow: 0 10px 26px -14px rgba(120, 78, 20, .8);
}

#homepage-content .testimonial-text {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(212, 162, 77, .25);
    box-shadow: var(--lux-shadow);
}

/* ---------- Khối "Chức năng": lề PHẢI của ảnh bằng đúng lề TRÁI của chữ ----------
   Cột ảnh mang `pe-lg-0` của Bootstrap (padding-right: 0 !important) nên từ 992px ảnh chạm
   thẳng mép phải dải cam, trong khi bên trái chữ thụt vào khá sâu — hai bên lệch hẳn nhau.

   SOI GƯƠNG ĐÚNG CÔNG THỨC, không đặt một con số cố định. Lề trái do .feature-text trong
   css/style.css quyết, và nó KHÔNG cố định: `calc(((100% - <bề ngang container>) / 2) +
   .75rem)` với ba mốc 960 / 1140 / 1320px. Đo thật ra 49px ở màn 1280, 39px ở 1440, 119px ở
   1600, 279px ở 1920. Ghim một số nào đó là đúng ở đúng một khổ màn, sai ở mọi khổ còn lại.

   Dùng lại được nguyên công thức vì .feature-text CHÍNH LÀ cột trái (class col-lg-6
   feature-text), tức hai cột cùng một khối chứa là .row — `100%` trong calc quy về cùng một
   bề ngang, nên hai bên ra đúng một giá trị.

   Phải kèm !important: `pe-lg-0` cũng khai !important, không có thì luật này thua. Đây là
   một trong số ít chỗ đáng dùng — gỡ lớp khỏi HTML thì phải sửa cả bố cục hai cột.

   Ba mốc màn phải khớp từng cái với ba mốc của .feature-text; sửa bên kia thì sửa cả ở đây. */
@media (min-width: 992px) {
    #homepage-content .lux-section-wide .col-lg-6.pe-lg-0 {
        padding-right: calc(((100% - 960px) / 2) + .75rem) !important;
    }
}

@media (min-width: 1200px) {
    #homepage-content .lux-section-wide .col-lg-6.pe-lg-0 {
        padding-right: calc(((100% - 1140px) / 2) + .75rem) !important;
    }
}

@media (min-width: 1400px) {
    #homepage-content .lux-section-wide .col-lg-6.pe-lg-0 {
        padding-right: calc(((100% - 1320px) / 2) + .75rem) !important;
    }
}

/* ---------- Khối "Giới thiệu": lề trái–phải bằng đúng khối "Chức năng" ----------
   Lề của khối Chức năng KHÔNG cố định: nó là `calc(((100% - <bề ngang container>) / 2) +
   .75rem)` khai ở .feature-text trong css/style.css, ba mốc 960 / 1140 / 1320px — đo thật
   ra 12px ở màn 1024, 50px ở 1280, 40px ở 1440, 120px ở 1600, 280px ở 1920. Khối Giới
   thiệu thì đang cố định 36px, nên hai khối lệch nhau ở mọi khổ.

   Dùng lại NGUYÊN công thức, không chép số. Nhưng phải đặt lên .row bên trong chứ không lên
   chính khối: `100%` trong calc quy về bề ngang của KHỐI CHỨA, mà khối chứa của .feature-text
   là .row của dải cam (rộng bằng đúng dải). Cho .lux-gioi-thieu đệm ngang 0 thì hộp nội dung
   của nó rộng đúng bằng dải cam, và .row bên trong lấy được cùng một mốc — hai bên ra cùng
   một giá trị. Đặt thẳng lên khối thì mốc là #homepage-content (rộng cả màn), lệch 32px.

   Chỉ từ 992px: dưới mốc đó khối Chức năng xếp chồng hai cột, không còn gì để đồng bộ. */
@media (min-width: 992px) {
    #homepage-content .lux-gioi-thieu {
        padding-left: 0;
        padding-right: 0;
    }

    #homepage-content .lux-gioi-thieu > .row {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    #homepage-content .lux-gioi-thieu > .row {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    #homepage-content .lux-gioi-thieu > .row {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}

/* Khối chữ và ảnh trong "Giới thiệu" BẮT ĐẦU CÙNG MỘT ĐỘ CAO trên desktop.
   Đo trên trang: đỉnh chữ thấp hơn đỉnh ảnh đúng 40px ở mọi khổ desktop, do một
   `style="padding-top: 40px"` viết thẳng trên cột chữ. Đã gỡ khỏi index.html và trả lại ở
   đây CHỈ cho khổ điện thoại — dưới 992px hai cột xếp chồng, chữ nằm trên ảnh nên vẫn cần
   khoảng thở ấy.

   Làm cách này thay vì đè bằng !important: luật viết thẳng trên thẻ chỉ thua được
   !important, mà thêm một !important nữa vào tệp là lại khó lần sau. */
@media (max-width: 991.98px) {
    #homepage-content .lux-gt-chu {
        padding-top: 40px;
    }
}

/* Khối chữ và ảnh trong "Chức năng" BẮT ĐẦU CÙNG MỘT ĐỘ CAO.
   Đo trên trang: đỉnh chữ thấp hơn đỉnh ảnh đúng 64px ở mọi khổ desktop, cộng từ hai chỗ —
   `py-3` trên chính cột chữ (16px) và `p-lg-5` trên khối bọc bên trong (48px). Cột ảnh thì
   đệm trên bằng 0 nên ảnh bám sát đỉnh hàng.

   Chỉ từ 992px trở lên: dưới mốc đó hai cột xếp chồng, chữ nằm trên ảnh và vẫn cần đệm.
   Phải kèm !important vì cả `py-3` lẫn `p-lg-5` đều là lớp tiện ích Bootstrap khai
   !important. Chỉ gỡ đệm TRÊN, giữ nguyên đệm dưới và hai bên. */
@media (min-width: 992px) {
    #homepage-content .lux-section-wide .feature-text,
    #homepage-content .lux-section-wide .feature-text > div {
        padding-top: 0 !important;
    }
}

/* ---------- Bo góc thẻ: 18px, bằng thẻ sản phẩm ----------
   Chủ trang lấy khối Sản phẩm làm chuẩn cho cả trang chủ, mà .product-card bo 18px.

   KHÔNG dùng lớp .rounded của Bootstrap để làm việc này: lớp ấy khai border-radius kèm
   !important nên đè mọi luật khác, mà bán kính của nó chỉ 8px. Đã gỡ .rounded khỏi
   .team-item (js/bac-si.js) và .testimonial-text (index.html) rồi khai thẳng ở đây — thêm
   .rounded trở lại là hỏng ngay, phép kiểm trong .cssscope-test/bac-si.js canh chỗ này. */
#homepage-content .team-item,
#bac-si-content .team-item,
#homepage-content .testimonial-text {
    border-radius: 18px;
}

/* ---------- Khối "Chức năng · Hồng Nhan" trên điện thoại ---------- */
/* Canh giữa nhãn và tiêu đề cho khớp mọi khối khác của trang chủ — Dịch vụ, Sản phẩm, Ý
   kiến khách hàng đều canh giữa; riêng khối này lệch trái nên nhìn ra ngay là lạc.

   CHỈ ở khổ điện thoại. Từ 992px trở lên khối này là hai cột chữ-trái / ảnh-phải, canh
   trái mới đúng — và mấy luật .feature-text trong style.css cũng chỉ sống trong
   @media (min-width: 992px), nên hai bên không giẫm chân nhau.

   Đoạn văn KHÔNG bị kéo theo: hai thẻ <p> của nó mang sẵn class .text-align-justify, mà
   khai báo của chính phần tử luôn thắng giá trị thừa kế từ cha. Canh giữa một đoạn văn
   dài là rất khó đọc, nên đó là điều cần giữ chứ không phải tác dụng phụ. */
@media (max-width: 991.98px) {
    #homepage-content .feature-text {
        text-align: center;
    }
}

/* ---------- Hai đoạn văn Giới thiệu / Chức năng ---------- */
/* Chủ trang (29/09/2026): cỡ chữ hai đoạn "Tại Hồng Nhan, chúng tôi…" và "Đơn vị tiên phong…"
   phải GIỐNG mô tả trong thẻ dịch vụ ngay dưới. Cỡ lấy từ --co-doan-trang-chu, biến mà
   khopCoChu (js/service-grids.js) tính cho khối thẻ và đẩy lên <html>, nên đổi cửa sổ hay đổi
   số cột thì ba nơi cùng đổi. Kiểu chữ chép đúng .svc-sub: nét 300, giãn dòng 1.6, màu chữ
   thường. !important cho line-height vì thẻ <p> đang mang style="line-height: 1.5rem".
   CHỈ LAPTOP — không đụng điện thoại, máy tính bảng, desktop (chủ trang 29/09/2026). */
@media (min-width: 992px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
    #homepage-content :is(#shortContent1, #fullContent1, #shortContent2, #fullContent2) p {
        font-size: var(--co-doan-trang-chu, 0.9rem);
        font-weight: 300;
        line-height: 1.6 !important;
        color: var(--text-normal);
    }
}

/* ---------- Tôn trọng người dùng tắt hiệu ứng ---------- */
@media (prefers-reduced-motion: reduce) {

    #homepage-content #header-carousel .carousel-item>img,
    #homepage-content .team-item,
    #homepage-content .team-item img,
    /* .service-item đã bỏ; .svc-card tự lo phần prefers-reduced-motion của nó trong
       css/service-grids.css, vì thẻ ấy còn dùng ở /dichVu nằm ngoài #homepage-content. */
    #homepage-content .lux-about-media img {
        transition: none !important;
        transform: none !important;
    }
}

/* backdrop-filter chưa hỗ trợ → dùng nền đục hơn cho chắc chắn dễ đọc */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #homepage-content .lux-section {
        background: rgba(255, 255, 255, .93);
    }
}