/* VIECARE app UI — ported from index.html demo. Load site-wide with body.vc-site */
:root{
    --green:#02A552; --green-d:#017C3C; --green-ink:#0A3B28;
    --purple:#6E2C91; --purple-d:#4A1D63; --magenta:#C21B6B;
    --cream:#F4FAF6; --white:#fff;
    --ink:#241F2B; --muted:#6C6577; --line:#EBE6DC;
    --shadow:0 22px 50px -24px rgba(74,29,99,.35);
    --shadow-sm:0 10px 26px -16px rgba(74,29,99,.28);
    --r:20px; --r-lg:30px; --wrap:1200px;
    --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
body.vc-site, body.vc-site *{box-sizing:border-box}
html{scroll-behavior:smooth}
body.vc-site{font-family:var(--f);background:var(--cream);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;color:var(--green-ink);font-weight:800;text-wrap:balance}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple)}
  .sec{padding:90px 0}
  .muted{color:var(--muted)} .center{text-align:center}
  .sec-head{max-width:640px;margin:0 auto 52px;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
  .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}

  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;padding:15px 26px;
    border-radius:999px;cursor:pointer;border:2px solid transparent;transition:.2s;font-family:var(--f);white-space:nowrap}
  .btn:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
  .btn-g{background:var(--green);color:#fff;box-shadow:0 14px 24px -14px rgba(2,165,82,.9)}
  .btn-g:hover{background:var(--green-d);transform:translateY(-2px)}
  .btn-p{background:var(--purple);color:#fff;box-shadow:0 14px 24px -14px rgba(110,44,145,.9)}
  .btn-p:hover{background:var(--purple-d);transform:translateY(-2px)}
  .btn-o{background:#fff;color:var(--green-ink);border-color:var(--line)}
  .btn-o:hover{border-color:var(--green);color:var(--green-d);transform:translateY(-2px)}
  .btn-sm{padding:11px 19px;font-size:.92rem}
  .tag{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;padding:7px 14px;border-radius:999px;background:#F0E6F6;color:var(--purple)}
  .tag-g{background:#E1F5EA;color:var(--green-d)} .tag-h{background:#FCE4EF;color:var(--magenta)}

  /* ===== HEADER (tìm kiếm + menu, 2 tầng) ===== */
/* header handled by .vc-header in skin.css */
  .htop{border-bottom:1px solid var(--line)}
  .htop>.wrap{display:flex;align-items:center;gap:18px;min-height:76px}
  .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
  .brand img{height:58px;width:auto}
  .brand .txt{font-weight:900;font-size:1.35rem;color:var(--green);letter-spacing:-.02em;line-height:1}
  .brand .txt i{color:var(--magenta);font-style:normal}
  .hsearch{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;background:var(--cream);
    border:1.5px solid var(--line);border-radius:999px;padding:0 5px 0 18px;height:48px;transition:.15s}
  .hsearch:focus-within{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(2,165,82,.1)}
  .hsearch>svg{color:var(--muted);flex:0 0 auto}
  .hsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--f);font-size:.98rem;color:var(--ink)}
  .hsearch button{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:var(--green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .hsearch button:hover{background:var(--green-d)}
  .hcall{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .hcall .ic{width:42px;height:42px;border-radius:50%;background:#F0E6F6;color:var(--purple);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .hcall small{display:block;font-size:.72rem;color:var(--muted)}
  .hcall b{color:var(--green-ink);font-weight:800;font-size:1.02rem;line-height:1.1}
  .htop-cta{flex:0 0 auto}
  .hact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .hnav{border-top:1px solid var(--line)}
  .hnav>.wrap{display:flex;align-items:center;min-height:50px}
  .menu{display:flex;gap:2px;flex:1;justify-content:space-between}
  .menu a{font-weight:600;font-size:.95rem;padding:9px 15px;border-radius:999px;cursor:pointer;transition:.15s}
  .menu a:hover{background:#F0E6F6;color:var(--purple)}
  .menu a.on{background:var(--green);color:#fff}
  .menu a.hot:not(.on){color:var(--magenta);font-weight:700}
  .burger{display:none;width:46px;height:46px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto}
  .burger b{width:20px;height:2.5px;background:var(--green-ink);border-radius:2px;display:block}
  @media(max-width:1120px){.hcall{display:none}}
  @media(max-width:900px){
    .htop>.wrap{flex-wrap:wrap;min-height:0;padding:12px 24px;gap:12px}
    .brand{order:1} .burger{display:flex} .hact{order:2;margin-left:auto}
    .hsearch{order:5;flex:1 1 100%;max-width:none;height:46px}
    .hnav>.wrap{min-height:0;padding:0 24px}
    .menu{display:none;flex-direction:column;width:100%;padding:8px 0;gap:4px}
    .menu.open{display:flex}
    .menu a{padding:12px 14px;border-radius:12px}
  }
  @media(max-width:360px){.brand .txt{display:none}}

  /* SPA pages removed for multi-page WP */ .vc-page{display:block;animation:fade .45s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* hero */
  .hero{position:relative;background:
      radial-gradient(60% 80% at 88% 12%, rgba(110,44,145,.10), transparent 60%),
      radial-gradient(50% 60% at 6% 90%, rgba(2,165,82,.10), transparent 60%), var(--cream)}
  .hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding:70px 24px 80px}
  .hero h1{font-size:clamp(2.4rem,4.8vw,3.9rem);font-weight:900}
  .hero h1 .g{color:var(--green)} .hero h1 .p{color:var(--purple)}
  .hero .sub{color:var(--muted);font-size:1.12rem;max-width:34ch;margin:20px 0 26px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
  .hero-photo{position:relative}
  .hero-photo .frame{border-radius:34px 34px 34px 90px;overflow:hidden;box-shadow:var(--shadow);
    border:6px solid #fff;aspect-ratio:4/3.2;background:#ddd}
  .hero-photo .frame img{width:100%;height:100%;object-fit:cover}
  .badge{position:absolute;background:#fff;border-radius:18px;box-shadow:var(--shadow-sm);padding:14px 16px;
    display:flex;gap:12px;align-items:center;border:1px solid var(--line)}
  .badge .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .badge b{display:block;font-size:1.15rem;color:var(--green-ink);font-weight:800;line-height:1}
  .badge span{font-size:.8rem;color:var(--muted)}
  .badge.b1{left:-22px;top:34px} .badge.b2{right:-18px;bottom:40px}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

  .strip{background:#E8F6EE;border-top:1px solid #D3EEDD;border-bottom:1px solid #D3EEDD}
  .strip .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;align-items:center;padding:20px 24px}
  .strip .i{display:flex;align-items:center;gap:10px;color:var(--green-ink);font-weight:600;font-size:.96rem}
  .strip svg{color:var(--green);flex:0 0 auto}
  /* promo carousel */
  .promo-wrap{padding:22px 0 4px}
  .promo-carousel{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm)}
  .promo-track{display:flex;transition:transform .5s ease}
  .promo-slide{flex:0 0 100%;display:block;font-size:0}
  .promo-slide img{width:100%;height:auto;display:block}
  .promo-slide.s1{background:linear-gradient(120deg,#02A552,#0a7a44)}
  .promo-slide.s2{background:linear-gradient(120deg,#6E2C91,#9333a8)}
  .promo-slide.s3{background:linear-gradient(120deg,#0e94a3,#0b6ea0)}
  .promo-slide .pk{align-self:flex-start;background:rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:.8rem;padding:5px 13px;border-radius:999px}
  .promo-slide h3{color:#fff;font-size:clamp(1.25rem,2.5vw,1.95rem);max-width:32ch}
  .promo-slide p{color:rgba(255,255,255,.92);font-size:.98rem;max-width:46ch}
  .promo-slide .pbtn{align-self:flex-start;margin-top:4px;background:#fff;color:var(--green-ink);font-weight:800;font-size:.9rem;padding:9px 18px;border-radius:999px}
  .promo-slide.s2 .pbtn,.promo-slide.s3 .pbtn{color:var(--purple-d)}
  .promo-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);border:0;cursor:pointer;font-size:1.4rem;color:var(--green-ink);display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:var(--shadow-sm)}
  .promo-nav:hover{background:#fff}
  .promo-nav.prev{left:12px} .promo-nav.next{right:12px}
  .promo-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
  .promo-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;transition:.2s}
  .promo-dots button.on{background:#fff;width:22px;border-radius:5px}
  @media(max-width:600px){.promo-nav{display:none}}

  .grid{display:grid;gap:24px}
  .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);
    transition:transform .2s,box-shadow .2s;overflow:hidden}
  .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .pad{padding:26px}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .ph{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:5px solid #fff;aspect-ratio:4/3}
  .ph img{width:100%;height:100%;object-fit:cover}
  .flist{list-style:none;display:grid;gap:16px;margin-top:22px}
  .flist li{display:flex;gap:14px;align-items:flex-start}
  .flist .n{width:44px;height:44px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#E1F5EA;color:var(--green-d)}
  .flist b{color:var(--green-ink);font-weight:700} .flist p{color:var(--muted);font-size:.95rem}

  .pkg{display:flex;flex-direction:column;position:relative}
  .pkg .top{padding:22px 24px 0}
  .pkg .age{font-weight:800;font-size:1.24rem;color:var(--green-ink)}
  .pkg .who{color:var(--muted);font-size:.9rem;margin-top:2px}
  .pkg .price{font-weight:900;font-size:1.55rem;color:var(--green);font-variant-numeric:tabular-nums;margin:14px 0 0}
  .pkg .price small{font-size:.8rem;color:var(--muted);font-weight:600}
  .pkg .q{font-weight:800;font-size:1.15rem;color:var(--purple);margin:14px 0 0}
  .pkg ul{list-style:none;padding:16px 24px;display:grid;gap:9px}
  .pkg li{display:flex;gap:9px;font-size:.93rem;align-items:flex-start}
  .pkg li svg{color:var(--green);flex:0 0 auto;margin-top:4px}
  .pkg .act{margin-top:auto;padding:0 24px 24px;display:flex;gap:10px;flex-wrap:wrap}
  .pkg.hot{border-color:var(--magenta);box-shadow:0 24px 44px -22px rgba(194,27,107,.45)}
  .pkg .rib{position:absolute;top:16px;right:16px}

  /* ===== catalog: taskbar sidebar + grid ===== */
  .catalog{display:grid;grid-template-columns:264px minmax(0,1fr);gap:30px;align-items:start;margin-top:8px}
  .catbar{position:sticky;top:94px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm)}
  .catbar .lbl{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 10px 12px}
  .catlist{display:flex;flex-direction:column;gap:4px}
  .catitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;font-family:var(--f);
    font-weight:600;font-size:.94rem;color:var(--ink);padding:9px 11px;border-radius:12px;cursor:pointer;transition:.15s}
  .catitem:hover{background:#F0E6F6;color:var(--purple)}
  .catitem.on{background:var(--green);color:#fff}
  .catitem .ci{width:34px;height:34px;border-radius:10px;background:#F0E6F6;color:var(--purple);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.15s}
  .catitem.on .ci{background:rgba(255,255,255,.22);color:#fff}
  .catitem .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .catitem .ct{font-size:.76rem;font-weight:700;background:var(--cream);color:var(--muted);padding:2px 9px;border-radius:999px;flex:0 0 auto}
  .catitem.on .ct{background:rgba(255,255,255,.25);color:#fff}
  .catmain{min-width:0}
  .cattools{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
  .search{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:12px 18px}
  .search input{border:0;background:none;outline:none;font-family:var(--f);font-size:.95rem;width:100%;color:var(--ink)}
  .search svg{color:var(--muted);flex:0 0 auto}
  .count{color:var(--muted);font-size:.9rem;font-weight:600;white-space:nowrap} .count b{color:var(--green-d)}
  .agesel{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;flex:0 0 auto;cursor:pointer;transition:.15s}
  .agesel:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px rgba(110,44,145,.12)}
  .agesel svg{color:var(--purple);flex:0 0 auto}
  .agesel select{border:0;background:none;outline:none;font-family:var(--f);font-size:.94rem;font-weight:600;color:var(--green-ink);cursor:pointer}
  .cat-lead{font-weight:700;color:var(--green-ink);margin-bottom:14px;font-size:1.02rem}
  .cat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:18px}
  .cat-card{display:flex;align-items:center;gap:11px;padding:13px;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;text-align:left;font-family:var(--f);transition:.18s}
  .cat-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
  .cat-card.on{border-color:var(--green);background:#F1FAF4;box-shadow:0 10px 22px -14px rgba(2,165,82,.5)}
  .cat-card .ci{width:44px;height:44px;border-radius:12px;background:#F0E6F6;color:var(--purple);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.15s}
  .cat-card.on .ci{background:var(--green);color:#fff}
  .cat-card .cx{min-width:0;display:flex;flex-direction:column}
  .cat-card .cn{font-weight:700;font-size:.9rem;color:var(--green-ink);line-height:1.15}
  .cat-card .cc{font-size:.76rem;color:var(--muted);margin-top:2px}
  @media(max-width:1160px){.cat-cards{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:940px){.cat-cards{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:640px){.cat-cards{grid-template-columns:repeat(2,1fr)}}
  .cat-cards.collapsed .cat-card:nth-child(n+5){display:none}
  @media(min-width:641px){.cat-cards.collapsed .cat-card:nth-child(5),.cat-cards.collapsed .cat-card:nth-child(6){display:flex}.cat-cards.collapsed .cat-card:nth-child(n+7){display:none}}
  @media(min-width:941px){.cat-cards.collapsed .cat-card:nth-child(7),.cat-cards.collapsed .cat-card:nth-child(8){display:flex}.cat-cards.collapsed .cat-card:nth-child(n+9){display:none}}
  @media(min-width:1161px){.cat-cards.collapsed .cat-card:nth-child(n){display:flex}}
  .cat-more{display:flex;align-items:center;gap:8px;width:fit-content;margin:0 auto 32px;padding:10px 20px;border:1.5px solid var(--line);background:#fff;color:var(--green-d);font-weight:700;font-size:.9rem;border-radius:999px;cursor:pointer;font-family:var(--f);transition:.15s}
  .cat-more:hover{border-color:var(--green);background:#F1FAF4}
  .cat-more svg{transition:transform .2s} .cat-more.open svg{transform:rotate(180deg)}
  @media(min-width:1161px){.cat-more{display:none}}
  .vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .catbar2{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
  .sortbar{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--muted);flex-wrap:wrap}
  .sortbar button{border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;font-size:.85rem;font-family:var(--f);transition:.15s}
  .sortbar button:hover{border-color:var(--green);color:var(--green-d)}
  .sortbar button.on{background:var(--green);color:#fff;border-color:var(--green)}
  @media(max-width:900px){
    .catalog{grid-template-columns:minmax(0,1fr);gap:14px}
    .catbar{position:sticky;top:78px;z-index:40;padding:10px;border-radius:0;margin:0 -24px;
      border-left:0;border-right:0;box-shadow:0 6px 14px -10px rgba(74,29,99,.3)}
    .catbar .lbl{display:none}
    .catlist{flex-direction:row;overflow-x:auto;gap:8px;padding:2px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .catlist::-webkit-scrollbar{display:none}
    .catitem{width:auto;flex:0 0 auto;padding:7px 13px;border:1.5px solid var(--line);border-radius:999px}
    .catitem.on{border-color:var(--green)}
    .catitem .ci{width:24px;height:24px;border-radius:7px}
    .catitem .ci svg{width:15px;height:15px}
    .catitem .ct{display:none}
    .vgrid{grid-template-columns:repeat(2,1fr);gap:16px}
  }
  .vc{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .vc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .vc .vtop{position:relative;aspect-ratio:5/4;background:linear-gradient(135deg,#F6F2F8,#EAF7F0);display:flex;align-items:center;justify-content:center;padding:18px;border-bottom:1px solid var(--line)}
  .vc .vtop img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
  .vc .vph{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--purple)}
  .vc .vph b{font-size:1.05rem;text-align:center;font-weight:800;color:var(--green-ink)}
  .vc .vbadge{position:absolute;top:12px;left:12px;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--purple);box-shadow:var(--shadow-sm)}
  .vc .vflag{position:absolute;top:12px;right:12px;font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--green-d);box-shadow:var(--shadow-sm)}
  .vc .vbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
  .vc h3{font-size:1.06rem;color:var(--green-ink)}
  .vc .vorigin{color:var(--muted);font-size:.84rem}
  .vc .vprev{font-size:.86rem;color:var(--ink);display:flex;gap:7px;align-items:flex-start;margin-top:2px}
  .vc .vprev svg{color:var(--green);flex:0 0 auto;margin-top:3px}
  .vc .vage{font-size:.8rem;color:var(--purple);font-weight:600}
  .vc .vfoot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .vc .vprice{display:flex;flex-direction:column;line-height:1.12;min-width:0}
  .vc .vprice s{color:var(--muted);font-weight:600;font-size:.72rem}
  .vc .vprice b{color:var(--green-d);font-weight:800;font-size:.95rem}
  .vc .vprice small{font-weight:700;font-size:.72rem}
  .vc .vprice.contact{color:var(--purple);font-weight:800;font-size:.85rem;justify-content:center}
  .vc .vfoot .btn{padding:8px 13px;font-size:.8rem;flex:0 0 auto}
  .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .phase h3{display:flex;gap:12px;align-items:center;font-size:1.2rem;margin-bottom:16px}
  .phase .n{width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .phase .it{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:14px;padding:15px 17px;margin-bottom:12px}
  .phase .it b{color:var(--green-ink)} .phase .it p{color:var(--muted);font-size:.9rem;margin-top:3px}

  .loc{display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden}
  .loc .lp{min-height:230px} .loc .lp img{width:100%;height:100%;object-fit:cover}
  .loc .lb{padding:28px;display:flex;flex-direction:column}
  .loc h3{font-size:1.3rem}
  .loc .ad{color:var(--muted);font-size:.95rem;margin-top:8px;display:flex;gap:8px}
  .loc .ad svg{color:var(--purple);flex:0 0 auto;margin-top:3px}
  .loc .lact{display:flex;gap:10px;margin-top:auto;padding-top:18px;flex-wrap:wrap}

  .news .nimg{aspect-ratio:16/10;overflow:hidden}
  .news .nimg img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .news:hover .nimg img{transform:scale(1.06)}
  .news .nb{padding:20px;display:flex;flex-direction:column;gap:9px}
  .news h3{font-size:1.05rem} .news .nb p{color:var(--muted);font-size:.9rem}
  .news .more{color:var(--purple);font-weight:700;font-size:.9rem;margin-top:auto}

  .cta{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:52px;color:#fff;
    background:linear-gradient(120deg,var(--purple),var(--green) 78%);
    display:flex;justify-content:space-between;gap:26px;align-items:center;flex-wrap:wrap}
  .cta h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem)} .cta p{color:#e7d9f0;margin-top:8px}
  /* khuyến mãi */
  .promo-hero{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:34px}
  .promo-hero img{width:100%;height:auto;display:block}
  .pc{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}
  .pc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .pc.pc-hot{border-color:var(--magenta);box-shadow:0 24px 44px -22px rgba(194,27,107,.5)}
  .pch{padding:22px 22px 20px;color:#fff}
  .pch.g-green{background:linear-gradient(120deg,#02A552,#0a7a44)}
  .pch.g-magenta{background:linear-gradient(120deg,#C21B6B,#8e2fb0)}
  .pch.g-purple{background:linear-gradient(120deg,#6E2C91,#9333a8)}
  .pc-b{display:inline-block;background:rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.04em;padding:4px 11px;border-radius:999px;margin-bottom:10px}
  .pch h3{color:#fff;font-size:1.2rem;line-height:1.2}
  .pc-price{font-weight:900;font-size:1.7rem;margin-top:10px;font-variant-numeric:tabular-nums}
  .pc-price span{font-size:.9rem;font-weight:700;margin-left:2px}
  .pcb{padding:20px 22px;display:flex;flex-direction:column;gap:16px;flex:1}
  .pcb ul{list-style:none;display:grid;gap:9px}
  .pcb li{font-size:.93rem;color:var(--ink)}
  .pcb li .ck{color:#02A552;font-weight:800;margin-right:5px}
  .pcb .btn{margin-top:auto;justify-content:center}
  .ribbon-hot{position:absolute;top:15px;right:-30px;transform:rotate(38deg);background:#FFB020;color:#3a2600;font-weight:800;font-size:.7rem;padding:4px 36px;z-index:2}
  .promo-note{margin-top:28px;text-align:center;color:var(--muted);font-size:.92rem;background:#FCF3E0;border:1px solid #F5E2B8;border-radius:14px;padding:14px 18px}
  .promo-note a{color:var(--green-d)}
  /* trang chi tiết + bảng giá */
  .vc,.card.pkg,.card.news{cursor:pointer}
  .back-link{display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-weight:700;font-size:.92rem;margin-bottom:22px;cursor:pointer}
  .back-link:hover{color:var(--purple-d)}
  .detail-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
  .detail-media{background:linear-gradient(135deg,#F6F2F8,#EAF7F0);border:1px solid var(--line);border-radius:20px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:30px;position:sticky;top:150px;overflow:hidden}
  .detail-media img{max-width:100%;max-height:100%;object-fit:contain}
  .detail-vph{color:var(--purple);transform:scale(2.6)}
  .detail-info h1{font-size:clamp(1.6rem,3vw,2.3rem);margin:12px 0 6px}
  .detail-meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;margin:10px 0 16px}
  .detail-meta b{color:var(--green-ink)}
  .dprev{background:#E8F6EE;border:1px solid #D3EEDD;border-radius:12px;padding:12px 16px;font-size:.95rem;margin-bottom:16px}
  .detail-info p.muted{line-height:1.7}
  .detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
  .detail-facts .f{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .detail-facts .f b{display:block;color:var(--green-ink);font-size:.85rem}
  .detail-facts .f span{color:var(--muted);font-size:.85rem}
  .detail-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
  .detail-related{margin-top:46px}
  .detail-related h3{margin-bottom:16px}
  .art-detail{max-width:760px;margin:0 auto}
  .art-detail h1{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:10px}
  .art-detail .art-img{border-radius:20px;overflow:hidden;margin:18px 0 24px;box-shadow:var(--shadow-sm)}
  .art-detail .art-img img{width:100%;display:block}
  .art-detail p{margin-bottom:16px;color:var(--ink);line-height:1.78}
  .art-detail h3{margin:26px 0 10px;color:var(--green-ink)}
  .pt-wrap{overflow-x:auto;margin-bottom:26px}
  .ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .ptable caption{text-align:left;font-weight:800;color:#fff;background:var(--green);padding:14px 16px;font-size:1.05rem}
  .ptable th,.ptable td{text-align:left;padding:12px 16px;border-top:1px solid var(--line);font-size:.93rem}
  .ptable th{background:#F1FAF4;color:var(--green-ink);font-weight:700}
  .ptable td.pr{text-align:right;font-weight:800;color:var(--green-d);white-space:nowrap}
  .ptable th.pr{text-align:right}
  .ptable tr.grp td{background:#F0E6F6;color:var(--purple);font-weight:800}
  .ptable tbody tr:hover td{background:#FAFDFB}
  .ptable caption span{font-weight:600;opacity:.92;font-size:.85rem}
  .ptable-price td.pd-dis{background:#F0E6F6;color:var(--purple-d);font-weight:800;vertical-align:top;min-width:150px}
  .ptable-price td.pd-dis:hover{background:#F0E6F6!important}
  .ptable-price td.pd-dis .pd-tt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;margin-right:8px;border-radius:6px;background:var(--purple);color:#fff;font-size:.75rem;font-weight:800;vertical-align:middle}
  .ptable-price td.pd-name{font-weight:700;color:var(--green-ink)}
  .ptable-price td.pd-co{color:var(--muted);white-space:nowrap}
  .ptable td.pr.deal{color:var(--magenta)}
  .ptable td.pr.empty{color:#C9C4D0;font-weight:600;text-align:right}
  .price-notes{background:#F1FAF4;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:16px 18px;margin-bottom:8px}
  .price-notes p{margin:0 0 6px;font-size:.9rem;color:var(--ink);line-height:1.5}
  .price-notes p:last-child{margin-bottom:0}
  .dprice{display:flex;align-items:baseline;gap:10px 12px;flex-wrap:wrap;margin:16px 0;padding:14px 16px;background:#F1FAF4;border:1px solid var(--line);border-radius:12px}
  .dprice .dp-now{font-size:1.8rem;font-weight:900;color:var(--green-d);line-height:1}
  .dprice .dp-old{font-size:1rem;color:var(--muted);text-decoration:line-through}
  .dprice .dp-unit{font-size:.85rem;color:var(--muted)}
  .dprice .dp-tag{font-size:.75rem;font-weight:700;color:var(--magenta);background:#FCE4EF;padding:3px 10px;border-radius:20px}
  .dprice .dp-contact{font-size:1.4rem;font-weight:800;color:var(--purple)}
  @media(max-width:800px){.detail-split{grid-template-columns:1fr;gap:26px}.detail-media{position:static;aspect-ratio:16/10}.detail-facts{grid-template-columns:1fr}}

  .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm)}
  .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
  .fld label{font-weight:700;font-size:.86rem;color:var(--green-ink)}
  .fld input,.fld select,.fld textarea{font-family:var(--f);font-size:1rem;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink)}
  .fld :focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(110,44,145,.12)}
/* footer handled by .vc-footer in skin.css */
 footer a:hover{color:#ffe08a}


  .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
  .reveal.in{opacity:1;transform:none}

  .demo-tag i{width:8px;height:8px;border-radius:50%;background:#ffd84d;display:inline-block}

  @media(max-width:1040px){.menu a{padding:9px 12px;font-size:.92rem}}
  @media(max-width:900px){
    .hero .wrap,.split,.loc{grid-template-columns:1fr;gap:36px}
    .g4,.g3{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}

  }
  @media(max-width:600px){.sec{padding:60px 0}.g4,.g3,.g2{grid-template-columns:1fr}.cta{padding:34px}
    .badge.b1{left:6px}.badge.b2{right:6px}footer .wrap{grid-template-columns:1fr}}
  @media(max-width:520px){.vgrid{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---- WP multi-page patches ---- */
body.vc-site{
  --green:#02A552; --green-d:#017C3C; --green-ink:#0A3B28;
  --purple:#6E2C91; --purple-d:#4A1D63; --magenta:#C21B6B;
  --cream:#F4FAF6; --white:#fff;
  --ink:#241F2B; --muted:#6C6577; --line:#EBE6DC;
  --shadow:0 22px 50px -24px rgba(74,29,99,.35);
  --shadow-sm:0 10px 26px -16px rgba(74,29,99,.28);
  --r:20px; --r-lg:30px; --wrap:1200px;
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--f); background:var(--cream); color:var(--ink);
}
.vc-page{display:block}
.vc-main{min-height:50vh}
body.vc-app #wrapper, body.vc-app .page-wrapper{max-width:none;padding:0;margin:0;background:transparent}
body.vc-app .page-title-inner,
body.vc-app .page-header-wrapper,
body.vc-app .is-sticky-column{ /* keep */ }
/* hide WP default page title bars on app templates if Flatsome injects */
body.vc-app .page-title-bg{display:none!important}