/* ===== Trang 2: Phố cổ đèn lồng (lp--palace) — chồng lên landing.css ===== */
.lp--palace{--bg:#0E0907;--bg2:#160E0A;--card:#1C130E;--card2:#271A12;--line:rgba(227,182,92,.14);--line2:rgba(227,182,92,.32);--ink:#F7EBD3;--muted:#D2C1A4;--soft:#A08F76;--red:#BE3420;--redDeep:#8E2216;--redText:#F29A7E;--onRed:#FFF6E6;--gold:#E3B65C;--goldText:#EDC67A;--jade:#7CC2A8;--moon:#F6E3B4;--sky1:#0E0907;--sky2:#1A0F0B;--hill3:#3A2016;--hill2:#2A170F;--hill:#1C0F0A;--water:#140B08;--boat:#060403;--branch:#5A3A2A;--petal:#F2B8C0;--chip:rgba(247,235,211,.07);--redTint:rgba(190,52,32,.22);--goldTint:rgba(227,182,92,.14);--shadow:0 28px 70px rgba(0,0,0,.55);--shadowSm:0 12px 28px rgba(0,0,0,.42);--scr:#17100C;--scrBar:#100A07;--scrCard:#22170F;--fog:rgba(240,200,150,.08);background:var(--bg)}
.lp--palace ::selection{background:#BE3420;color:#FFF6E6}

/* nút: son đỏ viền vàng */
.lp--palace .btn-red{background:linear-gradient(180deg,#D5492E 0%,#B42F1C 55%,#962314 100%);color:#FFF6E6;box-shadow:0 14px 34px rgba(214,74,40,.38),inset 0 1px 0 rgba(255,222,170,.45),inset 0 0 0 1px rgba(255,200,120,.25)}
.lp--palace .btn-red:hover{background:linear-gradient(180deg,#E0573A 0%,#BE3420 60%,#9C2616 100%);box-shadow:0 18px 44px rgba(232,120,50,.5),inset 0 1px 0 rgba(255,222,170,.5),inset 0 0 0 1px rgba(255,210,140,.4)}
.lp--palace .btn-line{background:rgba(20,12,8,.55);border-color:rgba(227,182,92,.5);color:#F7EBD3}
.lp--palace .btn-line:hover{border-color:#EDC67A;color:#FFF3D6}

/* ================= HERO ================= */
.ph-hero{position:relative;z-index:2;background:var(--bg)}
.ph-stage{position:relative;height:980px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#060408 0%,#0D080D 24%,#1D0D0D 48%,#3C170E 70%,#5E2410 86%,#2A110A 100%)}
.ph-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ph-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 52% 58% at 26% 60%,rgba(6,4,6,.78) 0%,rgba(6,4,6,.5) 45%,transparent 75%),
             linear-gradient(90deg,rgba(6,4,6,.55) 0%,transparent 55%),
             linear-gradient(180deg,transparent 80%,rgba(14,9,7,.5) 100%)}
/* lớp cảnh */
.ph-star{fill:#FFF3D6;opacity:.55;animation:phTw 4s ease-in-out infinite alternate}
.ph-star:nth-child(3n){animation-delay:-1.5s}.ph-star:nth-child(3n+1){animation-delay:-3s}
@keyframes phTw{from{opacity:.15}to{opacity:.75}}
.ph-moon{animation:phMoon 9s ease-in-out infinite alternate;transform-origin:1150px 250px}
@keyframes phMoon{from{opacity:.9}to{opacity:1}}
.mc{fill:#E8C98A;opacity:.45}
.mt-far{fill:#2A1610;opacity:.92}
.mt-near{fill:#1A0D09}
.fog{fill:rgba(255,196,140,.09)}
.fr-wall{fill:#170C08}
.fr-roof{fill:#1E100B}
.pg-far{fill:#3A1F16}
.pg-far2{opacity:.75}
.pg-win{fill:#E9933C;opacity:.55}
.rf{fill:url(#phRoof)}
.rf-back{fill:#170E0A}
.rf-trim{fill:none;stroke:#D9A54E;stroke-width:2.4;stroke-linejoin:round;opacity:.85}
.rf-ridge{fill:#2A1A12;stroke:#C9963A;stroke-width:1.2}
.rf-tile{fill:none;stroke:rgba(255,190,120,.11);stroke-width:1.5}
.rf-rim{fill:none;stroke:rgba(255,178,96,.55);stroke-width:1.6;stroke-linecap:round}
.win-b{opacity:.62}
.hall-wall{fill:#1A0F0B}
.hall-back{fill:#140C09}
.win{fill:url(#phWin);opacity:.9}
.win-up{opacity:.75}
.win-dim{opacity:.38}
.win-door{fill:#FFE3A6;opacity:1}
.win-lat{stroke:rgba(60,26,10,.55);stroke-width:1.6}
.pil{fill:#8A2617}
.pil-dim{fill:#4C170E}
.beam{fill:#4A1F10}
.beam-dot{fill:#C9963A;opacity:.8}
.plaque{fill:#2A1A10;stroke:#D9A54E;stroke-width:1.5}
.plaque-in{fill:#6E1D12}
.terrace{fill:#24160F}
.terrace-edge{stroke:rgba(255,200,130,.25);stroke-width:1.5}
.steps{fill:#2C1B12}
.step-line{stroke:rgba(255,200,130,.16);stroke-width:1.5}
.ph-glowwin rect{fill:#FF9C3E;opacity:.55}
.tl-str{stroke:#6E4A26;stroke-width:1.5}
.tl-glow{fill:#FF8A3A;opacity:.28;animation:phBreath 3.4s ease-in-out infinite alternate}
.tl-lan{fill:#E04A28}
.rail-top,.rail-bot{fill:#0E0806}
.rail-hl{stroke:rgba(227,182,92,.45);stroke-width:1.2}
.rail-bal{fill:#120A07}
.rail-hole{fill:#2C140C;opacity:.85}
.rail-post{fill:#0B0605}
.rail-cap{fill:#3A2414;stroke:rgba(227,182,92,.5);stroke-width:1}
/* sương + bụi sáng */
.ph-mist{position:absolute;z-index:3;left:-20%;width:140%;height:180px;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,206,160,.10) 0%,rgba(255,206,160,.04) 45%,transparent 70%);filter:blur(10px)}
.pm1{top:620px;animation:phDrift 38s linear infinite alternate}
.pm2{top:760px;height:140px;animation:phDrift 46s linear infinite alternate-reverse;opacity:.8}
@keyframes phDrift{from{transform:translateX(-6%)}to{transform:translateX(8%)}}
.ph-dust{position:absolute;z-index:4;border-radius:50%;pointer-events:none;background:#FFD488;box-shadow:0 0 8px 2px rgba(255,190,90,.55);
  animation-name:phFloat,phTwinkle;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:alternate,alternate}
@keyframes phFloat{from{transform:translate(0,0)}to{transform:translate(26px,-70px)}}
@keyframes phTwinkle{from{opacity:.15}to{opacity:.9}}

/* tre */
.ph-stalk{position:absolute;z-index:6;left:0;top:0;width:170px;height:100%;pointer-events:none;filter:drop-shadow(8px 0 18px rgba(0,0,0,.55))}
.bs-cane{fill:url(#phCane)}
.bs-back{fill:url(#phCane2);opacity:.85}
.bs-node{fill:#0E1A10;opacity:.9}
.ph-branch{position:absolute;z-index:6;left:0;top:0;width:100%;height:220px;pointer-events:none;overflow:visible}
.bb-cane{fill:#3A6440}
.bb-shadow{fill:rgba(0,0,0,.45)}
.bb-hl{fill:none;stroke:rgba(190,230,170,.35);stroke-width:2;stroke-linecap:round}
.bb-node{stroke:#14261A;stroke-width:3;stroke-linecap:round}
.bb-twig{fill:none;stroke:#2E5233;stroke-width:3;stroke-linecap:round}
.ph-leaf{position:absolute;z-index:6;width:160px;height:120px;margin-left:-60px;margin-top:-10px;pointer-events:none;overflow:visible;
  transform-origin:60px 10px;animation:phLeaf 6s ease-in-out infinite alternate}
.ph-leaf.pl2{animation-delay:-2s}.ph-leaf.pl3{animation-delay:-4s}.ph-leaf.pl4{animation-delay:-1s}
@keyframes phLeaf{from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}
.lf{fill:#3E6B42}
.lf-d{fill:#24452B}
.lf-rib{stroke:rgba(200,240,180,.22);stroke-width:1.1}

/* thanh trên cùng */
.ph-top{position:absolute;z-index:8;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 44px 0 150px}
.ph-top .brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.ph-top .seal{box-shadow:0 0 0 2px rgba(227,182,92,.45),0 8px 22px rgba(190,52,32,.45)}
.ph-top .btn-trial{min-height:46px;padding:0 22px;font-size:15.5px}

/* ===== ĐÈN LỒNG ĐIỀU HƯỚNG ===== */
.ph-lans{position:absolute;z-index:7;left:0;right:0;top:0;height:0}
.lan{position:absolute;display:block;width:80px;margin-left:-40px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;outline:none}
.lan-sway{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:phSway 5s ease-in-out infinite alternate}
@keyframes phSway{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
.lan-str{display:block;width:2px;background:linear-gradient(180deg,#7A5A30,#D9A54E);box-shadow:0 0 6px rgba(255,190,90,.2)}
.lan-body{position:relative;display:block;width:80px;height:132px;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .6s}
.lan-svg{position:relative;z-index:1;display:block;width:80px;height:132px;overflow:visible}
.lan-halo{position:absolute;z-index:0;left:50%;top:58px;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,196,96,.62) 0%,rgba(255,140,52,.24) 34%,rgba(255,110,40,.06) 56%,transparent 70%);
  opacity:.16;transform:scale(.7);transition:opacity .7s ease,transform .7s ease}
.lan-ring{fill:none;stroke:#D9A54E;stroke-width:1.6}
.lan-cap{fill:#D9A54E}
.lan-b{fill:url(#phLanOff)}
.lan-lit{fill:url(#phLanOn);opacity:0;transition:opacity .7s ease}
.lan-rib{fill:none;stroke:rgba(40,8,4,.32);stroke-width:1.4}
.lan-hi{fill:rgba(255,226,180,.16)}
.lan-tas{stroke:#C43A22;stroke-width:1.6;stroke-linecap:round}
.lan-zh{position:absolute;z-index:2;left:0;right:0;top:36px;text-align:center;font-family:'Ma Shan Zheng','Noto Serif SC',serif;font-size:36px;line-height:44px;
  color:#F2C46A;text-shadow:0 1px 0 rgba(60,10,4,.5);transition:color .6s,text-shadow .6s}
.lan-tip{position:relative;margin-top:6px;padding:5px 12px;border-radius:999px;white-space:nowrap;font-size:13.5px;font-weight:800;letter-spacing:.01em;
  color:#F3E3C4;background:rgba(22,12,8,.86);border:1px solid rgba(227,182,92,.45);box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:background .4s,color .4s,border-color .4s,transform .35s}
/* hover */
.lan:hover .lan-body,.lan:focus-visible .lan-body{transform:scale(1.12)}
.lan:hover .lan-halo,.lan:focus-visible .lan-halo{opacity:.55;transform:scale(.95)}
.lan:hover .lan-tip,.lan:focus-visible .lan-tip{color:#FFF3D6;border-color:#EDC67A;transform:translateY(2px)}
.lan:focus-visible .lan-tip{box-shadow:0 0 0 2px #EDC67A}
/* đang ở phần này: sáng vàng ấm, thở + chập chờn */
.lan.on .lan-lit{opacity:1;animation:phFlicker 3.2s steps(1,end) infinite}
.lan.on .lan-halo{opacity:1;transform:scale(1);animation:phBreath 2.8s ease-in-out infinite alternate}
.lan.on .lan-zh{color:#8E1E10;text-shadow:0 0 10px rgba(255,236,190,.8)}
.lan.on .lan-tip{color:#FFF6E6;background:linear-gradient(180deg,#C83A20,#8E2216);border-color:#EDC67A}
.lan.on .lan-body{filter:drop-shadow(0 0 18px rgba(255,170,70,.65))}
@keyframes phBreath{from{opacity:.72;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
@keyframes phFlicker{0%{opacity:1}8%{opacity:.88}11%{opacity:1}46%{opacity:.94}49%{opacity:1}71%{opacity:.9}74%{opacity:1}}


/* chữ hero */
.ph-copy{position:relative;z-index:5;max-width:700px;margin-left:150px;padding-top:352px;text-shadow:0 2px 26px rgba(0,0,0,.65)}
.ph-copy .kicker{background:rgba(26,15,10,.72);border-color:rgba(227,182,92,.35);color:#E6D4B4}
.ph-copy .kicker .zh{color:#F7EBD3}
.ph-copy .h1{font-size:66px;margin:22px 0 20px;color:#FBF0DA}
.ph-copy .h1 .em{background:linear-gradient(180deg,#FFE9B0 0%,#F2C062 55%,#D9973A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-copy .h1 .em path{stroke:#BE3420;opacity:.95}
.ph-copy .lead{color:#FBF0DA}
.ph-copy .lead-2{color:#DCCBAE;margin-bottom:28px}
.ph-copy .hero-price{color:#D2C1A4}
.ph-copy .hero-price b{color:#F2C062}
.ph-copy .hero-price i{background:rgba(227,182,92,.5)}

/* màn hình thật nhô lên từ lan can */
.ph-show{position:relative;z-index:3;margin-top:-70px;padding:0 24px 80px}
.ph-show::before{content:'';position:absolute;left:50%;top:10%;width:1000px;height:560px;margin-left:-500px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,150,60,.2) 0%,rgba(190,52,32,.08) 45%,transparent 70%)}
.ph-show-in{max-width:780px;margin:0 auto}
.ph-show .laptop{transform:rotateY(-6deg) rotateX(3deg)}
.lp--palace .lap-screen{background:#1A100B;box-shadow:0 4cqw 9cqw rgba(0,0,0,.6),0 0 0 .2cqw rgba(227,182,92,.35) inset}
.lp--palace .lap-base{background:linear-gradient(#C9A36A,#7A5A33)}
.lp--palace .lap-base::after{background:#6A4C2A}
.lp--palace .phone{background:#120A07;border-color:#5A3E22}

/* ===== RAIL: chuỗi đèn lồng treo dọc mép phải — luôn hiện, tên nằm sẵn cạnh từng đèn ===== */
.ph-rail{position:fixed;z-index:80;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding:22px 0 6px}
.rail-rod{position:absolute;top:0;right:-10px;width:60px;height:10px;border-radius:6px;background:linear-gradient(180deg,#5C8A55,#2C4E30);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.rail-rod::before,.rail-rod::after{content:'';position:absolute;top:1px;width:3px;height:8px;border-radius:2px;background:#1C3320}
.rail-rod::before{left:16px}.rail-rod::after{right:12px}
.rail-cord{position:absolute;top:8px;bottom:8px;right:16px;width:2px;background:linear-gradient(180deg,#D9A54E,#7A5A30)}
.rl{position:relative;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.rl-l{position:relative;display:block;width:34px;height:50px;flex:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .5s}
.rl-svg{display:block;width:34px;height:50px;overflow:visible}
.rl-zh{position:absolute;left:0;right:0;top:11px;text-align:center;font-family:'Ma Shan Zheng',serif;font-size:17px;line-height:22px;color:#F2C46A;transition:color .5s}
.rl-tip{display:block;white-space:nowrap;padding:6px 13px;border-radius:999px;font-size:13.5px;font-weight:800;line-height:1.2;
  color:#F3E3C4;background:rgba(22,12,8,.88);border:1px solid rgba(227,182,92,.42);box-shadow:0 6px 16px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .4s,color .4s,border-color .4s,transform .3s}
.rl:hover .rl-l,.rl:focus-visible .rl-l{transform:scale(1.15)}
.rl:hover .rl-tip,.rl:focus-visible .rl-tip{color:#FFF3D6;border-color:#EDC67A;transform:translateX(-3px)}
.rl:focus-visible .rl-tip{box-shadow:0 0 0 2px #EDC67A}
.rl.on .lan-lit{opacity:1}
.rl.on .rl-zh{color:#8E1E10}
.rl.on .rl-l{filter:drop-shadow(0 0 12px rgba(255,170,70,.85));transform:scale(1.12)}
.rl.on .rl-tip{color:#FFF6E6;background:linear-gradient(180deg,#C83A20,#8E2216);border-color:#EDC67A}
/* màn rộng chưa đủ chỗ: chừa lề phải để chuỗi đèn không đè nội dung */
@media (min-width:1280px) and (max-width:1527px){
  .lp--palace .sec,.lp--palace .stats-sec,.lp--palace .cta-band,.lp--palace .foot{padding-left:164px;padding-right:164px}
}
/* trên canvas khung cao bằng cả trang: đặt chuỗi đèn ở đầu trang thay vì giữa khung */
@media (min-height:2400px){.ph-rail{position:absolute;top:170px;transform:none}}

/* ================= CÁC PHẦN PHÍA DƯỚI ================= */
.lp--palace .marquee{background:#140C08;border-color:rgba(227,182,92,.18)}
.lp--palace .marquee .zh{color:#EDC67A}
.lp--palace .mq-dot{background:#BE3420}
.lp--palace .stats-sec{background:var(--bg)}
.lp--palace .stat .stat-n{color:#EDC67A}
.lp--palace .eyebrow{padding:7px 16px;border-radius:4px;color:#F2C46A;background:linear-gradient(180deg,#2A170E,#1A0E09);border:1px solid rgba(227,182,92,.4);
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,220,160,.12)}
.lp--palace .eyebrow::before,.lp--palace .eyebrow::after{width:6px;height:6px;border-radius:50%;background:#BE3420;opacity:1;box-shadow:0 0 8px rgba(255,120,60,.8)}
.lp--palace .h2 .hl{background:linear-gradient(180deg,#FFE3A0,#E2A548);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp--palace .wm{color:#E3B65C;opacity:.05}
/* nền gỗ có song cửa cho vài phần */
.lp--palace .ph-lat{background:
  radial-gradient(ellipse 80% 50% at 50% 0%,rgba(190,52,32,.14),transparent 70%),
  repeating-linear-gradient(0deg,transparent 0 55px,rgba(227,182,92,.045) 55px 56px),
  repeating-linear-gradient(90deg,transparent 0 55px,rgba(227,182,92,.045) 55px 56px),
  #140C08}
/* mái ngói ở mép trên */
.ph-eave{position:absolute;z-index:2;left:0;right:0;top:0;height:30px;pointer-events:none;
  background:radial-gradient(circle at 15px 0,#2A1A12 0 13px,rgba(227,182,92,.4) 13.5px 14.6px,transparent 15.2px) 0 0/30px 30px repeat-x;
  border-top:4px solid #3A2418;box-shadow:0 -1px 0 rgba(227,182,92,.4)}
/* phần đăng ký: đêm hội đèn lồng */
.lp--palace .cta-band{--sky1:#0E0907;--sky2:#2A100B;--hill3:#3A1A12;--hill2:#2A120C;--hill:#1A0B08;--water:#120806;--bg:#0E0907;--boat:#050302;--fog:rgba(255,190,140,.08);
  background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(224,110,40,.3),transparent 70%),linear-gradient(180deg,#0E0907 0%,#1E0C08 50%,#3A130B 100%)}
.lp--palace .foot{background:#0B0705}

@media (prefers-reduced-motion:reduce){
  .lan-sway,.ph-leaf,.ph-dust,.ph-mist,.ph-star,.tl-glow,.lan.on .lan-halo,.lan.on .lan-lit,.ph-moon{animation:none!important}
}

/* ---------- máy tính bảng ---------- */
@media (max-width:1100px){
  .ph-copy{margin-left:120px;max-width:600px}
  .ph-copy .h1{font-size:56px}
  .lan{transform:scale(.82);transform-origin:50% 0}
  .ph-hint{display:none}
}
/* ---------- màn < 1280px: chuỗi đèn thành thanh ngang trên đỉnh ---------- */
@media (max-width:1279px){
  /* chuỗi đèn thành thanh ngang trên đỉnh, luôn hiện */
  .ph-rail{top:0;left:0;right:0;transform:none;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:0;padding:6px 4px 5px;overflow-x:auto;scrollbar-width:none;
    background:linear-gradient(180deg,rgba(14,9,7,.97),rgba(14,9,7,.9));border-bottom:1px solid rgba(227,182,92,.32);box-shadow:0 8px 24px rgba(0,0,0,.5);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .ph-rail::-webkit-scrollbar{display:none}
  .rail-rod,.rail-cord{display:none}
  .rl{flex:0 0 auto;flex-direction:column;gap:2px;width:64px;padding:2px 0}
  .rl-l{width:26px;height:38px}.rl-svg{width:26px;height:38px}
  .rl-zh{top:8px;font-size:13px;line-height:17px}
  .rl-tip{width:62px;box-sizing:border-box;padding:2px 2px 0;white-space:normal;text-align:center;font-size:10.5px;line-height:1.15;
    color:#CDBB9E;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .rl.on .rl-tip{color:#F2C46A;background:none}
  .rl:hover .rl-tip{transform:none}
  .rl:first-of-type{margin-left:auto}.rl:last-of-type{margin-right:auto}
  .ph-top{padding-top:84px}
  .ph-branch,.ph-lans{margin-top:70px}
  .ph-leaf{margin-top:60px}
  .ph-stalk{top:70px}
  .ph-copy{padding-top:422px}
  .lp--palace section[id]{scroll-margin-top:72px}
  @media (min-height:2400px){.ph-rail{position:absolute;top:0}}
}
/* ---------- điện thoại ---------- */
@media (max-width:760px){
  .ph-stage{height:auto;padding-bottom:330px}
  .ph-veil{background:linear-gradient(180deg,rgba(6,4,6,.2) 0%,rgba(6,4,6,.72) 30%,rgba(6,4,6,.6) 62%,transparent 80%)}
  .ph-stalk{left:-12px;width:64px;height:250px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .ph-top{padding:84px 14px 0 34px}
  .ph-lans{left:30px;right:4px}
  .ph-lans .lan{margin-top:-10px}
  .ph-top .brand-t small{display:none}
  .ph-top .brand-t b{font-size:15.5px}
  .ph-top .seal{width:34px;height:34px;font-size:20px}
  .ph-top .btn-trial{min-height:40px;padding:0 14px;font-size:13.5px}
  .lan{transform:scale(.46);transform-origin:50% 0}
  .lan .lan-tip{display:none}
  .ph-leaf{transform:scale(.6)}
  .ph-leaf.pl2,.ph-leaf.pl3{display:none}
  .ph-copy{margin:0;padding:250px 20px 0;max-width:none}
  .ph-copy .h1{font-size:40px;margin:16px 0 14px}
  .ph-copy .lead{font-size:18.5px}
  .ph-copy .lead-2{font-size:16px}
  .ph-copy .cta-row .btn{flex:1 1 100%}
  .pm1{top:auto;bottom:220px}.pm2{top:auto;bottom:90px}
  .ph-show{margin-top:-90px;padding:0 16px 56px}
  .ph-show::before{width:600px;margin-left:-300px;height:400px}
  .ph-copy{padding-top:322px}
  .lp--palace section[id]{scroll-margin-top:72px}
  @media (min-height:2400px){.ph-rail{position:absolute;top:0}}
}

/* ===== Nền tranh FLUX (13/11): cung điện đêm + đêm hội đèn lồng ===== */
.ph-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B0710}
.ph-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 72%;display:block;transform-origin:72% 60%;animation:phKen 48s ease-in-out infinite alternate}
@keyframes phKen{from{transform:scale(1)}to{transform:scale(1.07)}}
.ph-stage .ph-veil{background:
  linear-gradient(180deg,rgba(6,4,8,.66) 0%,rgba(6,4,8,.22) 24%,transparent 42%),
  radial-gradient(ellipse 56% 62% at 25% 62%,rgba(6,4,6,.82) 0%,rgba(6,4,6,.5) 48%,transparent 78%),
  linear-gradient(90deg,rgba(6,4,6,.5) 0%,transparent 50%),
  linear-gradient(180deg,transparent 74%,rgba(14,9,7,.9) 100%)}
.ph-stage .ph-mist{opacity:.55}
.lp--palace .cta-band{background:#0E0907}
.lp--palace .cta-band > .stars,.lp--palace .cta-band > .cta-moon,.lp--palace .cta-band > .lake,.lp--palace .cta-band > .kl,.lp--palace .cta-band > .cta-lant{display:none}
.lp--palace .cta-band h2,.lp--palace .cta-band p{text-shadow:0 2px 24px rgba(0,0,0,.75)}
@media (prefers-reduced-motion:reduce){.ph-bg img{animation:none}}
@media (max-width:760px){
  .ph-bg img{object-position:42% 100%}
  .ph-stage .ph-veil{background:linear-gradient(180deg,rgba(6,4,8,.55) 0%,rgba(6,4,8,.72) 28%,rgba(6,4,8,.62) 58%,rgba(6,4,8,.1) 78%,rgba(14,9,7,.9) 100%)}
  .lp--palace .cta-band{background-position:30% 60%,center,40% 60%}
}

/* ===== Chỉnh sau buổi soát (13/11) ===== */
/* màn hình trong laptop/điện thoại: ảnh giao diện sáng (hợp nền mực hơn bản navy) */
.lp--palace .ph-show .shot-d{display:none}
.lp--palace .ph-show .shot-l{display:block}
.lp--palace .lap-screen .scr-bar{background:#F2E9D7;color:#5B5872}
.ph-show{padding-bottom:36px}
@media (max-width:760px){
  .ph-copy .hero-price{display:inline-flex;padding:10px 14px;border-radius:14px;background:rgba(10,6,8,.62);border:1px solid rgba(227,182,92,.25);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .lp--palace .once-note i{display:none}
  .lp--palace .once-note{gap:4px 14px}
}

/* ===== Tranh FLUX cho 3 thẻ, Bảng giá, Một ngày học (13/11) ===== */
.lp--palace .aud-art{background:#1A100B}
.lp--palace .aud-art .aud-svg,.lp--palace .aud-art .aud-ch{display:none}
.lp--palace .aud-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lp--palace .aud-st .aud-photo{object-position:62% 40%}
.lp--palace .aud-art::after{inset:0;height:auto;z-index:1;background:linear-gradient(180deg,rgba(14,9,7,0) 50%,rgba(28,19,14,.92) 100%)}
.lp--palace .aud:hover .aud-photo{transform:scale(1.06)}
.lp--palace #bang-gia.ph-lat{background:#140C08}
@media (prefers-reduced-motion:reduce){.lp--palace .aud-photo{transition:none}}
/* màn 1280–1527px (có chừa lề cho chuỗi đèn): thẻ giá gọn lại để tên gói và giá không xuống dòng */
@media (min-width:1280px) and (max-width:1527px){
  .lp--palace .plan{padding:30px 22px 26px}
  .lp--palace .plan-top{padding-right:0}
  .lp--palace .plan--pop{overflow:visible}
  .lp--palace .plan--pop > .pop-badge{top:-14px;right:50%;transform:translateX(50%);box-shadow:0 8px 20px rgba(0,0,0,.35)}
  .lp--palace .plan h3{font-size:23px;white-space:nowrap}
  .lp--palace .price{flex-wrap:nowrap}
  .lp--palace .price b{font-size:44px}
  .lp--palace .price .per{font-size:15.5px;margin-left:4px}
}

/* =====================================================================
   HIỆU ỨNG (13/11) — chỉ có tác dụng khi ph-anim.js thêm html.ph-anim-on
   ===================================================================== */
@property --don{syntax:'<angle>';inherits:false;initial-value:360deg}
.ph-fly{display:none}

/* ---------- 1. Mở trang ---------- */
html.ph-anim-on .ph-bg{animation:phBgIn 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes phBgIn{from{scale:1.14;filter:brightness(.35) saturate(.7)}to{scale:1;filter:none}}
html.ph-anim-on .ph-stalk{animation:phGrowUp 1.1s cubic-bezier(.3,.7,.2,1) .15s both}
@keyframes phGrowUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
html.ph-anim-on .ph-branch{animation:phGrowRight 1.2s cubic-bezier(.4,.1,.2,1) .45s both}
@keyframes phGrowRight{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
html.ph-anim-on .ph-leaf{animation:phLeafIn .8s cubic-bezier(.2,.8,.2,1) both,phLeaf 6s ease-in-out 1.6s infinite alternate}
html.ph-anim-on .ph-leaf.pl1{animation-delay:.9s,1.7s}
html.ph-anim-on .ph-leaf.pl2{animation-delay:1.1s,1.9s}
html.ph-anim-on .ph-leaf.pl3{animation-delay:1.3s,2.1s}
html.ph-anim-on .ph-leaf.pl4{animation-delay:1.45s,2.3s}
@keyframes phLeafIn{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
html.ph-anim-on .ph-lans .lan{animation:phDrop 1.05s cubic-bezier(.3,.6,.3,1) both}
@keyframes phDrop{0%{opacity:0;translate:0 -190px}55%{opacity:1;translate:0 14px}75%{translate:0 -6px}90%{translate:0 2px}100%{opacity:1;translate:0 0}}
html.ph-anim-on .ph-lans .lan:nth-child(1){animation-delay:.75s}
html.ph-anim-on .ph-lans .lan:nth-child(2){animation-delay:.85s}
html.ph-anim-on .ph-lans .lan:nth-child(3){animation-delay:.95s}
html.ph-anim-on .ph-lans .lan:nth-child(4){animation-delay:1.05s}
html.ph-anim-on .ph-lans .lan:nth-child(5){animation-delay:1.15s}
html.ph-anim-on .ph-lans .lan:nth-child(6){animation-delay:1.25s}
html.ph-anim-on .ph-lans .lan:nth-child(7){animation-delay:1.35s}
html.ph-anim-on .ph-lans .lan:nth-child(8){animation-delay:1.45s}
html.ph-anim-on .ph-lans .lan:nth-child(9){animation-delay:1.55s}
html.ph-anim-on .ph-top{animation:phFadeDown .8s ease .2s both}
@keyframes phFadeDown{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
html.ph-anim-on .ph-copy > *{animation:phRise .9s cubic-bezier(.2,.7,.2,1) both}
html.ph-anim-on .ph-copy > .kicker{animation-delay:1.1s}
html.ph-anim-on .ph-copy > .h1{animation:phInk 1.5s cubic-bezier(.3,.6,.2,1) 1.25s both}
html.ph-anim-on .ph-copy > .lead{animation-delay:1.75s}
html.ph-anim-on .ph-copy > .lead-2{animation-delay:1.9s}
html.ph-anim-on .ph-copy > .cta-row{animation-delay:2.05s}
html.ph-anim-on .ph-copy > .hero-price{animation-delay:2.2s}
@keyframes phRise{from{opacity:0;translate:0 26px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes phInk{from{-webkit-mask-position:100% 0;mask-position:100% 0;translate:0 12px}to{-webkit-mask-position:0 0;mask-position:0 0;translate:0 0}}
html.ph-anim-on .ph-copy > .h1,
html.ph-anim-on .rv-ink{
  -webkit-mask-image:linear-gradient(100deg,#000 38%,rgba(0,0,0,.35) 46%,transparent 56%);
  mask-image:linear-gradient(100deg,#000 38%,rgba(0,0,0,.35) 46%,transparent 56%);
  -webkit-mask-size:320% 100%;mask-size:320% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
html.ph-anim-on .ph-copy .h1 .em path{stroke-dasharray:1;stroke-dashoffset:1;animation:phStroke .9s cubic-bezier(.5,0,.2,1) 2.35s forwards}
@keyframes phStroke{to{stroke-dashoffset:0}}
html.ph-anim-on .ph-show{animation:phRise 1.2s cubic-bezier(.2,.7,.2,1) 1.6s both}
html.ph-anim-on .ph-rail{animation:phRailIn .9s cubic-bezier(.2,.8,.2,1) 1.9s both}
@keyframes phRailIn{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}
@keyframes phRailDown{from{opacity:0;translate:0 -60px}to{opacity:1;translate:0 0}}
@media (max-width:1279px){html.ph-anim-on .ph-rail{animation-name:phRailDown}}

/* ---------- 2. Hiện dần khi cuộn ---------- */
html.ph-anim-on .rv{transition-property:opacity,translate,rotate,scale,filter,-webkit-mask-position,mask-position;transition-timing-function:cubic-bezier(.2,.7,.2,1);transition-duration:.9s;transition-delay:calc(var(--i,0) * 90ms)}
html.ph-anim-on .rv-up:not(.in){opacity:0;translate:0 38px;filter:blur(5px)}
html.ph-anim-on .rv-side:not(.in){opacity:0;translate:60px 0}
html.ph-anim-on .rv-ink{transition-duration:1.3s;-webkit-mask-position:100% 0;mask-position:100% 0}
html.ph-anim-on .rv-ink.in{-webkit-mask-position:0 0;mask-position:0 0}
html.ph-anim-on .rv-plaque{transform-origin:50% -40px}
html.ph-anim-on .rv-plaque:not(.in){opacity:0;translate:0 -36px;rotate:-12deg}
html.ph-anim-on .rv-plaque.in{animation:phSwing 1.4s cubic-bezier(.3,.6,.3,1)}
@keyframes phSwing{0%{opacity:0;translate:0 -36px;rotate:-12deg}45%{opacity:1;translate:0 0;rotate:7deg}65%{rotate:-4deg}82%{rotate:2deg}100%{rotate:0deg}}
html.ph-anim-on .rv-eave{transform-origin:50% 0}
html.ph-anim-on .rv-eave:not(.in){scale:0 1;opacity:0}
html.ph-anim-on .rv-eave.in{transition-duration:1.1s}
/* 4 điện thoại xoè ra như quạt */
html.ph-anim-on .rv-fan{transform-origin:50% 120%}
html.ph-anim-on .rv-fan:not(.in){opacity:0;translate:calc((1.5 - var(--i,0)) * 90px) 70px;rotate:calc((var(--i,0) - 1.5) * -9deg)}
html.ph-anim-on .rv-fan.in{transition-duration:1.1s}

/* ---------- 3. Từng phần ---------- */
/* vòng 15 phút tự tô */
html.ph-anim-on .rv-donut svg{-webkit-mask-image:conic-gradient(#000 var(--don),transparent 0);mask-image:conic-gradient(#000 var(--don),transparent 0)}
html.ph-anim-on .rv-donut:not(.in) svg{--don:0deg}
html.ph-anim-on .rv-donut.in svg{animation:phDonut 1.6s cubic-bezier(.4,.1,.2,1) .2s both}
@keyframes phDonut{from{--don:0deg}to{--don:360deg}}
html.ph-anim-on .rv-donut .donut-c{transition:opacity .8s .9s,scale .8s .9s}
html.ph-anim-on .rv-donut:not(.in) .donut-c{opacity:0;scale:.7}
/* đường nối 4 bước vẽ dần theo cuộn, chấm sáng như đèn */
html.ph-anim-on .tl::before{transform-origin:50% 0;transform:scaleY(var(--tlp,0));transition:transform .15s linear}
html.ph-anim-on .tl-step::before{transition:background .5s,box-shadow .5s,scale .5s}
html.ph-anim-on .tl-step.lit::before{background:var(--c,var(--red));box-shadow:0 0 0 5px color-mix(in srgb,var(--c,#BE3420) 22%,transparent),0 0 22px var(--c,#BE3420);scale:1.15}
/* thẻ Chăm chỉ toả sáng một lần + vệt sáng lướt qua nhãn */
html.ph-anim-on .rv-pop.in{animation:phPopGlow 2s ease .5s 1}
@keyframes phPopGlow{0%,100%{box-shadow:0 36px 80px rgba(158,39,30,.45),inset 0 1px 0 rgba(255,255,255,.18)}45%{box-shadow:0 36px 110px rgba(255,140,60,.75),0 0 0 3px rgba(237,198,122,.65),inset 0 1px 0 rgba(255,255,255,.3)}}
html.ph-anim-on .plan--pop > .pop-badge{background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0}
html.ph-anim-on .rv-pop.in > .pop-badge{animation:phShine 1.2s ease 1.3s 2}
@keyframes phShine{from{background-position:160% 0}to{background-position:-60% 0}}
/* phần Đăng ký: con dấu đóng xuống, bao lì xì mở, đèn bay lên */
html.ph-anim-on .cta-in > .seal{position:relative}
html.ph-anim-on .cta-in > .seal.rv-plaque.in{animation:phStamp .9s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes phStamp{0%{opacity:0;scale:2.6;rotate:-18deg;filter:blur(3px)}60%{opacity:1;scale:.9;rotate:3deg;filter:none}80%{scale:1.06}100%{scale:1;rotate:0deg}}
html.ph-anim-on .cta-in > .seal.in::after{content:'';position:absolute;inset:-6px;border-radius:14px;border:2px solid rgba(237,198,122,.8);animation:phRipple 1s ease-out .45s both}
@keyframes phRipple{from{opacity:.9;scale:.8}to{opacity:0;scale:2.2}}
html.ph-anim-on .rv-env{transition:opacity .8s,translate .9s cubic-bezier(.2,.7,.2,1)}
html.ph-anim-on .rv-env:not(.in){opacity:0;translate:0 40px}
html.ph-anim-on .rv-env .qr{transition:translate 1s cubic-bezier(.2,.8,.2,1) .35s,opacity .8s .35s}
html.ph-anim-on .rv-env:not(.in) .qr{translate:0 60px;opacity:0}
html.ph-anim-on .rv-env .env-coin{transition:scale .6s cubic-bezier(.3,1.6,.4,1) .9s,rotate .6s .9s}
html.ph-anim-on .rv-env:not(.in) .env-coin{scale:0;rotate:-90deg}
html.ph-anim-on .ph-fly{display:block;position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.ph-fly i{position:absolute;bottom:-60px;width:16px;height:20px;border-radius:45% 45% 40% 40%;opacity:0;
  background:radial-gradient(ellipse at 50% 40%,#FFE7A8 0%,#FFB04A 35%,#E2452A 75%,#9C2618 100%);box-shadow:0 0 18px 6px rgba(255,150,60,.35)}
.ph-fly i::before,.ph-fly i::after{content:'';position:absolute;left:30%;right:30%;height:12%;background:#7A2A12}
.ph-fly i::before{top:-6%}
.ph-fly i::after{bottom:-6%}
html.ph-anim-on .cta-band.in .ph-fly i{animation-name:phFly;animation-timing-function:linear;animation-iteration-count:infinite}
html.ph-anim-on .cta-band.in .ph-fly i:nth-child(even){animation-name:phFly2}
@keyframes phFly{0%{opacity:0;translate:0 0;rotate:-4deg}10%{opacity:.95}50%{translate:30px -55vh;rotate:5deg}85%{opacity:.75}100%{opacity:0;translate:-15px -105vh;rotate:-3deg}}
@keyframes phFly2{0%{opacity:0;translate:0 0;rotate:4deg}10%{opacity:.9}50%{translate:-35px -50vh;rotate:-5deg}85%{opacity:.7}100%{opacity:0;translate:18px -100vh;rotate:3deg}}

/* ---------- 4. Chiều sâu khi cuộn (biến --py do JS đặt) ---------- */
html.ph-anim-on .ph-bg{will-change:translate}

@media (max-width:760px){
  html.ph-anim-on .rv-side:not(.in){translate:0 40px}
  html.ph-anim-on .rv-fan:not(.in){translate:0 60px;rotate:0deg}
}
@media (prefers-reduced-motion:reduce){html.ph-anim-on:not(.ph-anim-force) *{animation:none!important;transition:none!important}}

/* =====================================================================
   CHIỀU SÂU HÀNH TRÌNH (14/11) — "càng đi sâu càng khó thoát ra"
   Mọi thứ nằm dưới html.ph-anim-on: không có class đó thì trang hiện đủ
   100% nội dung ở trạng thái cuối (canvas, giảm chuyển động, tắt JS).
   ===================================================================== */

/* ---------- 1. Lớp chiều sâu toàn trang ----------
   .ph-deep là phần tử ANH EM của các section, KHÔNG phải ::before của .lp.
   Lý do: .ph-rail là position:fixed — nếu tổ tiên của nó có transform/filter/
   contain:paint thì nó bị neo vào đó và cuộn mất. */
.ph-deep{position:fixed;inset:0;z-index:1;pointer-events:none;contain:layout paint}
.ph-deep > i{position:absolute;inset:-4%;display:block;opacity:0}
.pd-vig{background:radial-gradient(ellipse 74% 64% at 50% 46%,transparent 36%,rgba(6,4,6,.58) 80%,rgba(6,4,6,.9) 100%)}
.pd-warm{background:radial-gradient(ellipse 92% 72% at 50% 110%,rgba(224,110,40,.28),transparent 64%)}
html.ph-anim-on .pd-vig{opacity:calc(var(--ph-depth,0) * .9)}
html.ph-anim-on .pd-warm{opacity:var(--ph-end,0)}

/* ---------- 2. Mỗi phần là một cái sân: bước ra từ bóng tối ---------- */
.ph-shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(6,4,6,.94) 0%,rgba(6,4,6,.66) 24%,rgba(6,4,6,.18) 46%,transparent 62%)}
html.ph-anim-on .ph-court > .ph-shade{opacity:1;transition:opacity 1.15s cubic-bezier(.2,.7,.2,1)}
html.ph-anim-on .ph-court.in > .ph-shade{opacity:0}
/* nội dung luôn nằm trên màn tối và trên lớp cảnh */
.lp--palace .ph-court > .wrap{z-index:2}

/* ---------- 2b. Lớp cảnh của mỗi sân ----------
   Cắt ở .sc, TUYỆT ĐỐI không đặt overflow lên .sec — sẽ phá position:sticky
   của .day-clock (#mot-ngay) và .faq-side (#hoi-dap). */
.sc{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#0E0907}
.sc-img{position:absolute;left:50%;top:50%;width:104%;height:108%;object-fit:cover;
  translate:-50% -50%;opacity:.86}
/* hoà mép trên và mép dưới để hai cảnh liền nhau không thành đường cắt */
.sc::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,#0E0907 0%,rgba(14,9,7,.35) 14%,rgba(14,9,7,.22) 50%,rgba(14,9,7,.45) 86%,#0E0907 100%)}
/* trôi rất chậm theo cuộn (JS đặt --scy); điện thoại đứng yên */
html.ph-anim-on .sc-img{translate:-50% calc(-50% + var(--scy,0px))}

/* đom đóm — chỉ chạy khi phần đó đang trong màn */
.sc-fly{position:absolute;inset:0;z-index:1;display:block}
.sc-fly i{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0;
  background:#FFE08A;box-shadow:0 0 10px 3px rgba(255,200,90,.5)}
html.ph-anim-on .ph-court.vis .sc-fly i{animation-name:phFire;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
html.ph-anim-on .ph-court.vis .sc-fly i:nth-child(even){animation-name:phFire2}
@keyframes phFire{0%{opacity:0;translate:0 0}15%{opacity:.9}50%{opacity:.35;translate:34px -70px}75%{opacity:.85}100%{opacity:0;translate:-12px -150px}}
@keyframes phFire2{0%{opacity:0;translate:0 0}18%{opacity:.8}50%{opacity:.3;translate:-40px -60px}78%{opacity:.75}100%{opacity:0;translate:16px -130px}}

/* ---------- 3. Ngưỡng cửa dính: đi dưới mái này sang mái khác ----------
   height:0 → không ảnh hưởng layout; trên canvas chỉ nằm im ở đầu phần. */
.ph-thresh{position:sticky;top:var(--rail-h,0px);height:0;z-index:3;pointer-events:none}
/* tràn theo bề rộng màn hình, không theo lề của section (có breakpoint chừa lề cho chuỗi đèn) */
.ph-thresh::before{content:'';position:absolute;top:0;left:50%;margin-left:-52vw;width:104vw;height:74px;opacity:0;
  background:
    radial-gradient(circle at 15px 0,#2A1A12 0 13px,rgba(227,182,92,.42) 13.5px 14.6px,transparent 15.2px) 0 0/30px 30px repeat-x,
    linear-gradient(180deg,#1E100B 0 16px,rgba(26,14,10,.82) 16px 34px,rgba(14,9,7,.35) 34px,transparent);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
  transition:opacity .7s ease}
html.ph-anim-on .ph-court.vis > .ph-thresh::before{opacity:1}
/* nơi nào đã có ngưỡng cửa dính thì ẩn mái tĩnh cũ, tránh hai lớp mái chồng nhau */
html.ph-anim-on .ph-court > .ph-thresh ~ .ph-eave{display:none}

/* ---------- 4. Parallax nhiều lớp ở đầu trang ----------
   JS chỉ ghi MỘT biến --sy trên .ph-stage; mỗi lớp tự nhân với --k của nó. */
html.ph-anim-on .ph-hero .ph-bg,
html.ph-anim-on .ph-hero .ph-mist,
html.ph-anim-on .ph-hero .ph-dusts,
html.ph-anim-on .ph-hero .ph-stalk,
html.ph-anim-on .ph-hero .ph-branch,
html.ph-anim-on .ph-hero .ph-lans,
html.ph-anim-on .ph-hero .ph-copy,
html.ph-anim-on .ph-hero .ph-show{translate:0 calc(var(--sy,0px) * var(--k,0))}
html.ph-anim-on .ph-bg{--k:.22}
html.ph-anim-on .ph-mist.pm1{--k:.34}
html.ph-anim-on .ph-mist.pm2{--k:.42}
html.ph-anim-on .ph-dusts{--k:.58}
html.ph-anim-on .ph-stalk{--k:.66}
html.ph-anim-on .ph-branch{--k:.78}
html.ph-anim-on .ph-lans{--k:.50}
html.ph-anim-on .ph-copy{--k:.12}
html.ph-anim-on .ph-show{--k:-.06}   /* đi ngược chiều → não đọc ra chiều sâu rõ hơn */
/* bọc 22 hạt bụi vào một lớp duy nhất thay vì 22 lớp riêng */
.ph-dusts{position:absolute;inset:0;z-index:4;pointer-events:none}
/* rời hero: cảnh tối lại, chữ lùi đi */
html.ph-anim-on .ph-bg{opacity:calc(1 - var(--hp,0) * .55)}
html.ph-anim-on .ph-copy{opacity:calc(1 - var(--hp,0) * 1.5)}

/* ---------- 5. Đèn mục lục = bản đồ hành trình ---------- */
.rl.past .lan-lit{opacity:.42}
.rl.past .rl-zh{color:#C8884A}
.rl.past .rl-tip{color:#BFAC8E}
.rl.past .rl-l{filter:drop-shadow(0 0 6px rgba(255,170,70,.35))}
.lan.past .lan-lit{opacity:.34}

/* ---------- 6. Tạm dừng mọi chuyển động nền khi ra khỏi màn ---------- */
html.ph-anim-on .ph-hero:not(.vis) .ph-bg img,
html.ph-anim-on .ph-hero:not(.vis) .ph-mist,
html.ph-anim-on .ph-hero:not(.vis) .ph-dust,
html.ph-anim-on .ph-hero:not(.vis) .ph-leaf,
html.ph-anim-on .ph-hero:not(.vis) .lan-sway,
html.ph-anim-on .cta-band:not(.vis) .ph-fly i{animation-play-state:paused}

/* ---------- 7. Hiệu năng ---------- */
html.ph-anim-on .ph-hero.vis .ph-bg{will-change:translate,opacity}
html.ph-anim-on .ph-hero:not(.vis) .ph-bg{will-change:auto}

@media (max-width:1279px){
  :root{--rail-h:72px}
}
@media (max-width:760px){
  /* điện thoại nhẹ hơn: chỉ 3 lớp parallax, bỏ làm mờ khi hiện ra */
  html.ph-anim-on .ph-mist,html.ph-anim-on .ph-stalk,html.ph-anim-on .ph-branch,
  html.ph-anim-on .ph-lans,html.ph-anim-on .ph-show{--k:0}
  html.ph-anim-on .rv-up:not(.in){filter:none}
  /* cắt bớt hạt sáng cho đỡ hao pin */
  .ph-dusts .ph-dust:nth-child(n+9){display:none}
  .ph-fly i:nth-child(n+9){display:none}
  .ph-thresh::before{height:58px}
}

/* ===== Nền Bảng giá và Đăng ký: chuyển từ background CSS sang <img> tải trễ (14/11) =====
   Lý do: ảnh nền CSS được tải ngay từ màn đầu dù phần đó nằm cuối trang (196 + 96 KB).
   Lớp phủ chuyển sang .sc::after để vẫn nằm TRÊN ảnh. */
.sc--silk .sc-img,.sc--fest .sc-img{opacity:1}
.sc--fest .sc-img{object-position:center 60%}
.sc--silk::after{background:
  radial-gradient(ellipse 80% 55% at 50% 0%,rgba(190,52,32,.2),transparent 70%),
  linear-gradient(180deg,rgba(14,9,7,.85) 0%,rgba(14,9,7,.5) 22%,rgba(14,9,7,.55) 75%,rgba(14,9,7,.94) 100%)}
.sc--fest::after{background:
  radial-gradient(ellipse 46% 42% at 50% 44%,rgba(8,6,14,.8) 0%,rgba(8,6,14,.42) 62%,transparent 100%),
  linear-gradient(180deg,#0E0907 0%,rgba(14,9,7,.25) 16%,rgba(14,9,7,.12) 78%,#0B0705 100%)}

/* ===== Ảnh đầu trang trên điện thoại (14/11) =====
   Trước: ảnh phủ kín khung cao ~1480px bằng object-fit:cover, mà ảnh chỉ 880×1536
   → bị phóng theo chiều cao rồi cắt còn một dải dọc hẹp, mất hẳn bố cục.
   Giờ: neo ảnh ở ĐÁY, giữ đúng tỷ lệ; phía trên là trời đêm, hoà bằng dải chuyển màu. */
@media (max-width:760px){
  .ph-bg img{inset:auto auto 0 50%;width:128%;height:auto;object-fit:contain;translate:-50% 0;transform-origin:50% 100%}
  .ph-bg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,#0B0710 0%,rgba(11,7,16,.72) 12%,rgba(11,7,16,.18) 30%,transparent 48%)}
}

/* ===== Nối đầu trang xuống dải số liệu (14/11) =====
   Trước: cảnh cung điện kết thúc rồi cắt thẳng sang nền đen. Giờ sân đá ướt
   (cắt từ chính ảnh cung điện, 7 KB) chảy tiếp xuống dải chữ chạy và dải số liệu. */
.ph-terr{position:relative;isolation:isolate}
.ph-terr::before,.ph-terr::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.ph-terr::before{background:url(../img/ph-terrace.webp) center top/cover no-repeat,#0E0907}
.ph-terr::after{background:linear-gradient(180deg,rgba(14,9,7,.62) 0%,rgba(14,9,7,.3) 26%,rgba(14,9,7,.52) 66%,#0E0907 100%)}
.lp--palace .ph-terr .marquee{background:rgba(10,6,5,.5);border-color:rgba(227,182,92,.22);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.lp--palace .ph-terr .stats-sec{background:transparent}
.lp--palace .ph-terr .stat{text-shadow:0 2px 14px rgba(0,0,0,.8)}
@media (max-width:760px){
  .ph-terr::before{background-position:center 30%}
}

/* ===== Hai phần còn phẳng (14/11) ===== */
/* Hỏi đáp — chỗ sâu nhất: nền song cửa gỗ rất chìm, không thêm chuyển động */
.lp--palace #hoi-dap.ph-lat{background:
  repeating-linear-gradient(0deg,transparent 0 58px,rgba(227,182,92,.035) 58px 59px),
  repeating-linear-gradient(90deg,transparent 0 58px,rgba(227,182,92,.035) 58px 59px),
  radial-gradient(ellipse 70% 50% at 50% 50%,rgba(40,22,14,.5),transparent 72%),
  #0E0907}
/* Chân trang — mái ngói ở mép trên + kết cấu lụa rất mờ */
.lp--palace .ph-foot{position:relative;background:#0B0705}
.lp--palace .ph-foot::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background:url(../img/ph-terrace.webp) center/cover no-repeat}
.lp--palace .ph-foot > .wrap{z-index:1}
.lp--palace .ph-foot > .ph-eave{z-index:2}

/* sinh bởi build_palace.py — vị trí đèn lồng & lá theo cành tre */
.ph-lans .lan:nth-child(1){left:13.9%;top:130.9px}.ph-lans .lan:nth-child(1) .lan-str{height:30px}.ph-lans .lan:nth-child(1) .lan-sway{animation-duration:4.6s;animation-delay:-0s}
.ph-lans .lan:nth-child(2){left:22.4%;top:128.8px}.ph-lans .lan:nth-child(2) .lan-str{height:38px}.ph-lans .lan:nth-child(2) .lan-sway{animation-duration:5.8s;animation-delay:-0.5s}
.ph-lans .lan:nth-child(3){left:30.8%;top:124.8px}.ph-lans .lan:nth-child(3) .lan-str{height:24px}.ph-lans .lan:nth-child(3) .lan-sway{animation-duration:5.3s;animation-delay:-1s}
.ph-lans .lan:nth-child(4){left:39.3%;top:122.2px}.ph-lans .lan:nth-child(4) .lan-str{height:58px}.ph-lans .lan:nth-child(4) .lan-sway{animation-duration:4.8s;animation-delay:-1.5s}
.ph-lans .lan:nth-child(5){left:47.8%;top:122.7px}.ph-lans .lan:nth-child(5) .lan-str{height:34px}.ph-lans .lan:nth-child(5) .lan-sway{animation-duration:5.9s;animation-delay:-2s}
.ph-lans .lan:nth-child(6){left:56.2%;top:125.4px}.ph-lans .lan:nth-child(6) .lan-str{height:96px}.ph-lans .lan:nth-child(6) .lan-sway{animation-duration:5.4s;animation-delay:-2.5s}
.ph-lans .lan:nth-child(7){left:64.7%;top:127.3px}.ph-lans .lan:nth-child(7) .lan-str{height:132px}.ph-lans .lan:nth-child(7) .lan-sway{animation-duration:4.9s;animation-delay:-3s}
.ph-lans .lan:nth-child(8){left:73.2%;top:125.2px}.ph-lans .lan:nth-child(8) .lan-str{height:84px}.ph-lans .lan:nth-child(8) .lan-sway{animation-duration:6.1s;animation-delay:-3.5s}
.ph-lans .lan:nth-child(9){left:81.7%;top:118.4px}.ph-lans .lan:nth-child(9) .lan-str{height:118px}.ph-lans .lan:nth-child(9) .lan-sway{animation-duration:5.6s;animation-delay:-4s}
.ph-leaf.pl1{left:20.8%;top:111.4px}
.ph-leaf.pl2{left:48.6%;top:104.9px}
.ph-leaf.pl3{left:77.1%;top:104.6px}
.ph-leaf.pl4{left:96.9%;top:85.2px}
.ph-dust.d1{left:45%;top:37%;width:3px;height:2px;animation-duration:10s,4.5s;animation-delay:-3s,-1.5s}
.ph-dust.d2{left:11%;top:82%;width:2px;height:2px;animation-duration:10s,3.5s;animation-delay:-2s,-1s}
.ph-dust.d3{left:74%;top:72%;width:2px;height:2px;animation-duration:12s,4s;animation-delay:-18s,-3.8s}
.ph-dust.d4{left:77%;top:68%;width:2px;height:3px;animation-duration:9s,3.8s;animation-delay:-4s,-1.2s}
.ph-dust.d5{left:22%;top:87%;width:2px;height:3px;animation-duration:17s,4.5s;animation-delay:-5s,-0.4s}
.ph-dust.d6{left:77%;top:42%;width:3px;height:2px;animation-duration:17s,4.3s;animation-delay:-18s,-0.2s}
.ph-dust.d7{left:30%;top:81%;width:4px;height:4px;animation-duration:14s,3.6s;animation-delay:-14s,-1.4s}
.ph-dust.d8{left:35%;top:41%;width:2px;height:2px;animation-duration:18s,3.2s;animation-delay:-15s,-3.5s}
.ph-dust.d9{left:97%;top:75%;width:3px;height:2px;animation-duration:10s,3.7s;animation-delay:-5s,-3s}
.ph-dust.d10{left:23%;top:80%;width:3px;height:2px;animation-duration:19s,2.6s;animation-delay:-17s,-2.3s}
.ph-dust.d11{left:44%;top:61%;width:3px;height:4px;animation-duration:18s,4.5s;animation-delay:-2s,-3.4s}
.ph-dust.d12{left:38%;top:78%;width:2px;height:2px;animation-duration:13s,4.1s;animation-delay:-14s,-1.1s}
.ph-dust.d13{left:53%;top:62%;width:2px;height:4px;animation-duration:14s,2.8s;animation-delay:-3s,-2s}
.ph-dust.d14{left:31%;top:54%;width:2px;height:3px;animation-duration:15s,3.4s;animation-delay:-15s,-0.3s}
.ph-dust.d15{left:61%;top:69%;width:4px;height:3px;animation-duration:11s,4.5s;animation-delay:-17s,-1.1s}
.ph-dust.d16{left:57%;top:63%;width:3px;height:3px;animation-duration:11s,2.6s;animation-delay:-4s,-0.9s}
.ph-dust.d17{left:33%;top:19%;width:3px;height:3px;animation-duration:13s,3.1s;animation-delay:-4s,-1.7s}
.ph-dust.d18{left:51%;top:58%;width:2px;height:2px;animation-duration:16s,4.7s;animation-delay:-17s,-1.6s}
.ph-dust.d19{left:55%;top:68%;width:2px;height:4px;animation-duration:19s,3.4s;animation-delay:-6s,-0.3s}
.ph-dust.d20{left:30%;top:74%;width:2px;height:2px;animation-duration:14s,4s;animation-delay:-3s,-0s}
.ph-dust.d21{left:23%;top:86%;width:2px;height:3px;animation-duration:18s,2.5s;animation-delay:-6s,-2.5s}
.ph-dust.d22{left:23%;top:50%;width:3px;height:3px;animation-duration:16s,2.7s;animation-delay:-15s,-4s}