/* ============ TOKENS ============ */
:root{
  --color-bg:            #FDFBF7;
  --color-bg-alt:        #FBF1EF;  /* blush ấm, thay xanh lá #EEF3EA cho hợp brand */
  --color-maroon:        #8C2A2E;
  --color-maroon-dark:   #6E1F22;
  --color-accent:        #E8542F;  /* coral - 1 sắc nóng duy nhất cho giá & badge giảm giá */
  --color-accent-dark:   #C6401F;
  --color-green:         #5B7F5E;
  --color-green-dark:    #4A6B4D;
  --color-text:          #241F1C;
  --color-text-soft:     #6B6560;
  --color-border:        #E4DED5;
  --color-red:           #E8542F;  /* gom về coral thay đỏ chói #FF0000 */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Be Vietnam Pro', Arial, sans-serif;

  --container-w: 1140px;
  --radius-lg: 24px;
  --radius-md: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}

.center{ text-align:center; }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  font-weight:700;
  color:var(--color-maroon);
  margin:0 0 12px;
}
.eyebrow.center{ text-align:center; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 16px;
  color:var(--color-text);
}

.section-sub{
  max-width:640px;
  margin:0 auto 40px;
  color:var(--color-text-soft);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{
  background:var(--color-green);
  color:#fff;
  box-shadow: 0 8px 24px rgba(91, 127, 94, 0.3); /* Bóng đổ màu xanh lá của nút */
}
.btn-primary:hover{
  background:var(--color-green-dark);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(74,107,77,.3);
}
.btn-block{ width:100%; text-align:center; }

/* ============ HEADER ============ */
.site-header {
    display: none !important;
}

.logo span{ color:var(--color-maroon); }

/* ============ HERO ============ */
.hero{
  text-align:center;
  padding:40px 0 60px;
}
.hero-title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.25;
  font-style:italic;
  max-width:820px;
  margin:0 auto 20px;
}
.hero-title .accent{ color:var(--color-maroon); }
.hero-sub {
    font-size: 20px; /* Tăng kích thước chữ phụ */
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    margin-bottom: 30px;
}

/* ============ ORDER SECTION ============ */
.order-section{
  background:var(--color-bg-alt);
  padding:70px 0;
}
.order-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}
.order-image{ display:flex; justify-content:center; }
.order-content h2{
  font-size:clamp(22px,2.6vw,30px);
  font-style:italic;
  max-width:480px;
}
.discount-tag{
  display:inline-block;
  background:var(--color-red);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:10px;
}
.price-line{ margin-bottom:24px; }
.price-now{
  font-size:32px;
  font-weight:700;
  color:var(--color-accent);
  margin-right:14px;
}
.price-old{
  font-size:18px;
  color:var(--color-text-soft);
  text-decoration:line-through;
}

.order-form{
  background:#fff;
  padding:28px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
}
.form-caption{
  font-weight:600;
  margin:0 0 18px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-field{ margin-bottom:16px; }
.form-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
}
.form-field input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--color-border);
  font-family:var(--font-body);
  font-size:14px;
  background:#FCFAF7;
}
.form-field input:focus{
  outline:2px solid var(--color-green);
  outline-offset:1px;
  background:#fff;
}

/* ============ PRODUCT INFO ============ */
.info-section{ padding:80px 0 40px; }
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:60px;
}
.info-carousel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
}
.carousel-arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--color-border);
  background:#fff;
  cursor:pointer;
  font-size:14px;
  z-index:2;
}
.carousel-arrow.prev{ left:-10px; }
.carousel-arrow.next{ right:-10px; }

.info-content ul.info-list{ margin-top:20px; }
.info-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:14px;
  color:var(--color-text-soft);
}
.info-list li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--color-green);
}
.info-list li strong{ color:var(--color-text); }

.usage-block{
  background:var(--color-bg-alt);
  padding:50px 24px;
  border-radius:var(--radius-lg);
}
.usage-text{ font-size:18px; color:var(--color-text-soft); }

/* ============ BENEFITS ============ */
.benefits-section{ padding:80px 0; }
.benefits-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.benefits-content h2{
  font-size:clamp(24px,2.8vw,32px);
  max-width:460px;
}
.benefits-sub{ color:var(--color-text-soft); margin-bottom:20px; }
.benefit-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
  font-weight:500;
}
.benefit-list{ margin-bottom:28px; }

.benefits-image{ position:relative; }
.portrait-placeholder{
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.portrait-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.rating-badge{
  position:relative;
  margin-top:-1px;
  background:var(--color-bg-alt);
  padding:16px 20px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:14px;
}

/* ============ ICONS ============ */
.icon{
  display:inline-block;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--color-bg-alt);
  flex:none;
  position:relative;
}
.icon-ph::after,.icon-drop::after,.icon-sparkle::after,.icon-people::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  background:var(--color-green);
}
.icon-people{ background:#FBE9D8; }
.icon-people::after{ background:#E2933F; }

/* ============ INGREDIENTS ============ */
.ingredients-section{
  background:var(--color-bg-alt);
  padding:80px 0;
}
.ingredients-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:20px;
}
.ingredient-card h3{
  font-size:17px;
  margin:18px 0 8px;
}
.ingredient-card p{
  color:var(--color-text-soft);
  font-size:14px;
  margin:0;
}

/* ============ INTRO ============ */
.intro-section{ padding:80px 0; }
.intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  max-width:900px;
  margin:0 auto 44px;
  text-align:center;
}

.intro-circle-thumb {
    width: 160px;
    height: 160px;
    background-color: var(--color-bg-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    overflow: hidden;
}
.intro-circle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.intro-item p { 
    font-weight: 700; 
    font-size: 16px; 
    line-height: 1.4;
    color: var(--color-text);
    max-width: 240px;
    margin: 0 auto;
}

/* ============ FOOTER ============ */
.site-footer{
  padding:30px 0;
  border-top:1px solid var(--color-border);
  text-align:center;
  color:var(--color-text-soft);
  font-size:13px;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .order-grid, .info-grid, .benefits-grid, .ingredients-grid, .intro-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr; }
}

/* ========================================================
   ===== ĐOẠN CSS NÂNG CẤP MỚI BỔ SUNG CHO CÁC TÍNH NĂNG =====
   ======================================================== */

/* 1. Định dạng ảnh thật phần thành phần */
.ingredient-img-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

/* 2. Khung chứa slider 3 ảnh */
.carousel-image {
    background: #ffffff !important; 
    overflow: hidden;               
    padding: 20px;                  
    position: relative;
    width: 100%;
    aspect-ratio: 1/0.85;
}
.carousel-img-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;            
    display: none;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
}
.carousel-img-thumb.active { display: block; }

/* 3. Định dạng tấm ảnh thật hình oval ở phần đặt hàng */
.order-img-thumb {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1.25;
    object-fit: cover;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    display: block;
    margin: 0 auto;
}

/* 4. Giao diện POPUP THÀNH CÔNG */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.popup-overlay.active { opacity: 1; pointer-events: auto; }
.popup-content {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}
.popup-overlay.active .popup-content { transform: translateY(0); }
.popup-icon {
    width: 70px; height: 70px;
    background-color: #eef7ee;
    color: var(--color-green);
    font-size: 35px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.popup-content h2 { color: var(--color-maroon); font-size: 24px; margin-bottom: 12px; }
.popup-content p { color: var(--color-text); font-size: 16px; margin-bottom: 8px; }
.popup-content .popup-sub { color: var(--color-text-soft); font-size: 14px; line-height: 1.5; margin-bottom: 24px; }

/* 5. Hiệu ứng chuyển động VIDEO BACKGROUND HERO */
.hero-video-bg {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.hero-content { position: relative; z-index: 3; }

/* 6. Các chuyển động Cinematic lúc vào trang */
.anim-zoom-out { animation: cinemaZoom 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes cinemaZoom {
    from { transform: translate(-50%, -50%) scale(1.2); }
    to { transform: translate(-50%, -50%) scale(1); }
}
.anim-clear-blur { animation: clearBlur 2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes clearBlur {
    from { backdrop-filter: blur(15px); background: rgba(253, 251, 247, 0.95); }
    to { backdrop-filter: blur(3px); background: linear-gradient(135deg, rgba(253, 251, 247, 0.75) 0%, rgba(238, 243, 234, 0.4) 100%); }
}
.anim-entrance {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(5px);
    animation-name: easeEntrance;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
}
@keyframes easeEntrance {
    from { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 7. Hiệu ứng RÈM NHUNG ĐỎ ĐIỆN ẢNH HOÀNG GIA */
.curtain-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
    display: flex;
    overflow: hidden;
    pointer-events: auto;
    transition: visibility 0.6s ease;
}
.curtain-container.is-done { visibility: hidden; pointer-events: none; }
.curtain-panel {
    width: 50%; height: 100%;
    background: linear-gradient(90deg, #5a1618 0%, #8c2a2e 25%, #b84a4e 50%, #8c2a2e 75%, #5a1618 100%);
    background-size: 200% 100%;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6); 
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
    animation-fill-mode: forwards;
}
.curtain-panel.left { transform-origin: left center; animation-name: curtainOpenLeft; }
.curtain-panel.right { transform-origin: right center; animation-name: curtainOpenRight; }

.curtain-skip-btn {
    position: absolute;
    top: 24px; right: 24px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.curtain-skip-btn:hover { background: #ffffff; color: #8C2A2E; transform: scale(1.05); }

@keyframes curtainOpenLeft {
    0% { transform: translateX(0); filter: brightness(1); }
    100% { transform: translateX(-100%); filter: brightness(0.7); }
}
@keyframes curtainOpenRight {
    0% { transform: translateX(0); filter: brightness(1); }
    100% { transform: translateX(100%); filter: brightness(0.7); }
}
/* ===== HIỆU ỨNG CUỘN CHUỘT NÂNG CAO ===== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.95); /* Trượt lên và hơi thu nhỏ ban đầu */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); /* Chuyển động lướt lụa */
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1); /* Trở về vị trí chuẩn và nét căng */
}

/* Hiệu ứng trễ cho các thẻ con trong cùng một section (hiện lần lượt) */
.scroll-delay-1 { transition-delay: 0.2s; }
.scroll-delay-2 { transition-delay: 0.4s; }
.scroll-delay-3 { transition-delay: 0.6s; }

.hero-image-side { flex: 0 0 40%; display: flex; justify-content: center; }

/* Hiệu ứng Phóng to -> Thu nhỏ cho lọ thuốc */
.product-reveal {
    width: 100%;
    max-width: 450px;
    opacity: 0;
    animation: revealEffect 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-play-state: paused; /* Sẽ được JS "running" đúng lúc rèm đóng xong (script.js) */
}

@keyframes revealEffect {
    0% { transform: scale(1.8); opacity: 0; } /* Phóng to rất to */
    50% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; } /* Thu nhỏ về kích thước gốc hài hoà */
}


/* ===== VIDEO MINH HOẠ (PHƯƠNG ÁN 1) ===== */
.minh-hoa-section {
    padding: 80px 0;
    background-color: #000; /* Nền đen để tạo chiều sâu */
}

.minh-hoa-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
}

#autoplayVideo {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Phép thuật hoà trộn viền: Giữ lại để video tan vào nền đen */
    mix-blend-mode: screen; 
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 98%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 98%);
}

/* Layout 2 cột mới */
.composition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 80px 0;
}

.composition-text h2 { margin-bottom: 30px; }

/* Khối bọc icon và tiêu đề */
.item-header {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 15px;           /* Khoảng cách giữa ảnh và chữ */
    margin-bottom: 10px;
}

/* Video nằm nổi bật bên phải */
.composition-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 1. Thay đổi màu nền của cả section composition thành màu đen của video */
.composition-section {
    background-color: #0d0d0d; /* Màu này nên trùng với màu đen trong video của bạn */
    padding: 80px 0;
    color: #ffffff; /* Chữ phải chuyển sang màu trắng để nổi trên nền tối */
}

/* 2. Cập nhật lại màu chữ trong khối này để dễ đọc */
.composition-text h2 { color: #ffffff; }

/* 3. Tinh chỉnh Video: Loại bỏ mask-image, để video hiển thị nguyên bản */
#autoplayVideo {
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
    background: transparent; /* Loại bỏ background đen thừa */
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Thêm bóng đổ nhẹ để hũ thuốc nổi lên */
}

/* ============ THÀNH PHẦN (LAYOUT CHUẨN: ẢNH TRÁI - TEXT PHẢI) ============ */
.ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ingredient-item {
    display: flex;          /* Xếp Ảnh và Content ngang hàng */
    align-items: flex-start; /* Ảnh nằm trên cùng so với text */
    gap: 20px;
}

.icon-small {
    width: 70px;            /* Kích thước ảnh */
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;         /* Không cho ảnh bị co lại */
}

.content-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.content-box h3 {
    margin: 0;
    font-size: 20px;
    color: #f28b82;         /* Màu tiêu đề */
    font-family: var(--font-display);
}

.content-box p {
    margin: 0;
    color: #cccccc;
    font-size: 15px;
    line-height: 1.5;
}
/* Responsive: Trên Mobile video sẽ nằm trên, text nằm dưới */
@media (max-width: 900px) {
    .composition-grid { grid-template-columns: 1fr; gap: 30px; }
    .composition-video { order: -1; } /* Đẩy video lên trên */
}

/* Đảm bảo video hiển thị đẹp trong hình tròn */
.intro-circle-thumb {
    width: 160px;
    height: 160px;
    background-color: var(--color-bg-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    overflow: hidden; /* Cắt video thành hình tròn */
    position: relative;
}

.intro-circle-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Lấp đầy hình tròn */
}


.js-tilt {
    /* Tăng kích thước tối đa của lọ thuốc */
    max-width: 450px; /* Trước đây là 350px, bạn có thể tăng lên 500px nếu muốn to hơn nữa */
    width: 100%;      /* Đảm bảo nó luôn đầy khung */
    
    /* Hiệu ứng bóng đổ giúp tạo chiều sâu khi lọ to hơn */
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4));
    
    cursor: pointer;
    transition: transform 0.3s ease; /* Làm cho sự thay đổi kích thước mượt mà */
}

/* Thêm hiệu ứng phóng to nhẹ khi di chuột vào để tăng trải nghiệm */
.js-tilt:hover {
    transform: scale(1.05);
}

@keyframes floatAnimation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}


/* Khoảng cách giữa các thẻ sát lại một chút để tạo sự liên kết */
.benefits-grid-compact {
    display: flex;
    flex-direction: column;
    gap: 16px; 
    margin-top: 24px;
    margin-bottom: 40px; /* Đẩy nút Đặt mua ra xa để tạo không gian thở */
}

/* Biến thẻ thành UI Card hiện đại */
.benefit-card-small {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: #ffffff; /* Nền trắng tinh giúp nổi bật trên nền web kem nhạt */
    border: 1px solid rgba(0, 0, 0, 0.03); /* Viền cực kỳ mờ, gần như vô hình */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); /* Đổ bóng siêu mềm, tạo độ nổi 3D */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hiệu ứng nảy nhẹ và sáng lên khi di chuột */
.benefit-card-small:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: #f28b82; /* Hiện viền hồng nhạt khi hover */
}

/* Tạo background tròn nhỏ chứa Icon để trông gọn gàng hơn */
.icon-glow {
    width: 44px;
    height: 44px;
    background: var(--color-bg-alt); /* Dùng màu nền xanh nhạt hoặc hồng nhạt của web */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Tinh chỉnh lại Typography trong thẻ */
.text-content h3 {
    font-family: var(--font-body); /* Dùng font không chân cho gọn gàng */
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.text-content p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-maroon); /* Trùng màu đỏ sẫm của nút/hộp thuốc */
    margin: 0;
    font-weight: 500;
}

/* ========================================================
   1. ĐIỀU CHỈNH HEADER & LOGO NỔI BẬT
   ======================================================== */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: center; /* Đẩy Logo ra giữa */
}

.logo {
    font-size: 36px; /* Kích thước lớn hơn hẳn */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px; /* Tăng khoảng cách chữ cho sang trọng */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.05);
}

/* ========================================================
   2. NÚT ĐẶT HÀNG BAY (FLOATING BUTTON) Ở GÓC PHẢI DƯỚI
   ======================================================== */
.btn-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    padding: 16px 32px;
    font-size: 16px;
    box-shadow: 0 10px 25px rgba(91, 127, 94, 0.5);
    animation: pulse-glow 2s infinite; /* Hiệu ứng tỏa sáng thu hút ánh nhìn */
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(91, 127, 94, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(91, 127, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(91, 127, 94, 0); }
}

/* ========================================================
   3. HERO SECTION & VIDEO SẢN PHẨM MỚI
   ======================================================== */
/* Bỏ video nền, tạo nền xám nhạt để hòa quyện với video đập hộp */
.static-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #ececec 100%); 
    padding: 40px 0 60px;
    overflow: hidden;
}


/* ========================================================
   CẤU TRÚC HERO 2 LỚP VIDEO
   ======================================================== */
.video-hero {
    position: relative;
    /* Đảm bảo hero không bị chiều cao 0 */
    min-height: 85vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 1. Xử lý Video Nền (Lụa đào) */
.hero-bg-video {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.8) contrast(1.2);
    /* Dùng scale(1.05) phóng to 5% để đẩy biểu tượng ngôi sao ở góc ra khỏi màn hình */
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 1;
}

/* 2. Lớp phủ kính mờ (Glassmorphism) */
.video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dùng nền tối để nổi bật chữ */
    z-index: 2; /* Lớp phủ nằm trên video nền */
}

/* 3. Đẩy chữ và Video đập hộp nổi lên trên */
.hero-layout {
    display: flex;
    position: relative; /* Quan trọng: Để nội dung nổi lên trên */
    z-index: 3;         /* Nội dung nằm trên cùng */
    flex-direction: row;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung trong container */
    gap: 80px; /* Tăng khoảng cách giữa khối chữ và khối video */
}

/* Chữ hiển thị trên nền kính mờ nên dùng màu tối nguyên bản */
.video-hero .hero-title {
    color: var(--color-text); 
    text-shadow: none; 
}

/* Tắt bớt hiệu ứng bay nhảy cũ để khung hình trang trọng hơn */
.product-floating-container {
    flex: 0 0 45%;
}

/* 4. Định dạng Video Sản phẩm (Đập hộp) - Điểm nhấn chính */
.hero-product-video {
    width: 100%;
    max-width: 800px; /* Làm video to và hoành tráng hơn */
    border-radius: 16px;
    /* Viền trắng mỏng và bóng đổ ngả đỏ nhạt để tạo cảm giác 3D đắt tiền */
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 30px 60px rgba(140, 42, 46, 0.15); 
    transform: scale(1.05);
}

/* 5. Tối ưu cho thiết bị di động */
@media (max-width: 768px) {
    .hero-layout {
        flex-direction: column;   /* Logo/tên ở trên, video xuống dưới */
        align-items: center;
        text-align: center;
    }
    /* Làm phẳng hero-text-side để chèn video vào giữa: Logo -> Video -> Sub -> CTA */
    .hero-text-side { display: contents; }
    .hero-logo-container { order: 1; }
    .product-floating-container {
        order: 2;
        flex: none;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .hero-sub { order: 3; }
    .hero-text-side .btn-primary { order: 4; }
    .hero-trust { order: 5; }
    .hero-product-video {
        max-width: 82%;
        transform: scale(1);
    }
}

/* Khối chứa logo và tên thương hiệu */
.hero-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa theo chiều ngang */
    margin-bottom: 20px;
}

/* Ảnh con bướm */
.hero-butterfly-img {
    width: 180px; /* Kích thước phù hợp để không át video */
    height: auto;
    margin-bottom: 15px;
}

/* Tên thương hiệu */
.hero-brand-name {
    font-family: var(--font-display);
    font-size: 64px; /* Tăng font-size từ 48px lên 64px */
    color: #ffffff;
    margin: 0 0 20px 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Đổ bóng đậm hơn để tăng độ rõ */
    font-weight: 700;
}

/* ========================================================
   ===== SECTION HOẠT ĐỘNG THỰC TẾ (3 CỘT CỐ ĐỊNH) =====
   ======================================================== */
.activity-section {
    padding: 60px 0 20px; /* Căn chỉnh khoảng cách với Hero và Giới thiệu */
    background-color: var(--color-bg); 
}

.activity-grid {
    display: grid;
    /* Ép buộc luôn hiển thị 3 cột bằng nhau (1fr) trên mọi thiết bị */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.activity-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.activity-title {
    font-size: 20px;
    color: var(--color-maroon);
    margin-bottom: 15px;
    font-weight: 700;
}

/* Khung chứa ảnh/video */
.activity-media {
    width: 100%;
    /* Tỷ lệ 4:5 (dọc) giống Instagram để tối ưu không gian hiển thị người/sản phẩm */
    aspect-ratio: 4 / 5; 
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    margin-bottom: 12px;
    background-color: var(--color-border); /* Màu nền chờ khi media chưa load */
}

/* Đảm bảo ảnh/video lấp đầy khung mà không bị méo */
.media-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.activity-desc {
    font-size: 14px;
    color: var(--color-text-soft);
    margin: 0;
    line-height: 1.4;
}

/* --- Tối ưu hiển thị cho Mobile --- */
@media (max-width: 768px) {
    .activity-section {
        padding: 40px 0 10px;
    }
    
    .activity-grid {
        gap: 10px; /* Thu hẹp khoảng cách giữa các cột để vừa màn hình điện thoại */
        padding: 0 10px; /* Giảm padding hai bên để có thêm diện tích */
    }

    .activity-title {
        font-size: 16px; /* Chữ nhỏ lại để không bị rớt dòng xấu */
        margin-bottom: 10px;
    }

    .activity-desc {
        font-size: 12px; /* Mô tả nhỏ gọn lại */
    }
    
    .activity-media {
        border-radius: 12px; /* Bo góc mềm mại hơn cho kích thước nhỏ */
    }
}

/* ========================================================
   ===== PHẦN GỘP THÔNG TIN & THÀNH PHẦN (LUÔN 2 CỘT) =====
   ======================================================== */
.combined-info-section {
    background-color: #0d0d0d; /* Giữ nền tối cho video nổi bật */
    padding: 70px 0;
    color: #ffffff;
}

.combined-grid {
    display: grid;
    grid-template-columns: 55% 45%; /* Chia tỷ lệ: Chữ 55%, Video 45% */
    gap: 30px;
    align-items: center;
}

.combined-text h2 {
    color: #ffffff;
    font-size: clamp(22px, 3vw, 32px);
    margin-bottom: 20px;
}

.compact-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compact-info-list li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    color: #cccccc;
    line-height: 1.4;
}

/* Thêm icon dấu tích màu hồng trước mỗi dòng */
.compact-info-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #f28b82; 
    font-weight: bold;
}

.compact-info-list li strong {
    color: #ffffff;
}

.combined-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

.combined-video video {
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* --- TỐI ƯU ÉP 2 CỘT TRÊN MOBILE --- */
@media (max-width: 768px) {
    .combined-info-section {
        padding: 40px 0;
    }

    .combined-grid {
        grid-template-columns: 55% 45%; /* BẮT BUỘC giữ nguyên 2 cột trên điện thoại */
        gap: 12px; /* Thu hẹp khoảng cách giữa chữ và video */
    }
    
    .combined-text h2 {
        font-size: 18px; /* Chữ tiêu đề nhỏ lại để không chiếm chỗ */
        margin-bottom: 12px;
        line-height: 1.3;
    }
    
    .compact-info-list {
        gap: 8px; /* Các dòng sát lại nhau hơn */
    }

    .compact-info-list li {
        font-size: 12px; /* Thu nhỏ cỡ chữ mô tả để tránh bị tràn màn hình */
        padding-left: 16px;
    }
    
    .combined-video video {
        border-radius: 10px; /* Bo góc video nhỏ hơn trên điện thoại */
    }
}

/*Dược sĩ*/
/* ========================================================
   ===== PHẦN DƯỢC SĨ TƯ VẤN 1:1 (LUÔN 2 CỘT) =====
   ======================================================== */
.pharmacist-section {
    background-color: var(--color-bg-alt); /* Lấy màu xanh nhạt/kem của trang làm nền */
    padding: 70px 0;
}

.pharmacist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia đều 50% - 50% trên Laptop */
    gap: 50px;
    align-items: center;
}

.pharmacist-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08); /* Đổ bóng mềm cho ảnh */
    object-fit: cover;
    aspect-ratio: 4 / 3; /* Tỷ lệ khung hình đẹp cho Laptop */
}

.pharmacist-content h2 {
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 16px;
    color: var(--color-text);
}

.pharmacist-desc {
    color: var(--color-text-soft);
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.6;
}

/* --- TỐI ƯU ÉP BẮT BUỘC 2 CỘT TRÊN MOBILE --- */
@media (max-width: 768px) {
    .pharmacist-section {
        padding: 40px 0;
    }

    .pharmacist-grid {
        /* BẮT BUỘC giữ nguyên 2 cột trên điện thoại (Ảnh 45% - Chữ 55%) */
        grid-template-columns: 45% 55%; 
        gap: 15px; /* Thu hẹp khoảng cách giữa ảnh và chữ */
    }

    .pharmacist-image img {
        border-radius: var(--radius-md);
        aspect-ratio: 1 / 1; /* Cắt ảnh thành hình vuông trên Mobile để tiết kiệm không gian */
    }

    .pharmacist-content h2 {
        font-size: 18px; /* Thu nhỏ tiêu đề */
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .pharmacist-desc {
        font-size: 13px; /* Thu nhỏ chữ mô tả */
        margin-bottom: 15px;
        line-height: 1.4;
        /* Kỹ thuật cắt bớt chữ nếu quá dài trên điện thoại (chỉ hiện 3 dòng) */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .btn-tuvan {
        padding: 10px 18px;
        font-size: 13px; /* Nút bấm gọn lại để không bị tràn */
    }
}

/* ========================================================
   ===== E-COMMERCE MOCKUP (COMPACT LẠI & CÓ THANH CUỘN) =====
   ======================================================== */
.ecommerce-review-section { background-color: var(--color-bg); padding: 40px 0; }
.ecommerce-mockup {
    max-width: 420px; margin: 0 auto; background: #ffffff;
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    overflow: hidden; font-family: sans-serif; color: #222;
}

/* Ảnh sản phẩm & Tags bấm được */
.eco-product-image { position: relative; width: 100%; }
.eco-product-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.eco-tags-row { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; z-index: 10; /* Đưa các nút nổi lên trên cùng để nhận click */}
.eco-clickable-tag { 
    cursor: pointer; 
    transition: filter 0.2s, transform 0.1s; 
    position: relative; /* Cần thiết để z-index hoạt động tốt nếu có */
}        
.eco-clickable-tag:active { filter: brightness(0.85); transform: scale(0.98); }
.eco-clickable-tag:hover { filter: brightness(1.1); } /* Thêm hiệu ứng hover để dễ nhận biết có thể bấm */
.eco-tag-item { flex: 1; text-align: center; padding: 4px 2px; color: #fff; font-size: 10px; line-height: 1.1; }
.eco-tag-item.tag-cyan { background: linear-gradient(180deg, #B0585C, #8C2A2E); }
.eco-tag-item.tag-green { background: linear-gradient(180deg, #F1663E, #E8542F); }
.eco-tag-item.tag-yellow { background: linear-gradient(180deg, #E7B96A, #CF9A3C); color: #5A1618; }
.tag-top { font-weight: 600; } .tag-bot { font-weight: 800; font-size: 11px; }

/* Thu gọn padding, margin các khối chung */
.eco-price-block, .eco-title-block, .eco-shipping-block, .eco-reviews-header, .eco-review-item {
    padding: 8px 12px; border-bottom: 1px solid #f2f2f2;
}

/* Giá, Voucher */
.eco-price-block { display: flex; align-items: center; gap: 8px; border-bottom: none; padding-bottom: 4px; }
.eco-discount-badge { background: #E8542F; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 4px; border-radius: 4px; }
.eco-current-price { color: #E8542F; font-size: 22px; font-weight: 700; }
.eco-old-price { color: #999; font-size: 13px; text-decoration: line-through; }
.eco-voucher-block { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #fffafaf5; margin-bottom: 6px; }
.eco-voucher-content { background: #ffebee; color: #E8542F; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; display: flex; gap: 6px; }
.eco-voucher-divider { color: #f48fb1; }

/* Tiêu đề & Rating */
.eco-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.eco-title { font-size: 14px; line-height: 1.3; margin: 0; font-weight: 500; }
.eco-bookmark { width: 20px; height: 20px; flex-shrink: 0; color: #666; }
.eco-rating-sales { display: flex; align-items: center; font-size: 12px; color: #555; gap: 6px; }
.eco-star-icon { color: #ffce3d; } .eco-separator { color: #ddd; }

/* Vận chuyển */
.eco-shipping-block { gap: 8px; }
.eco-shipping-row { display: flex; align-items: center; font-size: 12px; margin-bottom: 2px; }
.eco-shipping-icon, .eco-guarantee-icon { font-size: 14px; margin-right: 6px; }
.eco-freeship-text { color: #8C2A2E; font-weight: 600; margin-right: 6px; }
.eco-shipping-fee { color: #999; }
.eco-guarantee-text { color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%; }

.eco-divider-thick { height: 6px; background-color: #f5f5f5; }

/* Review Header */
.eco-reviews-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
.eco-reviews-title { font-size: 14px; font-weight: 600; }
.eco-reviews-overall { display: flex; align-items: center; gap: 4px; }
.eco-overall-score { font-size: 13px; font-weight: 500; color: #E8542F; }
.eco-stars-group { color: #ffce3d; font-size: 12px; letter-spacing: 1px; }

/* VÙNG CUỘN DANH SÁCH ĐÁNH GIÁ (SCROLL) */
.eco-reviews-scroll-container {
    max-height: 380px; /* Giới hạn chiều cao */
    overflow-y: auto;  /* Tạo thanh cuộn dọc */
    overflow-x: hidden;
    padding-bottom: 10px;
}
/* Tùy chỉnh thanh cuộn cho mượt và đẹp */
.eco-reviews-scroll-container::-webkit-scrollbar { width: 4px; }
.eco-reviews-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; }
.eco-reviews-scroll-container::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.eco-reviews-scroll-container::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* Item Review bên trong thanh cuộn */
.eco-review-item { padding: 10px 12px; border-bottom: 1px dashed #eee; }
.eco-review-item:last-child { border-bottom: none; }
.eco-review-user { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.eco-avatar { width: 20px; height: 20px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.eco-avatar svg { width: 14px; height: 14px; }
.eco-username { font-size: 12px; color: #333; font-weight: 500; }
.eco-stars-group.small { font-size: 10px; margin-bottom: 4px; }
.eco-review-comment { font-size: 13px; line-height: 1.4; color: #333; }


/* ========================================================
   ===== TỐI ƯU KHÔNG GIAN SECTION ĐẶT HÀNG (COMPACT) =====
   ======================================================== */
/* Ép nhỏ khoảng cách viền của cả khu vực */
.order-section { padding: 40px 0 !important; }
.order-grid { gap: 30px !important; align-items: flex-start; }
.order-compact-title { font-size: clamp(20px, 2.2vw, 24px) !important; margin-bottom: 12px !important; line-height: 1.3 !important; }

/* Tối ưu khối Giá */
.compact-price { display: flex; align-items: center; gap: 10px; margin-bottom: 16px !important; }
.compact-price .price-now { font-size: 28px; margin: 0; }
.small-tag { padding: 2px 8px; font-size: 11px; margin: 0; }

/* Đếm ngược ngang (tiết kiệm 50% diện tích) */
.countdown-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.countdown-inline .countdown-title { margin: 0; font-size: 13px; font-weight: 600; color: #555; }
.countdown-inline .countdown-timer { display: flex; align-items: center; gap: 4px; }
.countdown-inline .time-box {
    background: var(--color-maroon); color: #fff;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 14px; font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.countdown-inline .time-colon { font-size: 16px; font-weight: bold; color: var(--color-maroon); margin: 0 2px; }

/* Khối Combo Quà Tặng Đẹp Mắt */
.combo-gift-box {
    display: flex;
    align-items: center;
    background: #fff5f5;
    border: 1.5px dashed #f48fb1;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 16px;
    gap: 14px;
}
.combo-images {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.combo-img {
    width: 55px; height: 55px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.combo-plus {
    font-weight: 900;
    color: #E8542F;
    font-size: 20px;
}
.combo-text { display: flex; flex-direction: column; gap: 5px; }
.combo-tag {
    font-size: 10px; font-weight: 700;
    background: #E8542F; color: #fff;
    padding: 2px 6px; border-radius: 4px;
    align-self: flex-start;
}
.combo-desc { font-size: 13px; color: #222; line-height: 1.4; }

/* Thu nhỏ Form Đặt Hàng */
.compact-form { padding: 20px !important; }
.compact-form .form-field { margin-bottom: 0; }
.compact-form label { display: none; } /* Ẩn thẻ label để tiết kiệm chiều dọc, dùng placeholder thay thế */

/* Tối ưu cực đại cho màn hình Mobile */
@media (max-width: 768px) {
    .countdown-inline { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .combo-gift-box { padding: 10px; gap: 10px; flex-direction: column; text-align: center; }
    .combo-tag { align-self: center; }
    .combo-img { width: 50px; height: 50px; }
}

/* ========================================================
   ===== TỐI ƯU LẠI MÀU SẮC NÚT (CHUYỂN SANG ĐỎ MẬN) =====
   ======================================================== */
.btn-primary {
    background: var(--color-maroon) !important; /* Đổi toàn bộ nút sang Đỏ mận */
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(140, 42, 46, 0.3) !important;
}
.btn-primary:hover {
    background: var(--color-maroon-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(110, 31, 34, 0.4) !important;
}

/* ========================================================
   ===== FIX BỐ CỤC ĐẶT HÀNG (ẢNH TO TRÁI, FORM HẸP PHẢI) =====
   ======================================================== */
.order-grid-fixed {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ép buộc luôn có 2 cột trên Laptop */
    gap: 60px;
    align-items: center;
}

/* Ép Form hẹp lại, không cho giãn hết cỡ */
.order-content {
    max-width: 480px; 
    margin: 0 auto;
    width: 100%;
}

.order-compact-title {
    font-size: clamp(22px, 2.5vw, 28px) !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
}

/* Phân cấp ảnh trong phần Combo: Eva to, Gel nhỏ */
.combo-images {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.combo-img.main-img {
    width: 70px; 
    height: 70px; /* Ảnh sản phẩm chính to hơn */
}
.combo-img.gift-img {
    width: 45px; 
    height: 45px; /* Ảnh quà tặng nhỏ hơn */
    border: 2px solid #f48fb1; /* Thêm viền hồng để phân biệt quà */
}

/* Tối ưu lại cho Mobile */
@media (max-width: 900px) {
    .order-grid-fixed {
        grid-template-columns: 1fr; /* Về 1 cột trên điện thoại */
        gap: 30px;
    }
    .order-content { max-width: 100%; } /* Thả nổi kích thước trên mobile */
    .order-image { display: flex; justify-content: center; }
    .order-img-thumb { max-width: 80%; }
}

/* ========================================================
   ===== TINH CHỈNH MÀU SẮC & KHOẢNG CÁCH FORM ĐẶT HÀNG =====
   ======================================================== */

/* 1. ĐỔI MÀU NỀN CHUNG: Chuyển từ xanh lá nhạt sang gradient hồng/kem nhạt để tone-sur-tone với sản phẩm */
.order-section {
    background: linear-gradient(135deg, #fffcfc 0%, #ffebeb 100%) !important;
}

/* 2. CHỈNH MÀU GIÁ TIỀN: Thêm hiệu ứng Gradient (Chuyển sắc) từ đỏ tươi sang đỏ mận + Đổ bóng nhẹ */
.compact-price .price-now {
    background: linear-gradient(90deg, #E8542F 0%, #8C2A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 34px !important;
    font-weight: 800;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 2px 4px rgba(229, 57, 53, 0.2)); 
    margin-right: 8px !important;
}

/* 3. NỚI RỘNG KHOẢNG CÁCH CÁC Ô NHẬP LIỆU */
.compact-form .form-row {
    gap: 15px !important; /* Khoảng cách ngang giữa 2 ô */
    margin-bottom: 15px !important; /* Khoảng cách dọc giữa hàng trên và hàng dưới */
}

/* Tinh chỉnh lại viền của ô nhập liệu cho mềm mại và hợp màu nền mới */
.compact-form .form-field input {
    border: 1px solid #f8caca !important;
    background: #ffffff !important;
    padding: 14px 16px !important; /* Làm ô nhập liệu mập mạp, dễ bấm hơn */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.compact-form .form-field input:focus {
    outline: 2px solid var(--color-maroon) !important;
    border-color: var(--color-maroon) !important;
    background: #fff !important;
}
/* ========================================================
   ===== HIỆU ỨNG PHÓNG TO ẢNH (LIGHTBOX) =====
   ======================================================== */
/* Hiệu ứng khi rê chuột vào ảnh quà tặng nhỏ */
.zoomable-img {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zoomable-img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(140, 42, 46, 0.3);
}

/* Khung nền mờ phủ toàn màn hình */
.image-zoom-overlay {
    display: none; /* Ẩn mặc định */
    position: fixed;
    z-index: 100000; /* Nổi lên trên mọi thứ */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

/* Kích hoạt hiển thị */
.image-zoom-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Ảnh được phóng to */
.zoomed-image {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

/* Nút X đóng popup */
.close-zoom {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.close-zoom:hover {
    color: #f48fb1; /* Chuyển màu hồng khi hover */
}

@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* ========================================================
   ===== TỐI ƯU CHUYỂN ĐỔI (GHÉP TỪ BẢN TỐI ƯU) =====
   ===== Đặt cuối file để ghi đè các quy tắc phía trên =====
   ======================================================== */

/* 1. RÚT GỌN MÀN RÈM (giảm ma sát cho traffic trả phí) */
.curtain-panel{ animation-duration: 0.9s !important; }

/* 2. NÚT NỔI TỰ ẨN KHI ĐANG XEM HERO (chống va chạm CTA) */
.btn-floating{
  transition: opacity .3s ease, transform .3s ease;
  animation: pulse-glow-cta 2s infinite; /* đổi phát sáng xanh -> đỏ mận */
}
.btn-floating.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}
@keyframes pulse-glow-cta {
  0%   { box-shadow: 0 0 0 0 rgba(140, 42, 46, 0.7); }
  70%  { box-shadow: 0 0 0 15px rgba(140, 42, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(140, 42, 46, 0); }
}

/* 3. HERO GỌN LẠI TRÊN MOBILE (đưa CTA lên trên fold) */
@media (max-width: 768px){
  .video-hero{ min-height: auto; padding: 24px 0 44px; }
  .hero-layout{ gap: 22px; }
  .hero-brand-name{ font-size: 42px; }
  .hero-butterfly-img{ width: 120px; margin-bottom: 8px; }
  .hero-sub{ font-size: 16px; margin-bottom: 20px; }
  .hero-product-video{ max-width: 80%; }
}

/* 4. BADGE TIN CẬY TẠI ĐIỂM CHỐT ĐƠN */
.order-trust-badges{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  list-style: none;
}
.order-trust-badges li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}
.order-trust-badges strong{ color: var(--color-maroon); }

/* 5. HOTLINE DƯỚI NÚT TƯ VẤN */
.pharmacist-hotline{
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-soft);
}
.pharmacist-hotline a{ color: var(--color-maroon); font-weight: 700; }

/* 6. FOOTER PHÁP NHÂN */
.footer-company{ margin: 0 0 6px; color: var(--color-text); }
.footer-address{ margin: 0 0 4px; }
.footer-address a{ color: var(--color-maroon); font-weight: 700; }
.footer-disclaimer{
  margin: 14px auto 10px;
  max-width: 720px;
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-soft);
}

/* 7. GIỮ THANH CUỘN REVIEW TRÊN MOBILE (gọn, không chiếm nhiều chỗ) */
@media (max-width: 768px){
  .eco-reviews-scroll-container{ max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ========================================================
   ===== CẤU TRÚC MỚI: HERO TRUST · VẤN ĐỀ · FAQ =====
   ======================================================== */

/* Dòng trust dưới nút Hero */
.hero-trust{
  display: inline-block;
  margin-top: 18px;
  padding: 8px 16px;
  font-size: 13.5px;
  color: #fff;
  font-weight: 500;
  background: rgba(44, 12, 13, 0.35);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
@media (max-width: 768px){ .hero-trust{ font-size: 11px; margin-top: 12px; padding: 7px 12px; } }

/* Section VẤN ĐỀ / NỖI ĐAU */
.problem-section{ padding: 70px 0; background: var(--color-bg); }
.problem-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 820px;
  margin: 30px auto 0;
}
.problem-card{
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-maroon);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.problem-icon{ font-size: 26px; flex-shrink: 0; line-height: 1; }
.problem-card p{
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}
.problem-empathy{
  max-width: 680px;
  margin: 30px auto 24px;
  color: var(--color-text-soft);
  font-size: 15px;
}
.problem-empathy strong{ color: var(--color-maroon); }
@media (max-width: 768px){
  .problem-section{ padding: 44px 0; }
  .problem-grid{ grid-template-columns: 1fr; gap: 12px; }
  .problem-card{ padding: 14px 16px; }
  .problem-card p{ font-size: 14px; }
}

/* Tiêu đề cụm Hoạt động (bằng chứng) */
.activity-heading{ margin-bottom: 6px; }

/* Section FAQ (accordion native) */
.faq-section{ padding: 70px 0; background: var(--color-bg-alt); }
.faq-list{ max-width: 760px; margin: 30px auto 0; }
.faq-item{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 0 20px;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-size: 22px;
  color: var(--color-maroon);
  font-weight: 400;
  flex-shrink: 0;
}
.faq-item[open] summary::after{ content: "–"; }
.faq-item p{
  margin: 0 0 16px;
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 768px){
  .faq-section{ padding: 44px 0; }
  .faq-item summary{ font-size: 14px; }
}

/* ========================================================
   ===== VIDEO KHÁCH HÀNG THỰC TẾ (TESTIMONIAL) =====
   ======================================================== */
.testimonial-video-section{ padding: 70px 0; background: var(--color-bg); }
.testi-video-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 920px;
  margin: 34px auto 0;
}
.testi-video-card{ margin: 0; }
.testi-video-card video{
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 10px 26px rgba(140, 42, 46, 0.14);
  display: block;
  cursor: pointer;
}
.testi-video-card figcaption{
  text-align: center;
  margin-top: 10px;
  line-height: 1.3;
}
.testi-video-card figcaption strong{ display: block; font-size: 14px; color: var(--color-text); }
.testi-video-card figcaption span{ font-size: 12px; color: var(--color-text-soft); }
@media (max-width: 768px){
  .testimonial-video-section{ padding: 44px 0; }
  .testi-video-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .testi-video-card figcaption strong{ font-size: 13px; }
  .testi-video-card figcaption span{ font-size: 11px; }
}

/* Video Dược sĩ/Bác sĩ trong section tư vấn (dọc, không để bị kéo quá to) */
.pharmacist-video{
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
  background: #000;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
@media (max-width: 768px){
  .pharmacist-video{ max-width: 100%; border-radius: var(--radius-md); }
}

/* ========================================================
   ===== GIỚI THIỆU: GIỮ 3 CỘT TRÊN MOBILE (tiết kiệm chiều cao) =====
   ======================================================== */
@media (max-width: 900px){
  .intro-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 768px){
  .intro-section{ padding: 44px 0; }
  .intro-grid{ gap: 10px; margin-bottom: 28px; }
  .intro-circle-thumb{ width: 92px; height: 92px; margin-bottom: 10px; }
  .intro-item p{ font-size: 11.5px; line-height: 1.35; max-width: 100%; }
}
@media (max-width: 380px){
  .intro-circle-thumb{ width: 80px; height: 80px; }
  .intro-item p{ font-size: 10.5px; }
}