/* ===================== HIỆU ỨNG & TINH CHỈNH TRÌNH BÀY — UYÊN NHIÊN ===================== */

/* --- Reveal on scroll (chỉ ẩn khi JS chạy; không JS thì luôn hiện) --- */
html.un-js .un-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.un-js .un-reveal.un-in { opacity: 1; transform: none; }

/* Trượt so le cho các cột trong 1 hàng */
.un-reveal[data-un-delay="1"] { transition-delay: .10s; }
.un-reveal[data-un-delay="2"] { transition-delay: .20s; }
.un-reveal[data-un-delay="3"] { transition-delay: .30s; }
.un-reveal[data-un-delay="4"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .un-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero: nền dự phòng xanh đậm (khi video/poster chưa tải) + bóng chữ */
.un-hero.wp-block-cover { background-color: #1f331f !important; }
.un-hero video.wp-block-cover__video-background,
.un-hero img.wp-block-cover__image-background { z-index: 0; }
.un-hero .wp-block-cover__inner-container { text-shadow: 0 2px 22px rgba(12,20,12,.65); }

/* --- Hero: chữ hiện dần khi tải trang --- */
.un-hero .wp-block-cover__inner-container > * {
  opacity: 0;
  animation: unHeroIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.un-hero .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: .15s; }
.un-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: .30s; }
.un-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: .45s; }
.un-hero .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: .60s; }
.un-hero .wp-block-cover__inner-container > *:nth-child(5) { animation-delay: .75s; }
@keyframes unHeroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Logo trên headline hero */
.un-hero-logo { margin-bottom: 1.2rem !important; }
.un-hero-logo img {
  width: 112px; height: 112px; border-radius: 50%;
  border: 2px solid rgba(198,154,76,.8);
  box-shadow: 0 10px 34px rgba(0,0,0,.4), 0 0 0 8px rgba(246,241,231,.06);
  object-fit: cover;
}

/* Video nền hero: zoom chậm cho sống động */
.un-hero video.wp-block-cover__video-background {
  animation: unKenBurns 24s ease-in-out infinite alternate;
}
@keyframes unKenBurns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* Mũi tên cuộn xuống ở hero */
.un-hero::after {
  content: "";
  position: absolute; left: 50%; bottom: 26px;
  width: 22px; height: 22px; margin-left: -11px;
  border-right: 2px solid rgba(246,241,231,.75);
  border-bottom: 2px solid rgba(246,241,231,.75);
  transform: rotate(45deg);
  animation: unBounce 1.8s infinite;
  z-index: 2;
}
@keyframes unBounce { 0%,100%{ transform: rotate(45deg) translateY(0);} 50%{ transform: rotate(45deg) translateY(9px);} }

/* --- Ảnh: phóng nhẹ khi rê chuột --- */
.wp-block-image { overflow: hidden; border-radius: 16px; }
.wp-block-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); display: block; width: 100%; }
.wp-block-image:hover img { transform: scale(1.05); }

/* Gallery: bo góc + hover nổi */
.wp-block-gallery .wp-block-image { border-radius: 14px; box-shadow: 0 1px 3px rgba(38,38,31,.08); }
.wp-block-gallery .wp-block-image:hover { box-shadow: 0 20px 44px -20px rgba(46,74,47,.5); }

/* --- Nút: hiệu ứng nâng + sáng --- */
.wp-block-button__link { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(46,74,47,.55); }

/* --- Bảng đẹp hơn --- */
.wp-block-table table { border-collapse: separate; border-spacing: 0; width: 100%; }
.wp-block-table td, .wp-block-table th { padding: .7rem 1rem; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: rgba(46,74,47,.05); }

/* --- Dải số liệu nổi bật --- */
.un-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.un-stat-num { font-family: "Montserrat", Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; color: var(--un-gold); line-height: 1; }
.un-stat-label { font-size: .95rem; margin-top: .4rem; color: #ece2cf; }
@media (max-width: 781px){ .un-stats { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; } }

/* --- Nút liên hệ nổi (floating) --- */
.un-fab { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; }
.un-fab a {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 24px; color: #fff;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.4);
  transition: transform .25s ease;
}
.un-fab a:hover { transform: scale(1.1); }
.un-fab .un-fab-call { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); animation: unPulse 2s infinite; }
.un-fab .un-fab-call svg { display: block; width: 26px; height: 26px; }
.un-fab .un-fab-zalo { background: #0068ff; font-size: 15px; font-weight: 700; font-family: sans-serif; }
.un-fab .un-fab-fb { background: #1877f2; font-size: 30px; font-weight: 800; font-family: Georgia, "Times New Roman", serif; line-height: 1; padding-bottom: 4px; }
.un-fab .un-fab-top { background: rgba(46,74,47,.85); font-size: 20px; }
@keyframes unPulse { 0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.6);} 70%{ box-shadow: 0 0 0 16px rgba(34,197,94,0);} 100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0);} }

/* --- Eyebrow có gạch trang trí --- */
.un-eyebrow::before, .un-eyebrow::after {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: currentColor; vertical-align: middle; margin: 0 .5rem; opacity: .6;
}

/* --- Tiêu đề Montserrat: IN ĐẬM, siết chữ nhẹ cho chuyên nghiệp --- */
.wp-block-heading, h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; }
h1.wp-block-heading { font-weight: 800; letter-spacing: -.03em; }
h2.wp-block-heading { letter-spacing: -.02em; }

/* --- Font viết tay Dancing Script: tiêu đề hero (trong cover) + câu trích dẫn --- */
.wp-block-cover h1.wp-block-heading,
.un-hero h1.wp-block-heading {
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  font-size: clamp(3.4rem, 8.5vw, 6.2rem);
}
.wp-block-quote,
.wp-block-quote p,
.wp-block-pullquote,
.wp-block-pullquote p,
.wp-block-heading[style*="italic"] {
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
}

/* ===== Header: ảnh nền chìm + đường kẻ vàng mảnh ===== */
header.wp-block-template-part > .wp-block-group,
.wp-site-blocks > header .wp-block-group.alignfull:first-child {
  background-image:
    linear-gradient(rgba(246,241,231,0.90), rgba(246,241,231,0.93)),
    url(/wp-content/uploads/2026/07/thaomoc-flatlay.jpg);
  background-size: cover;
  background-position: center 30%;
  border-bottom: 1px solid rgba(198,154,76,0.22);
}
@media (prefers-color-scheme: dark) { /* giữ header sáng, không đổi theo dark OS */
  header.wp-block-template-part > .wp-block-group { background-color: #f6f1e7; }
}

/* ===================== HIỆU ỨNG LUNG LINH (đợt tối ưu) ===================== */

/* Ánh sáng quét ngang nút khi rê chuột */
.wp-block-button__link { position: relative; overflow: hidden; }
.wp-block-button__link::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.wp-block-button__link:hover::after { animation: unShine .85s ease; }
@keyframes unShine { to { left: 140%; } }

/* Số liệu: phát sáng nhẹ + con số động */
.un-stat-num { text-shadow: 0 0 26px rgba(198,154,76,.35); transition: transform .3s ease; }
.un-stats > div:hover .un-stat-num { transform: translateY(-4px); }

/* Divider hình lá giữa các mục */
.un-leaf {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto; color: var(--un-gold); opacity: .9;
}
.un-leaf::before, .un-leaf::after {
  content: ""; height: 1px; width: 60px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.un-leaf::after { background: linear-gradient(90deg, currentColor, transparent); }
.un-leaf svg { width: 26px; height: 26px; }

/* Section tối: lớp sáng gradient chuyển động rất nhẹ (chiều sâu) */
.un-glow { position: relative; overflow: hidden; }
.un-glow::before {
  content: ""; position: absolute; top: -40%; left: -20%; width: 60%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(198,154,76,.12), transparent 70%);
  animation: unFloat 14s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes unFloat { from { transform: translate(0,0); } to { transform: translate(40%, 10%); } }

/* Ảnh trong khung: lớp bóng đổ mềm + viền sáng khi hover */
.wp-block-image { box-shadow: 0 10px 30px -18px rgba(38,38,31,.5); }

/* Thẻ sản phẩm: viền vàng mảnh khi hover */
.un-card { position: relative; }
.un-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s ease;
}
.un-card:hover::after { box-shadow: inset 0 0 0 1.5px rgba(198,154,76,.6); }

/* Eyebrow: ánh vàng lấp lánh nhẹ */
.un-eyebrow { background: linear-gradient(90deg, #dcb45c, #f4d78e, #dcb45c); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: unSheen 6s linear infinite; }
@keyframes unSheen { to { background-position: 200% center; } }
.un-eyebrow::before, .un-eyebrow::after { -webkit-text-fill-color: initial; }

/* Khung video bo tròn có viền vàng */
.un-video-frame { border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px -28px rgba(0,0,0,.6); border: 1px solid rgba(198,154,76,.4); }
.un-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Khung video dọc kiểu reels (video sản phẩm quay dọc) */
.un-reels { max-width: 300px; margin-left: auto; margin-right: auto; aspect-ratio: 9 / 16; }

/* Thẻ cảm nhận khách hàng */
.un-stars { color: #e0a92e; letter-spacing: 2px; font-size: 1.05rem; }
.un-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--un-green); color: #f6f1e7;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Montserrat", Georgia, serif; font-weight: 700; font-size: 1.1rem; flex: 0 0 auto;
  object-fit: cover; overflow: hidden; border: 2px solid rgba(198,154,76,.5);
}
.un-who { display: flex; align-items: center; gap: 12px; }
.un-who b { display: block; line-height: 1.2; }
.un-who span { font-size: .85rem; color: var(--un-green-soft); }

/* Lớp ảnh nền mờ cho section (sinh động mà vẫn đọc rõ chữ) */
.un-section-bg { position: relative; overflow: hidden; }
.un-section-bg > * { position: relative; z-index: 1; }
.un-section-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/wp-content/uploads/2026/07/thaomoc-flatlay.jpg) center/cover no-repeat;
  opacity: .07;
}

/* ===== Footer: chữ sáng, dễ đọc, cân đối ===== */
.un-footer a { color: #ddd3bf !important; text-decoration: none; transition: color .2s ease; }
.un-footer a:hover { color: #e6c67a !important; text-decoration: underline; text-underline-offset: 3px; }
.un-footer .un-eyebrow { margin-bottom: .6rem; }
.un-footer-bottom { gap: 10px 28px; align-items: center; }

/* ===== Logo ở footer: logo + tên thương hiệu cùng hàng ===== */
.un-footer-brand { gap: 16px; margin-bottom: var(--wp--preset--spacing--40, 1.4rem); }
.un-footer-brand h3 { margin: 0; line-height: 1.15; }
.un-footer-logo { box-shadow: none !important; overflow: visible !important; border-radius: 0 !important; margin: 0 !important; flex: 0 0 auto; }
.un-footer-logo img {
  width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid rgba(198,154,76,.65);
  animation: unLogoGlow 4.5s ease-in-out infinite alternate;
}
@keyframes unLogoGlow {
  from { box-shadow: 0 0 0 5px rgba(246,241,231,.04), 0 0 12px rgba(198,154,76,.18); }
  to   { box-shadow: 0 0 0 5px rgba(246,241,231,.08), 0 0 28px rgba(198,154,76,.45); }
}

/* ===== Mục Kiểm nghiệm & Chứng nhận ===== */
.un-kiemnghiem .wp-block-image { max-width: 760px; margin-left: auto; margin-right: auto; }
.un-kiemnghiem .wp-block-image img { width: 100%; height: auto; transition: transform .3s ease; }
.un-kiemnghiem .wp-block-image a:hover img { transform: scale(1.015); }

/* ===== Nút vàng: sáng & nổi bật hơn (có quầng sáng) ===== */
.wp-block-button__link.has-gold-background-color {
  background: linear-gradient(135deg, #e6bf66 0%, #c99f4e 100%) !important;
  box-shadow: 0 8px 22px -6px rgba(198,154,76,.5);
}
.un-hero .wp-block-button__link.has-gold-background-color {
  box-shadow: 0 10px 30px -4px rgba(230,191,102,.75);
  animation: unBtnPulse 2.6s ease-in-out infinite;
}
@keyframes unBtnPulse {
  0%,100% { box-shadow: 0 10px 30px -6px rgba(230,191,102,.55); }
  50%     { box-shadow: 0 12px 38px -4px rgba(230,191,102,.9); }
}

/* --- Cuộn mượt + mềm mại --- */
html { scroll-behavior: smooth; }

/* ==================== RESPONSIVE: TABLET & MOBILE ==================== */
html, body { overflow-x: hidden; max-width: 100%; }
.wp-site-blocks { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }
.wp-block-cover__video-background, .wp-block-cover__image-background { max-width: none; }
* { min-width: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .un-hero { min-height: 74vh; }
  .un-video-frame { aspect-ratio: 16/11; }
}

/* Mobile */
@media (max-width: 781px) {
  /* Ép mọi khối không vượt quá bề rộng cha (tránh 100vw dính thanh cuộn) */
  .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover,
  .wp-block-cover__inner-container, .un-stats, .wp-block-gallery, .wp-block-buttons, .wp-block-image {
    max-width: 100% !important;
  }
  .wp-block-columns { flex-wrap: wrap !important; }
  .un-hero .wp-block-cover__inner-container {
    width: 100% !important; max-width: 100% !important;
    padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important;
  }
  .un-hero .wp-block-cover__inner-container > * { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  .un-hero .wp-block-cover__inner-container h1.wp-block-heading { font-size: 2.05rem !important; line-height: 1.18 !important; }
  .un-hero { min-height: 86vh; }
  .un-hero-logo img { width: 88px; height: 88px; }
  .un-stats { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .un-stat-num { font-size: 2.3rem; }
  .un-fab { right: 14px; bottom: 14px; gap: 10px; }
  .un-fab a { width: 50px; height: 50px; font-size: 22px; }
  .un-eyebrow::before, .un-eyebrow::after { width: 16px; margin: 0 .35rem; }
  .un-leaf::before, .un-leaf::after { width: 40px; }
  /* Headline vừa khít màn hình, không tràn */
  .un-hero h1.wp-block-heading { font-size: 2.5rem; line-height: 1.15; }
  /* Nút xếp DỌC, full-width cho dễ bấm & không tràn */
  .wp-block-buttons { flex-wrap: wrap; }
  .un-hero .wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .un-hero .wp-block-button { width: 100%; }
  .un-hero .wp-block-button__link { width: 100%; }
  /* Giảm khoảng đệm section quá lớn */
  .un-video-frame { aspect-ratio: 16/10; margin-top: 1rem; }
  /* Bảng cuộn ngang nếu tràn */
  .wp-block-table { overflow-x: auto; }
  /* Footer: lề ngang + mọi khối nằm gọn trong lề (không phá khung) */
  .un-footer { padding-left: 22px !important; padding-right: 22px !important; }
  .un-footer > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .un-footer .wp-block-columns { gap: 2.2rem 1rem !important; }
  .un-footer .wp-block-column { max-width: 100% !important; }
  .un-footer p, .un-footer li { overflow-wrap: break-word; }
  .un-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Mobile nhỏ */
@media (max-width: 480px) {
  .un-hero-logo img { width: 76px; height: 76px; }
  .un-hero h1.wp-block-heading { font-size: 2.05rem; }
  .un-stat-num { font-size: 2rem; }
  .un-fab a { width: 46px; height: 46px; font-size: 20px; }
}

/* Parallax: thiết bị cảm ứng (iOS/Android) bỏ qua background-fixed -> dùng scroll cho mượt */
@media (hover: none), (max-width: 781px) {
  .wp-block-cover.has-parallax { background-attachment: scroll !important; background-size: cover; background-position: center; }
}

/* ===== Gallery chạy ngang (marquee) — "Khoảnh khắc Uyên Nhiên" ===== */
.un-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: var(--wp--preset--spacing--60, 4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.un-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: unMarquee 60s linear infinite;
}
.un-marquee:hover .un-marquee-track { animation-play-state: paused; }
.un-marquee-track img {
  height: 300px;
  width: auto;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: 0 12px 30px -14px rgba(46,74,47,.5);
}
@keyframes unMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1024px){ .un-marquee-track img { height: 240px; } .un-marquee-track { gap: 14px; animation-duration: 50s; } }
@media (max-width: 781px){ .un-marquee-track img { height: 190px; } .un-marquee-track { gap: 12px; animation-duration: 38s; } }
@media (max-width: 480px){ .un-marquee-track img { height: 150px; } }
@media (prefers-reduced-motion: reduce){
  .un-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .un-marquee-track { animation: none; }
}