/*
Theme Name: Zofi
Theme URI: https://zofinity.vn
Author: Zofinity Technology JSC
Author URI: https://zofinity.vn
Description: Theme chính thức cho website Zofinity / Zofi Kid — người bạn AI không màn hình cho bé 3–6 tuổi. Dựng pixel-perfect theo bộ thiết kế hi-fi. Tự động tạo trang, menu, danh mục Tin tức khi kích hoạt.
Version: 2.9.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zofi
*/

/* ===== Base ===== */
*{box-sizing:border-box}
body{margin:0;background:repeating-linear-gradient(180deg,#FFFFFF 0px,#FFF8F2 760px,#FFFFFF 1520px);background-attachment:scroll;min-height:100vh;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#333132}
a{color:#F26522;text-decoration:none}
a:hover{color:#F58220}
html{scroll-behavior:smooth}
img{max-width:100%}
input,select,textarea{font-family:'Be Vietnam Pro',system-ui,sans-serif}
input::placeholder,textarea::placeholder{color:#7B7B86}

/* ===== Responsive: 960px (ẩn nav -> burger) ===== */
@media(max-width:960px){
.zf-nav{display:none!important}
.zf-lang{display:none!important}
.zf-burger{display:flex!important}
.zf-hero{grid-template-columns:1fr!important;gap:12px!important;padding-top:36px!important}
.zf-hero>div:first-child{padding-bottom:24px!important}
.zf-heroimg{height:440px!important;margin-bottom:12px}
.zf-heroimg img{height:400px!important}
.zf-g3{grid-template-columns:1fr!important}
.zf-g4{grid-template-columns:repeat(2,1fr)!important}
.zf-feat{grid-template-columns:1fr!important;grid-template-rows:none!important}
.zf-feat>div:first-child{grid-row:auto!important}
.zf-2col{grid-template-columns:1fr!important;gap:36px!important}
.zf-2col>div:first-child{height:280px!important}
.zf-fgrid{grid-template-columns:1fr 1fr!important;gap:36px!important}
.zp-overview{grid-template-columns:1fr!important}
.zp-feat{grid-template-columns:repeat(2,1fr)!important}
.zp-2col{grid-template-columns:1fr!important;gap:36px!important}
.zp-specs{grid-template-columns:1fr!important}
.zf-banner{grid-template-columns:1fr!important;gap:16px!important}
.zf-bannerart{display:none!important}
.zf-featured{grid-template-columns:1fr!important}
.zf-featured>div:first-child{min-height:260px!important}
.zf-grid{grid-template-columns:repeat(2,1fr)!important}
.zf-news-cta{grid-template-columns:1fr!important;gap:32px!important}
.zf-vrow{grid-template-columns:1fr!important;gap:18px!important;padding:36px 28px!important}
.zf-vart{justify-self:start!important;margin-top:6px}
.zf-team{grid-template-columns:repeat(2,1fr)!important}
.zf-contact{grid-template-columns:1fr!important;gap:32px!important}
section>div,footer>div{padding-top:64px!important;padding-bottom:64px!important}
}

/* ===== Responsive: 720px (HDSD steps) ===== */
@media(max-width:720px){
.zf-step{grid-template-columns:1fr!important}
.zf-stepimg{order:-1;justify-self:center}
}

/* ===== Responsive: 640px (1 cột) ===== */
@media(max-width:640px){
.zf-h1{font-size:36px!important}
.zf-page-home .zf-h1{font-size:37px!important}
.zf-page-about .zf-h1{font-size:38px!important}
.zf-page-product h1{font-size:30px!important}
h2{font-size:28px!important;line-height:1.25!important}
.zf-g4{grid-template-columns:1fr!important}
.zf-fgrid{grid-template-columns:1fr!important}
.zf-cta{padding:52px 26px!important}
.zf-ctarow{flex-direction:column!important}
.zf-heroimg{height:340px!important}
.zf-heroimg img{height:310px!important}
.zp-feat{grid-template-columns:1fr!important}
.zp-main{height:340px!important}
.zp-main img{height:300px!important}
.zf-grid{grid-template-columns:1fr!important}
.zf-nlform{flex-direction:column!important;align-items:stretch!important}
.zf-team{grid-template-columns:1fr!important}
.zf-vnum{font-size:48px!important}
.zf-formcard{padding:32px 24px!important}
#dat-hang>div{padding-top:8px!important}
section>div,footer>div{padding-top:52px!important;padding-bottom:52px!important}
}

/* ============ Contact Form 7 — ZOFINITY brand styling ============ */
.zf-cf7 .wpcf7{margin:0}
.zf-cf7 .wpcf7-form{display:flex;flex-direction:column;gap:12px}
.zf-cf7 .wpcf7-form p{margin:0}
.zf-cf7 input[type=text],.zf-cf7 input[type=tel],.zf-cf7 input[type=email],
.zf-cf7 select,.zf-cf7 textarea{
  width:100%;box-sizing:border-box;border:1.5px solid #E4E0E8;border-radius:14px;
  padding:14px 18px;font-family:inherit;font-size:15px;color:#333132;background:#FFF3EA;outline:none;
}
.zf-cf7 textarea{resize:vertical;min-height:96px}
.zf-cf7 input:focus,.zf-cf7 select:focus,.zf-cf7 textarea:focus{border-color:#F58220;background:#fff}
.zf-cf7 input::placeholder,.zf-cf7 textarea::placeholder{color:#7B7B86;opacity:1}
.zf-cf7 input[type=submit]{
  width:100%;border:0;cursor:pointer;background:#F26522;color:#fff;font-family:inherit;
  font-weight:700;font-size:16px;padding:16px 0;border-radius:999px;
  box-shadow:0 10px 24px rgba(242,101,34,.28);transition:background .15s ease;
}
.zf-cf7 input[type=submit]:hover{background:#F58220}
.zf-cf7 input[type=submit]:disabled{opacity:.6;cursor:default}
.zf-cf7 .wpcf7-spinner{margin:0 auto;display:block}
.zf-cf7 .wpcf7-not-valid-tip{color:#F26522;font-size:13.5px;margin-top:6px}
.zf-cf7 .wpcf7-not-valid{border-color:#F26522!important}
.zf-cf7 .wpcf7-response-output{
  margin:6px 0 0!important;border:1.5px solid #E4E0E8!important;border-radius:14px;
  padding:12px 16px!important;font-size:14px;line-height:1.6;color:#333132;background:#FFF3EA;
}
.zf-cf7 form.sent .wpcf7-response-output{border-color:#F58220!important;color:#F26522}
.zf-cf7 form.invalid .wpcf7-response-output,
.zf-cf7 form.failed .wpcf7-response-output{border-color:#F26522!important;color:#F26522}

/* --- CF7: nhãn phía trên ô nhập (theo mẫu form Liên hệ) --- */
.zf-cf7 .wpcf7-form p.zf-field{display:flex;flex-direction:column;gap:8px}
.zf-cf7 .zf-label{font-size:14px;font-weight:600;color:#333132;line-height:1.4}
.zf-cf7 .zf-req{color:#F26522}
.zf-cf7 .wpcf7-form-control-wrap{display:block}
.zf-cf7 .wpcf7-form p.zf-submit{margin-top:4px}

/* ============ Banner Hero ============
   3 bố cục, chọn trong ô Sửa trang chủ:
     .zf-bl-behind  ảnh nền full-width 16:9, chữ nằm ĐÈ LÊN ảnh   (mặc định, máy tính & tablet)
     .zf-bl-below   ảnh full-width nằm DƯỚI khối chữ
     .zf-bl-side    ảnh nằm bên phải khối chữ
   Điện thoại (<=720px): MỌI bố cục đều đưa ảnh xuống dưới khối chữ,
   cao 60% màn hình, dùng ảnh 9:16 — chữ không bao giờ che mất ảnh. */
.zf-banner-hero{position:relative;overflow:hidden;background:#fff}
.zf-banner-inner{
  position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 24px;
}
.zf-banner-copy{display:flex;flex-direction:column;gap:26px;max-width:46%}
.zf-banner-pic{display:none}
/* Tiêu đề banner: đúng 2 dòng, mỗi dòng một màu; cỡ chữ tự co theo màn hình */
.zf-banner-hero .zf-h1{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  white-space:nowrap;text-wrap:nowrap;font-size:clamp(27px,4.5vw,58px)!important;
}
.zf-banner-hero .zf-h1 > span{display:block}
.zf-h1-logo img{height:1.12em;width:auto;display:block;margin-bottom:4px}

/* ---------- A. Ảnh nền, chữ đè lên (behind) ---------- */
.zf-bl-behind{
  display:flex;align-items:center;
  width:100%;aspect-ratio:16/9;max-height:82vh;min-height:480px;
  background-image:var(--zf-bn-d);
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.zf-bl-behind:not(.has-bg){
  background-image:radial-gradient(circle at 62% 46%,#FDE7D6 0%,#FBBD9A 44%,rgba(251,189,154,0) 76%);
}
/* lớp phủ giúp chữ luôn đọc rõ trên ảnh */
.zf-bl-behind .zf-banner-copy{max-width:min(680px,66%)}
.zf-bl-behind::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.zf-bl-behind.zf-ov-light::before{
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 38%,rgba(255,255,255,.20) 62%,rgba(255,255,255,0) 78%);
}
.zf-bl-behind.zf-ov-dark::before{
  background:linear-gradient(90deg,rgba(40,32,28,.72) 0%,rgba(40,32,28,.48) 38%,rgba(40,32,28,.12) 62%,rgba(40,32,28,0) 78%);
}
.zf-bl-behind.zf-ov-none::before{display:none}

/* ---------- B. Ảnh full-width nằm dưới khối chữ (below) ---------- */
.zf-bl-below{display:block;padding:44px 0 0}
.zf-bl-below .zf-banner-copy{max-width:760px}
.zf-bl-below .zf-banner-pic{
  display:block;width:100%;margin-top:40px;aspect-ratio:16/9;max-height:78vh;
  background-image:var(--zf-bn-d);
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.zf-bl-below:not(.has-bg) .zf-banner-pic{
  display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(circle at 50% 46%,#FDE7D6 0%,#FBBD9A 46%,rgba(251,189,154,0) 76%);
}
.zf-bl-below:not(.has-bg) .zf-banner-pic::after{
  content:"Ảnh Banner 16:9 — tải lên trong ô Sửa trang (1920×1080px)";
  font-family:ui-monospace,monospace;font-size:12px;color:#333132;
  background:#fff;padding:7px 14px;border-radius:10px;
}

/* ---------- C. Ảnh bên phải khối chữ (side) ---------- */
.zf-bl-side{height:70vh;min-height:520px;display:flex;align-items:center}
.zf-bl-side .zf-h1{font-size:clamp(26px,3.5vw,48px)!important}
.zf-bl-side::before,
.zf-bl-side::after{content:"";position:absolute;top:0;bottom:0;left:48%;right:0;pointer-events:none}
.zf-bl-side::before{background:radial-gradient(circle at 50% 46%,#FDE7D6 0%,#FBBD9A 38%,rgba(251,189,154,0) 68%)}
.zf-bl-side.no-art::before{display:none}
.zf-bl-side.has-bg::after{
  background-image:var(--zf-bn-d);
  background-size:contain;background-position:center center;background-repeat:no-repeat;
  filter:drop-shadow(0 18px 28px rgba(51,49,50,.16));
}

/* Laptop nhỏ / tablet ngang */
@media(max-width:1180px){
  .zf-bl-side::before,.zf-bl-side::after{left:52%}
  .zf-banner-copy{max-width:50%}
  .zf-bl-behind .zf-banner-copy{max-width:78%}
}
/* Tablet dọc */
@media(max-width:960px){
  .zf-bl-behind{min-height:420px}
  .zf-bl-behind .zf-banner-copy{max-width:72%}
  .zf-bl-below{padding:28px 0 0}
  /* side: ảnh trên — chữ dưới */
  .zf-bl-side{display:block;height:auto;min-height:0;padding:24px 0 44px}
  .zf-bl-side::before,.zf-bl-side::after{left:0;right:0;top:24px;bottom:auto;height:40vh;min-height:270px}
  .zf-bl-side .zf-banner-inner{padding-top:calc(40vh + 18px)}
  .zf-banner-copy{max-width:100%}
}
/* ĐIỆN THOẠI: mọi bố cục -> chữ trên, ảnh dưới, cao 60% màn hình, ảnh 9:16 */
@media(max-width:720px){
  .zf-banner-hero{display:block!important;height:auto!important;min-height:0!important;
    aspect-ratio:auto!important;max-height:none!important;padding:18px 0 0!important;
    background-image:none!important}
  .zf-banner-hero::before,
  .zf-banner-hero::after{display:none!important}
  .zf-banner-hero .zf-banner-inner{padding-top:0!important}
  .zf-banner-copy{max-width:100%!important;gap:18px}
  .zf-banner-hero .zf-banner-pic{
    display:block;width:100%;margin-top:26px;
    height:60vh;min-height:340px;aspect-ratio:auto;max-height:none;
    background-image:var(--zf-bn-m,var(--zf-bn-d));
    background-size:cover;background-position:center center;background-repeat:no-repeat;
  }
  .zf-banner-hero:not(.has-bg) .zf-banner-pic{
    display:flex;align-items:center;justify-content:center;
    background-image:radial-gradient(circle at 50% 46%,#FDE7D6 0%,#FBBD9A 46%,rgba(251,189,154,0) 76%);
  }
  .zf-banner-hero:not(.has-bg) .zf-banner-pic::after{
    content:"Ảnh Banner 9:16 — 1080×1920px";
    font-family:ui-monospace,monospace;font-size:12px;color:#333132;
    background:#fff;padding:7px 14px;border-radius:10px;
  }
  body{background:repeating-linear-gradient(180deg,#FFFFFF 0px,#FFF8F2 520px,#FFFFFF 1040px)}
}

/* ============ Thẻ nội dung: khung nhẹ để nổi trên nền trắng ============ */
.zf-card{
  background:#fff;border:1.5px solid #E4E0E8;
  box-shadow:0 2px 10px rgba(51,49,50,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zf-card:hover{border-color:#FBBD9A;box-shadow:0 10px 24px rgba(51,49,50,.08);transform:translateY(-3px)}

/* Tiêu đề: tự cân dòng, tránh rớt 1 chữ lẻ xuống dòng cuối */
h1,h2,h3{text-wrap:balance}

/* ============ Header nổi dạng thanh bo tròn (floating pill) ============ */
.zf-header{position:sticky;top:0;z-index:50;padding:14px 24px 0;background:transparent}
.zf-headbar{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:10px 14px 10px 22px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border:1px solid rgba(51,49,50,.07);border-radius:999px;
  box-shadow:0 6px 24px rgba(51,49,50,.07);
}
.zf-header .zf-nav{gap:26px}
.zf-header .zf-nav a{padding:8px 12px;border-radius:999px;transition:background .15s ease,color .15s ease}
.zf-header .zf-nav a:hover{background:#FFF3EA;color:#F26522}
/* menu điện thoại: bám theo thanh nổi */
.zf-header .zf-mm{
  max-width:1200px;margin:8px auto 0;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(51,49,50,.07);border-radius:26px;box-shadow:0 10px 28px rgba(51,49,50,.10);
  border-top:1px solid rgba(51,49,50,.07)!important;
}
@media(max-width:720px){
  .zf-header{padding:10px 14px 0}
  .zf-headbar{padding:8px 10px 8px 16px}
}

/* Thẻ nền kem: thêm viền mảnh để KHÔNG chìm vào nền gradient */
[style*="background:#FFF3EA"][style*="border-radius"]{border:1px solid #F6E3D2}
.zf-cta[style*="background:#FFF3EA"]{border:1px solid #F6E3D2}

/* ============ 4 Giá trị cốt lõi — dạng thẻ ============ */
.zf-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.zf-vcard{border-radius:28px;padding:34px 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.zf-vcard .zf-vnum{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:2px solid #F58220;color:#F26522;font-family:'Nunito',sans-serif;font-weight:900;font-size:17px;line-height:1;
}
.zf-vcard .zf-vart{
  width:120px;height:120px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 34%,#FDE3CF 0%,#FBBD9A 100%);
  display:flex;align-items:center;justify-content:center;font-size:46px;color:#F26522;overflow:hidden;
}
.zf-vcard .zf-vart img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:960px){
  .zf-vgrid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .zf-vcard{grid-template-columns:1fr;padding:28px 24px}
  .zf-vcard .zf-vart{width:92px;height:92px;font-size:38px;order:-1}
}

/* ============ Trang Sản phẩm — 6 tính năng dạng 2 cột (hover đổi nội dung) ============ */
.zp-tabs{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,25%) minmax(0,1fr);gap:32px;align-items:stretch}
.zp-tabwrap{display:flex;align-items:stretch;position:relative;min-width:0;max-width:100%}
.zp-tablist,.zp-tabpanels{flex:1;min-width:0}
/* Cột trái: danh sách tính năng */
.zp-tablist{border-radius:24px;padding:8px;display:flex;flex-direction:column}
.zp-tab{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:16px;padding:14px 16px;
  font-family:inherit;font-size:16px;font-weight:600;color:#7B7B86;
  transition:background .15s ease,color .15s ease;
}
.zp-tab + .zp-tab{border-top:1px solid #F1E8E0}
.zp-tab:hover,.zp-tab.active{background:#FFF3EA;color:#F26522}
.zp-tab.active{font-weight:700}
.zp-tabicon{
  width:50px;height:50px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:#F58220;
}
.zp-tabicon img{width:50px;height:50px;object-fit:contain;display:block}
.zp-tabname{line-height:1.3}
/* Cột phải: khung nội dung */
/* Khung phải cao bằng cột trái (6 mục cộng lại) */
.zp-tabpanels{border-radius:28px;padding:38px 40px;min-height:420px;position:relative;display:flex;flex-direction:column;justify-content:center}
.zp-panel.active{flex:1;display:flex;flex-direction:column;justify-content:center}
/* Nút trái/phải — chỉ hiện trên tablet & điện thoại */
.zp-arrow{display:none}
.zp-panel{display:none}
.zp-panel.active{display:block;animation:zpFade .25s ease}
@keyframes zpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.zp-panel-h3{
  margin:0 0 6px;text-align:left;font-family:'Nunito',sans-serif;font-weight:900;
  font-size:36px;line-height:1.15;color:#F26522;
}
.zp-panel-h3::after{                 /* gạch chân ngắn màu cam dưới tiêu đề */
  content:"";display:block;width:96px;height:3px;border-radius:2px;
  background:#F58220;margin-top:12px;
}
.zp-panel-body{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.zp-panel-text{display:flex;flex-direction:column;gap:14px}
.zp-panel-lead{margin:14px 0 0;font-size:17px;font-weight:700;color:#333132;line-height:1.45}
.zp-panel-desc{margin:0;font-size:16px;line-height:1.8;color:#464547}
/* Ảnh tính năng: dọc, tỉ lệ 2:3 */
.zp-panel-art{
  width:280px;aspect-ratio:2/3;height:auto;flex:none;border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 38% 34%,#FDE7D6 0%,#FBBD9A 100%);
  display:flex;align-items:center;justify-content:center;
}
.zp-panel-art img{width:100%;height:100%;object-fit:cover;display:block}
.zp-panel-ph{font-family:ui-monospace,monospace;font-size:12px;color:#F26522;text-align:center;padding:12px}

@media(max-width:960px){
  .zp-tabs{grid-template-columns:minmax(0,1fr);gap:20px}
  .zp-tablist{flex-direction:row;overflow-x:auto;scroll-behavior:smooth;padding:6px;gap:4px;
    scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
  .zp-tablist::-webkit-scrollbar{display:none}
  .zp-tab{flex-direction:column;gap:8px;flex:0 0 auto;width:112px;min-width:0;text-align:center;font-size:14px;padding:12px 10px;
    scroll-snap-align:center}
  .zp-tab + .zp-tab{border-top:0;border-left:1px solid #F1E8E0}
  .zp-tabpanels{padding:30px 26px;min-height:0;justify-content:flex-start}
  .zp-panel.active{flex:none}
  .zp-panel-body{grid-template-columns:1fr;gap:24px}
  .zp-panel-art{width:100%;max-width:300px;height:auto;aspect-ratio:2/3;margin:0 auto}

  /* Nút trái/phải cho tablet & điện thoại */
  .zp-tabwrap{align-items:center;gap:6px}
  .zp-arrow{
    display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
    width:36px;height:36px;border-radius:50%;border:0;padding:0;
    background:#FFF3EA;color:#F26522;font-size:24px;line-height:1;font-family:inherit;
    box-shadow:0 2px 10px rgba(51,49,50,.12);transition:background .15s ease,opacity .15s ease;
  }
  .zp-arrow:hover,.zp-arrow:active{background:#FBBD9A}
  .zp-arrow[disabled]{opacity:.32;cursor:default;box-shadow:none}
}
@media(max-width:640px){
  .zp-panel-h3{font-size:27px}
  .zp-panel-h3::after{width:72px;margin-top:10px}
  .zp-tabicon,.zp-tabicon img{width:40px;height:40px;font-size:22px}
}

/* Ảnh mục "Zofi có gì" — máy tính để cao 70% màn hình */
.zp-cogi-art{height:70vh;min-height:380px;max-height:760px}
@media(max-width:960px){.zp-cogi-art{height:46vh;min-height:300px}}
@media(max-width:640px){.zp-cogi-art{height:40vh;min-height:260px}}

/* ============ Quầng sáng thương hiệu sau ảnh sản phẩm ============
   Thay khối oval đặc viền cứng bằng quầng sáng toả mềm, dùng đúng cam brand. */
.zf-art-glow{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:min(98%,700px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,244,236,.55) 0%,
    rgba(251,189,154,.62) 46%,
    rgba(251,189,154,0) 74%);
}
.zf-art-glow::after{                 /* bóng đổ mềm dưới chân */
  content:"";position:absolute;left:50%;top:76%;transform:translateX(-50%);
  width:36%;height:52px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(51,49,50,.17) 0%,rgba(51,49,50,0) 70%);
}
.zf-art-glow-box{
  background:radial-gradient(circle at 50% 50%,
    rgba(255,244,236,.55) 0%,
    rgba(251,189,154,.62) 46%,
    rgba(251,189,154,0) 74%)!important;
  border-radius:0!important;
}

/* ============ Đội ngũ phát triển sản phẩm ============ */
.zf-team-grid{
  width:100%;margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
}
.zf-team-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.zf-team-photo{
  width:160px;height:160px;border-radius:50%;overflow:hidden;flex:none;
  background:radial-gradient(circle at 38% 34%,#FDE7D6 0%,#FBBD9A 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,monospace;font-size:12px;color:#F26522;line-height:1.5;
  box-shadow:0 10px 26px rgba(51,49,50,.10);
}
.zf-team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.zf-team-name{margin:10px 0 0;font-size:17px;font-weight:700;color:#333132}
.zf-team-role{margin:0;font-size:13.5px;font-weight:700;color:#F58220}
.zf-team-bio{margin-top:4px;text-align:left}
@media(max-width:960px){.zf-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:560px){.zf-team-grid{grid-template-columns:minmax(0,1fr)}.zf-team-bio{text-align:center}}

/* ============ Zofi hành trình cùng bé — băng ảnh/video ============ */
.zf-jn-wrap{width:100%;margin-top:24px;display:flex;align-items:center;gap:10px;min-width:0}
.zf-jn-track{
  flex:1;min-width:0;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:4px;-ms-overflow-style:none;scrollbar-width:none;
}
.zf-jn-track::-webkit-scrollbar{display:none}
.zf-jn-item{
  flex:0 0 auto;width:226px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:#333132;scroll-snap-align:center;position:relative;
  box-shadow:0 10px 26px rgba(51,49,50,.14);
}
.zf-jn-item video,.zf-jn-item iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
.zf-jn-img,.zf-jn-play{
  width:100%;height:100%;display:block;border:0;padding:0;cursor:pointer;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.zf-jn-img{cursor:default}
.zf-jn-play{position:relative}
.zf-jn-playicon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);color:#F26522;
  display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;
  box-shadow:0 6px 18px rgba(51,49,50,.24);transition:transform .15s ease;
}
.zf-jn-play:hover .zf-jn-playicon{transform:translate(-50%,-50%) scale(1.08)}
.zf-jn-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  background:#FFF3EA;color:#333132;font-family:ui-monospace,monospace;font-size:12px;line-height:1.7;
}
.zf-jn-arrow{
  display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
  width:40px;height:40px;border-radius:50%;border:0;padding:0;
  background:#FFF3EA;color:#F26522;font-size:26px;line-height:1;font-family:inherit;
  box-shadow:0 2px 10px rgba(51,49,50,.12);transition:background .15s ease,opacity .15s ease;
}
.zf-jn-arrow:hover{background:#FBBD9A}
.zf-jn-arrow[disabled]{opacity:.32;cursor:default;box-shadow:none}
@media(max-width:640px){
  .zf-jn-item{width:min(72vw,240px)}
  .zf-jn-arrow{width:34px;height:34px;font-size:22px}
}

/* Chặn tràn ngang (mọi khối 100% phải bằng đúng bề rộng màn hình) */
html,body{max-width:100%;overflow-x:hidden}