/* ============================================================ 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. Canvas vẫn là #f5f5f5 do đã ghim màu đó. */ 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; inset: 0; 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/gold-bg.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); -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 ---------- */ #homepage-content .lux-section { position: relative; margin: 1.75rem .6rem; padding: 2rem 1.25rem; 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 { 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 { margin: 2.25rem .6rem; border-radius: 26px; overflow: hidden; box-shadow: var(--lux-shadow); border: 1px solid rgba(255, 255, 255, .5); } @media (min-width: 992px) { #homepage-content .lux-section { margin: 2.5rem 1.75rem; padding: 2.75rem 2.25rem; } #homepage-content .lux-section-wide { margin: 3rem 1.75rem; } } /* ---------- Tiêu đề section ---------- */ #homepage-content .section-badge { background: linear-gradient(180deg, rgba(255, 248, 226, .95), rgba(250, 227, 165, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(120, 78, 20, .6); } #homepage-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: 2px; 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; } #homepage-content #header-carousel:hover .carousel-control-prev, #homepage-content #header-carousel:hover .carousel-control-next { opacity: .9; } #homepage-content .carousel-control-prev .btn, #homepage-content .carousel-control-next .btn { 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); } /* ---------- Ảnh khối Giới thiệu ---------- */ #homepage-content .lux-about-media img { border-radius: 18px; box-shadow: var(--lux-shadow); border: 3px solid rgba(255, 255, 255, .9); 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 { background: rgba(255, 255, 255, .6); box-shadow: var(--lux-shadow); border: 1px solid rgba(255, 255, 255, .8); transition: transform .35s ease, box-shadow .35s ease; } #homepage-content .team-item:hover { transform: translateY(-8px); box-shadow: var(--lux-shadow-lift); } #homepage-content .team-item img { transition: transform .6s ease; } #homepage-content .team-item:hover img { transform: scale(1.06); } #homepage-content .service-item { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--lux-shadow); transition: transform .35s ease, box-shadow .35s ease; } #homepage-content .service-item:hover { transform: translateY(-8px); box-shadow: var(--lux-shadow-lift); } /* Vệt sáng quét qua thẻ dịch vụ khi hover */ #homepage-content .service-item::after { content: ""; position: absolute; top: -60%; left: -70%; width: 45%; height: 220%; transform: rotate(18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transition: left .75s ease; pointer-events: none; } #homepage-content .service-item:hover::after { left: 130%; } #homepage-content .service-item .rounded-circle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 22px -14px rgba(60, 30, 0, .9); } /* ---------- Ý kiến khách hàng ---------- */ #homepage-content .testimonial-item img { border: 2px solid rgba(212, 162, 77, .55); 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); } /* ---------- 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, #homepage-content .service-item, #homepage-content .service-item::after, #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); } }