/*
Theme Name: Hello Phoenix
Theme URI: https://marketingevent.vn/
Description: Child theme của Hello Elementor cho Marketing Event Phoenix. Màu, font, nút gốc chỉnh trong Elementor > Site Settings; file này chứa các class bố cục dùng lại được (eyebrow, btn-*, head, acc, slab, cards, why, steps, logos, contact, band...).
Author: Marketing Event Phoenix
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-phoenix
*/

/* =========================================================
   1. TOKENS – đọc từ Global Colors / Global Fonts của Elementor
   ========================================================= */
body{
  --brown-ink:var(--e-global-color-primary,#3A2009);
  --ember:var(--e-global-color-secondary,#EE6C12);
  --brown:var(--e-global-color-text,#4A2B11);
  --gold:var(--e-global-color-accent,#FFC61A);
  --cream:var(--e-global-color-cream,#FDF7EC);
  --cream-2:var(--e-global-color-cream2,#F7EBD6);
  --paper:var(--e-global-color-paper,#FFFFFF);
  --brown-2:var(--e-global-color-brown2,#7A5730);
  --gold-2:var(--e-global-color-gold2,#FFDE59);
  --amber:var(--e-global-color-amber,#F7941D);
  --line:rgba(74,43,17,.16); --line-2:rgba(74,43,17,.09);
  --disp:var(--e-global-typography-primary-font-family,"Oswald"),'Arial Narrow',sans-serif;
  --sans:var(--e-global-typography-text-font-family,"Plus Jakarta Sans"),system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:26px; --pad:clamp(1.25rem,4vw,3.5rem); --wrap:1320px;
  background:var(--cream);color:var(--brown);overflow-x:hidden;-webkit-tap-highlight-color:rgba(247,148,29,.25)
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
.elementor p{margin:0;text-wrap:pretty}
.elementor p + p{margin-top:.4rem}
.elementor h1,.elementor h2,.elementor h3{text-wrap:balance}
.elementor a{color:inherit}
.elementor-widget-image img{display:block}
.sr,.sr .elementor-heading-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--ember));z-index:1000;transition:width .1s linear;pointer-events:none}
.admin-bar .progress{top:32px}

/* Container của Elementor: bỏ khoảng cách mặc định ở các khối do theme quản lý */
.e-con.wrap{width:min(100% - 2*var(--pad),var(--wrap));max-width:none;margin-inline:auto;--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}

/* =========================================================
   2. CHỮ NHỎ ĐẦU MỤC (eyebrow) & tiêu đề khối
   ========================================================= */
.eyebrow .elementor-heading-title{font:600 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ember);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow .elementor-heading-title::before{content:"";width:1.6rem;height:2px;background:var(--gold)}

.e-con.head{display:grid;grid-template-columns:1.15fr .85fr;gap:1.5rem clamp(2rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.2rem,4vw,3.5rem)}
.head h2.elementor-heading-title{font-size:clamp(2.1rem,4.6vw,3.8rem);margin-top:1rem;max-width:16ch}
.head-desc p{color:var(--brown-2);max-width:52ch}
.head-desc a{color:var(--brown-ink);font-weight:600}
@media (max-width:860px){.e-con.head{grid-template-columns:1fr}}

/* =========================================================
   3. NÚT – kiểu gốc nằm trong Site Settings > Buttons, ở đây là biến thể
   ========================================================= */
.elementor .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;border:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s,transform .12s,box-shadow .2s}
.elementor-button:active{transform:translateY(1px)}
.btn-gold .elementor-button,.elementor .elementor-widget-form .elementor-button[type=submit]{background:var(--gold);color:var(--brown-ink);box-shadow:0 8px 20px -10px rgba(247,148,29,.9)}
.btn-gold .elementor-button:hover,.btn-gold .elementor-button:focus,.elementor .elementor-widget-form .elementor-button[type=submit]:hover{background:var(--gold-2);color:var(--brown-ink)}
.btn-brown .elementor-button{background:var(--brown);color:var(--cream);box-shadow:none}
.btn-brown .elementor-button:hover,.btn-brown .elementor-button:focus{background:var(--brown-ink);color:var(--cream)}
.btn-line .elementor-button{background:transparent;border-color:var(--line);color:var(--brown);box-shadow:none}
.btn-line .elementor-button:hover,.btn-line .elementor-button:focus{border-color:var(--brown);background:var(--brown);color:var(--cream)}
.btn-cream .elementor-button{background:var(--cream);color:var(--brown-ink);box-shadow:none}
.btn-cream .elementor-button:hover,.btn-cream .elementor-button:focus{background:#fff;color:var(--brown-ink)}
.circ .elementor-button{width:58px;height:58px;min-height:0;padding:0;border-radius:50%;border-color:var(--line);background:transparent;color:var(--brown);font-size:1.2rem;box-shadow:none;letter-spacing:0}
.circ .elementor-button:hover,.circ .elementor-button:focus{background:var(--gold);border-color:var(--gold);color:var(--brown-ink)}

/* =========================================================
   4. HEADER
   ========================================================= */
.e-con.hdr{position:sticky;top:0;z-index:100;background:rgba(253,247,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.admin-bar .e-con.hdr{top:32px}
.elementor-location-header{position:sticky;top:0;z-index:100}
.admin-bar .elementor-location-header{top:32px}
.elementor-location-header .e-con.hdr{position:relative;top:0}
.e-con.hdr-in{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;height:78px;flex-wrap:nowrap}
.hdr-in > .elementor-widget{width:auto}
.brand a,.brand{display:flex;align-items:center}.brand img{height:46px;width:auto;display:block}
.hnav .elementor-nav-menu{gap:1.6rem}
.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item{font:600 .86rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--brown-2);padding:.5rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
/* Elementor tự thêm padding 20px khi hover/focus/active: khóa lại để menu không giãn */
.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted,.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active{padding:.5rem 0}
/* hover & mục đang xem: chữ đậm màu + gạch chân vàng như bản thiết kế */
.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus-visible,.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[aria-current="true"],.hnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active{color:var(--brown-ink);border-bottom-color:var(--gold)}
.e-con.hcta{flex-direction:row;align-items:center;gap:1.1rem;width:auto;flex-wrap:nowrap}
.hcta > .elementor-widget{width:auto}.hcta .elementor-button{white-space:nowrap}
.hphone .elementor-heading-title{font:700 1.05rem/1.4 var(--disp);color:var(--brown-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.hphone .elementor-heading-title a{text-decoration:none}
.hphone .elementor-heading-title a:hover{color:var(--ember)}
@media (max-width:1080px){.elementor .elementor-widget.hnav{display:none!important}}
@media (max-width:430px){.hphone{display:none}.brand img{height:36px}}
@media (max-width:782px){.admin-bar .elementor-location-header{top:0}}

/* =========================================================
   5. KHOẢNG CÁCH SECTION
   ========================================================= */
.e-con.sec{padding:clamp(4rem,8vw,7rem) 0}
.e-con.sec.pt0{padding-top:0}

/* =========================================================
   6. HERO
   ========================================================= */
.e-con.hero{position:relative;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.e-con.hero::before{content:"";position:absolute;left:auto;bottom:auto;border:0;opacity:1;width:62vw;height:62vw;max-width:820px;max-height:820px;right:-16vw;top:-22vw;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,198,26,.55),rgba(247,148,29,.22) 48%,rgba(253,247,236,0) 72%);pointer-events:none}
.e-con.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1.elementor-heading-title{font-size:clamp(2.7rem,5.9vw,4.8rem);line-height:1.16;margin-top:1.1rem;max-width:11ch}
.elementor-heading-title .gold{display:block;background:linear-gradient(100deg,var(--amber),var(--gold) 55%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:.16em;margin-top:-.16em}
.hero-sub{margin-top:1.4rem}
.hero-sub p{max-width:44ch;color:var(--brown-2);font-size:1.05rem}
.e-con.hero-cta{flex-direction:row;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-cta > .elementor-widget,.band-cta > .elementor-widget,.mbar > .elementor-widget{width:auto}
.e-con.stats{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.stats > .elementor-widget{width:auto}
.stats .elementor-counter{display:flex;flex-direction:column;align-items:flex-start}
.stats .elementor-counter-number-wrapper{display:flex;justify-content:flex-start;font:700 clamp(1.9rem,3.2vw,2.9rem)/1.15 var(--disp);color:var(--ember);font-variant-numeric:tabular-nums}
.stats .elementor-counter-number-prefix,.stats .elementor-counter-number-suffix{flex-grow:0;text-align:left}
.stats .elementor-counter-title{font:400 .84rem/1.7 var(--sans);color:var(--brown-2);letter-spacing:.03em;text-align:left;order:2}
.e-con.hero-media{position:relative}
.hero-shot{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;box-shadow:0 36px 70px -34px rgba(74,43,17,.55);background:var(--cream-2)}
.hero-shot img{width:100%;height:100%;object-fit:cover;animation:phx-zoomin 18s ease-out both}
@keyframes phx-zoomin{from{transform:scale(1.12)}to{transform:scale(1)}}
.e-con.badge{position:absolute;left:-1.5rem;bottom:2rem;width:auto;background:var(--gold);color:var(--brown-ink);border-radius:18px;padding:1rem 1.25rem;max-width:min(80%,280px);box-shadow:0 20px 44px -22px rgba(74,43,17,.6)}
.badge b.elementor-heading-title{display:block;font:700 1.05rem/1.25 var(--disp);text-transform:uppercase;color:var(--brown-ink)}
.badge p{display:block;font-size:.85rem;line-height:1.45;margin-top:.3rem;color:#5B3B0F}
@media (max-width:960px){.e-con.hero-in{grid-template-columns:1fr}.hero-shot{aspect-ratio:4/3}.e-con.badge{left:1rem;bottom:1rem}}

/* =========================================================
   7. MARQUEE
   ========================================================= */
.e-con.mq{background:var(--brown);color:var(--cream);overflow:hidden}
.mq-track{display:flex;width:max-content;animation:phx-slide 30s linear infinite}
.e-con.mq:hover .mq-track{animation-play-state:paused}
.mq-list ul{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:.8rem 1rem .8rem 0}
.mq-list li{font:700 1.12rem/1.45 var(--disp);text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:2rem}
.mq-list li::after{content:"";width:22px;height:22px;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle,var(--gold) 3px,transparent 4px);flex:none}
@keyframes phx-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   8. FORM (Elementor Form) – kiểu gạch chân như bản thiết kế
   ========================================================= */
.elementor-widget-form .elementor-field-label{font:600 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown-2);margin-bottom:.35rem;padding:0}
.elementor .elementor-widget-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),.elementor .elementor-widget-form .elementor-field-group .elementor-field-textual{font:400 1rem/1.5 var(--sans);color:var(--brown-ink);background:transparent;border:0;border-bottom:2px solid var(--line);border-radius:0;padding:.65rem 0;min-height:50px;width:100%;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.elementor .elementor-widget-form .elementor-field-group .elementor-select-wrapper select{appearance:none;-webkit-appearance:none;padding-right:1.6rem;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23EE6C12' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .15rem center}
.elementor-widget-form .elementor-select-wrapper::before,.elementor-widget-form .select-caret-down-wrapper{display:none}
.elementor-widget-form select option{background:var(--paper);color:var(--brown-ink)}
.elementor-widget-form .elementor-field::placeholder{color:#A99279}
.elementor-widget-form textarea.elementor-field{min-height:96px;resize:vertical}
.elementor-widget-form .elementor-field:hover{border-bottom-color:var(--brown-2)}
.elementor-widget-form .elementor-field:focus,.elementor-widget-form .elementor-field:focus-visible{outline:none;border-bottom-color:var(--ember);box-shadow:0 2px 0 0 var(--ember)}
.elementor .elementor-widget-form .elementor-field-group{margin-bottom:0}.elementor .elementor-widget-form .elementor-select-wrapper{padding:0;border:0;min-height:0}.elementor .elementor-widget-form .elementor-button{min-height:52px}
.elementor-widget-form .elementor-message{font-size:.9rem;font-weight:500;color:var(--ember);margin:0}
.elementor-widget-form .elementor-message.elementor-message-success{background:var(--gold);color:var(--brown-ink);border-radius:16px;padding:1rem 1.2rem;grid-column:1/-1}
.elementor-widget-form .elementor-message::before{display:none}
.elementor-widget-form .elementor-error .elementor-field{border-bottom-color:#C4350B}
.elementor-widget-form .elementor-field-group .elementor-message.elementor-help-inline{font-size:.82rem;color:#C4350B;margin-top:.3rem;background:none;padding:0}

/* form đặt lịch nhanh */
.e-con.quick{position:relative;z-index:5;padding:clamp(2rem,4vw,3.2rem) 0 0}
.book{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 26px 60px -34px rgba(74,43,17,.5);padding:1.5rem clamp(1.25rem,3vw,2rem)}
.book .elementor-form-fields-wrapper{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.15fr auto;gap:1.3rem;align-items:end;margin:0}
.book .elementor-field-group{width:auto;max-width:none;padding:0;min-width:0}
.book .e-form__buttons{grid-column:auto}
@media (max-width:1080px){.book .elementor-form-fields-wrapper{grid-template-columns:1fr 1fr}.book .e-form__buttons{grid-column:1/-1}}
@media (max-width:560px){.book .elementor-form-fields-wrapper{grid-template-columns:1fr}}

/* form liên hệ */
.lead .elementor-form-fields-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.6rem;align-content:start;margin:0}
.lead .elementor-field-group{width:auto;max-width:none;padding:0;min-width:0}
.lead .elementor-field-type-textarea{grid-column:1/-1}
.lead .form-note{align-self:center}
.lead .form-note small{color:var(--brown-2);max-width:32ch;font-size:.85rem;display:block}
.lead .e-form__buttons{justify-content:flex-end}
.lead .e-form__buttons .elementor-button{width:auto}
@media (max-width:560px){.lead .elementor-form-fields-wrapper{grid-template-columns:1fr}.lead .e-form__buttons{justify-content:flex-start}}

/* =========================================================
   9. COLLAGE
   ========================================================= */
.e-con.collage{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25em .35em;text-align:center;font-size:clamp(2rem,5.4vw,4.4rem)}
.collage > .elementor-widget{width:auto;line-height:1.25}
.collage .elementor-heading-title{display:block;font:700 1em/1.25 var(--disp);text-transform:uppercase;color:var(--brown-ink)}
.collage .gold .elementor-heading-title{background:linear-gradient(100deg,var(--amber),var(--gold) 55%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;padding:.16em 0 .08em;margin:-.16em 0 -.08em}
.collage .out .elementor-heading-title{-webkit-text-stroke:2px var(--brown);color:transparent}
.collage .rect{width:clamp(96px,13vw,200px);aspect-ratio:16/10;border-radius:16px;overflow:hidden;transform:rotate(-3deg);box-shadow:0 16px 32px -18px rgba(74,43,17,.6)}
.collage .circle{width:clamp(68px,8.4vw,124px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 16px 32px -18px rgba(74,43,17,.6)}
.collage .rect img,.collage .circle img{width:100%;height:100%;object-fit:cover}
.e-con.sec-collage{overflow:hidden}
/* mobile: chữ & ảnh co theo vw để mọi điện thoại đều ngắt 3 dòng: BIẾN Ý TƯỞNG [ảnh] THÀNH / SỰ KIỆN ĐÁNG NHỚ [ảnh] / TRỌN VẸN */
@media (max-width:560px){.e-con.collage{font-size:7.2vw}.collage .rect{width:19vw;border-radius:10px}.collage .circle{width:12.5vw}}

/* =========================================================
   10. ACCORDION (Nested Accordion của Elementor)
   ========================================================= */
.acc .e-n-accordion{border-top:1px solid var(--line)}
.acc .e-n-accordion-item{border-bottom:1px solid var(--line)}
.acc .e-n-accordion-item-title{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:1.6rem 0;border:0;background:none;cursor:pointer;list-style:none}
.acc .e-n-accordion-item-title::-webkit-details-marker{display:none}
.acc .e-n-accordion-item-title-text{font:700 clamp(1.45rem,3.1vw,2.5rem)/1.22 var(--disp);text-transform:uppercase;color:var(--brown-ink);transition:color .2s;margin:0}
.acc .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,.acc .e-n-accordion-item[open] .e-n-accordion-item-title-text{color:var(--ember)}
.acc .e-n-accordion-item-title-icon{width:54px;height:54px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:var(--brown);transition:transform .3s,background-color .2s,border-color .2s,color .2s}
.acc .e-n-accordion-item-title-icon span{display:grid;place-items:center}
.acc .e-n-accordion-item-title-icon svg{width:18px;height:18px;fill:currentColor}
.acc .e-n-accordion-item-title-icon .e-opened{display:none!important}
.acc .e-n-accordion-item-title-icon .e-closed{display:grid!important}
.acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon{transform:rotate(45deg);background:var(--gold);border-color:var(--gold);color:var(--brown-ink)}
.acc .e-con.acc-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:0 0 2rem;border:0}
.acc .e-con.acc-body:has(> :only-child){grid-template-columns:1fr}
.acc-body p{color:var(--brown-2)}
.acc-body p.acc-close{margin-top:1.2rem;font-weight:600;color:var(--brown-ink)}
.acc-body ul{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.acc-body li{padding-left:1.4rem;position:relative;font-size:.97rem;color:var(--brown-2)}
.acc-body li::before{content:"";position:absolute;left:0;top:.68em;width:.6rem;height:2px;background:var(--amber)}
.e-con.fan{flex-direction:row;flex-wrap:nowrap;gap:0;align-items:center;justify-content:flex-end}
.fan > .elementor-widget{width:46%;flex:0 1 auto;min-width:0}
.fan img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:4px solid var(--cream);box-shadow:0 18px 40px -20px rgba(74,43,17,.6)}
.fan > .elementor-widget:nth-child(1){transform:rotate(-7deg)}
.fan > .elementor-widget:nth-child(2){transform:rotate(3deg) translateX(-12%);z-index:2}
.fan > .elementor-widget:nth-child(3){transform:rotate(9deg) translateX(-24%)}
@media (max-width:860px){.acc .e-con.acc-body{grid-template-columns:1fr}.e-con.fan{justify-content:flex-start}}

/* =========================================================
   11. YEAR END SLAB
   ========================================================= */
.e-con.slab{background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,var(--amber));color:var(--brown-ink);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.e-con.slab-body{padding:clamp(1.75rem,4vw,3.5rem)}
.slab .eyebrow .elementor-heading-title{color:#7A3C04}
.slab .eyebrow .elementor-heading-title::before{background:var(--brown-ink)}
.slab h2.elementor-heading-title{font-size:clamp(2rem,3.9vw,3.3rem);margin-top:1rem}
.slab-lead p{margin-top:1rem;max-width:40ch;color:#5E3A08}
.chips ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:1.4rem 0 0;padding:0}
.chips li{border:2px solid var(--brown-ink);border-radius:999px;padding:.25rem .85rem;font:600 .82rem/1.5 var(--sans)}
.e-con.run{margin:1.8rem 0;border-top:2px solid rgba(58,32,9,.3);display:grid;grid-template-columns:1fr auto;align-items:center}
.run-title{padding:.8rem 0 .4rem}
.run-title .elementor-heading-title{font:700 1rem/1.4 var(--disp);text-transform:uppercase;color:var(--brown-ink)}
body .elementor .run-ctrl{background:none;box-shadow:none;border-radius:0;min-height:0;border:0;cursor:pointer;color:#5E3A08;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem;padding:.8rem 0 .4rem}
body .elementor .run-ctrl:hover,body .elementor .run-ctrl:focus{background:none;color:var(--brown-ink)}
.run-ctrl i{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:phx-pulse 1.8s infinite}
.run-ctrl[aria-pressed="true"] i{animation:none;opacity:.45}
@keyframes phx-pulse{50%{opacity:.25}}
.run-list{grid-column:1/-1}
.run-list ol{list-style:none;margin:0;padding:0}
.run-list li{display:grid;grid-template-columns:3.6rem 1fr;gap:1rem;padding:.5rem .6rem;margin:0 -.6rem;border-radius:10px;color:#5E3A08;font-size:.95rem;transition:background-color .4s,color .4s}
.run-list strong{font:700 .98rem/1.5 var(--disp);font-variant-numeric:tabular-nums}
.run-list li.now{background:var(--brown-ink);color:var(--cream)}
.run-list li.done{opacity:.5}
.e-con.slab-media{position:relative;min-height:420px}
.slab-media > .elementor-widget{position:absolute;inset:0}
.slab-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.e-con.slab{grid-template-columns:1fr}.e-con.slab-media{min-height:0;aspect-ratio:16/10;order:-1}}

/* =========================================================
   12. DỰ ÁN – băng cuộn ngang
   ========================================================= */
.e-con.rail-head{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:0}
.rail-head > .e-con{width:auto}
.e-con.rail-nav{flex-direction:row;gap:.6rem}
.rail-nav > .elementor-widget{width:auto}
.e-con.cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,30vw);gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:2.5rem 0 0;padding:0 0 1rem;scrollbar-width:thin}
.e-con.card{scroll-snap-align:start;text-decoration:none;display:block}
.e-con.shot{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--cream-2);box-shadow:0 20px 44px -28px rgba(74,43,17,.6)}
.shot > .elementor-widget-image{position:absolute;inset:0}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.card:hover .shot img{transform:scale(1.07)}
.pill{position:absolute!important;top:1rem;left:1rem;z-index:2;width:auto!important}
.pill .elementor-heading-title{background:var(--gold);border-radius:999px;padding:.4rem .9rem;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brown-ink);display:block}
.card h3.elementor-heading-title{font-size:1.3rem;line-height:1.2;margin-top:1.1rem}
.card p{color:var(--brown-2);font-size:.9rem;margin-top:.3rem}
.rail-more{margin-top:1.5rem}
@media (max-width:640px){.e-con.cards{grid-auto-columns:80vw}}

/* =========================================================
   13. VÌ SAO / QUY TRÌNH / LOGO
   ========================================================= */
.e-con.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.e-con.why-item{background:linear-gradient(90deg,var(--gold),var(--ember)) no-repeat left bottom/0% 4px,var(--paper);border-radius:var(--r);padding:1.8rem 1.6rem;border:1px solid var(--line-2);box-shadow:0 14px 34px -28px rgba(74,43,17,.5);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s,background-size .5s ease,opacity .6s ease}
.why-item .n .elementor-heading-title{font:700 2.4rem/1.1 var(--disp);color:var(--gold);display:inline-block;margin-bottom:.8rem;-webkit-text-stroke:1px var(--amber);transform-origin:left bottom;transition:color .3s,-webkit-text-stroke-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.why-item h3.elementor-heading-title{font-size:1.2rem;line-height:1.2;transition:color .3s}
.why-item p{color:var(--brown-2);margin-top:.7rem;font-size:.94rem}
@media (max-width:1000px){.e-con.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.e-con.why{grid-template-columns:1fr}}

.e-con.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem;counter-reset:s}
.e-con.step{counter-increment:s;border-top:2px solid var(--line);padding-top:1.1rem;display:block;background:linear-gradient(90deg,var(--amber),var(--ember)) no-repeat left top/0% 2px;background-origin:border-box}
.e-con.steps:not(.is-auto) .e-con.step:last-child{border-top-color:var(--ember)}
.e-con.step::before{content:"0" counter(s);position:static;width:auto;height:auto;border:0;opacity:1;font:700 1.5rem/1.15 var(--disp);color:var(--amber);display:block;margin-bottom:.7rem;transform-origin:left bottom;transition:color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.step h3.elementor-heading-title{font-size:1.05rem;line-height:1.2}
.step p{color:var(--brown-2);font-size:.9rem;margin-top:.4rem}
@media (max-width:1000px){.e-con.steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}}
@media (max-width:560px){.e-con.steps{grid-template-columns:1fr}}

.e-con.logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.8rem}
.logos > .elementor-widget{background:var(--paper);border:1px solid var(--line-2);border-radius:16px;aspect-ratio:3/2;display:grid;place-items:center;padding:.8rem;color:var(--brown-2);font:600 .78rem/1.2 var(--sans);text-align:center}
.logos img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:opacity .25s,filter .25s}
.logos > .elementor-widget:hover img{filter:none;opacity:1}
.logos .noimg img{display:none}.logos .noimg::after{content:attr(data-name)}
@media (max-width:1000px){.e-con.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.e-con.logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}}

/* =========================================================
   14. LIÊN HỆ & CTA BAND
   ========================================================= */
.e-con.contact{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.75rem,4vw,3.5rem);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);box-shadow:0 24px 60px -40px rgba(74,43,17,.5)}
.contact h2.elementor-heading-title{font-size:clamp(2rem,3.9vw,3.2rem);margin-top:1rem}
.contact-lead p{color:var(--brown-2);margin-top:1.1rem;max-width:34ch}
.e-con.direct{margin-top:2rem;gap:.7rem}
.e-con.direct-item{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;padding:.9rem 1.1rem;border-radius:16px;background:var(--cream);border:1px solid var(--line-2);transition:border-color .2s,background-color .2s}
.e-con.direct-item:hover{border-color:var(--gold);background:var(--cream-2)}
.direct-item .dlabel .elementor-heading-title{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown-2)}
.direct-item .dvalue .elementor-heading-title{display:block;font:700 1.2rem/1.35 var(--disp);color:var(--brown-ink)}
@media (max-width:900px){.e-con.contact{grid-template-columns:1fr}}

.e-con.band{background-color:var(--brown);color:var(--cream);border-radius:var(--r);--border-radius:var(--r);overflow:hidden;isolation:isolate;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.band h2.elementor-heading-title{font-size:clamp(1.9rem,3.8vw,3.1rem);color:var(--cream)}
.band h2 em{font-style:normal;color:var(--gold)}
.band p{margin-top:1rem;max-width:40ch;color:rgba(253,247,236,.78)}
.e-con.band-cta{flex-direction:row;flex-wrap:wrap;gap:.8rem}
@media (max-width:820px){.e-con.band{grid-template-columns:1fr}}

/* =========================================================
   15. FOOTER & THANH GỌI NHANH (mobile)
   ========================================================= */
.e-con.site-foot{background:var(--cream-2);padding:4rem 0 7rem;color:var(--brown-2);font-size:.92rem;margin-top:clamp(4rem,8vw,7rem);border-top:1px solid var(--line-2)}
.e-con.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.foot-logo img{height:52px;width:auto;margin-bottom:1rem}
.foot h3.elementor-heading-title{font-size:1.05rem;line-height:1.3;margin-bottom:.6rem}
.foot .ft .elementor-heading-title{font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:.9rem}
.foot-list ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{text-decoration:none}.foot a:hover{color:var(--brown-ink)}
@media (max-width:780px){.e-con.foot{grid-template-columns:1fr}}
.e-con.mbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;flex-direction:row;gap:.5rem;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(253,247,236,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mbar > .elementor-widget{flex:1}
.mbar .elementor-button{width:100%;min-height:46px;padding:.7rem 1rem}
@media (max-width:720px){.e-con.mbar{display:flex}.e-con.site-foot{padding-bottom:8rem}html{scroll-padding-bottom:90px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* Dịch vụ: nút "Xem chi tiết" thay cho dấu + (feedback 08.10) */
#dich-vu .acc .e-n-accordion-item-title-icon{width:auto;height:46px;border-radius:999px;padding:0 .9rem 0 1.2rem;display:inline-flex;align-items:center;gap:.55rem;font:600 .75rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--brown-ink);transition:background-color .2s,border-color .2s}
#dich-vu .acc .e-n-accordion-item-title-icon::before{content:"Xem chi tiết"}
#dich-vu .acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon::before{content:"Thu gọn"}
#dich-vu .acc .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon{background:var(--gold);border-color:var(--gold)}
#dich-vu .acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon{transform:none}
#dich-vu .acc .e-n-accordion-item-title-icon svg{width:14px;height:14px;transition:transform .3s}
#dich-vu .acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg{transform:rotate(45deg)}
@media (max-width:560px){
  #dich-vu .acc .e-n-accordion-item-title{grid-template-columns:1fr;gap:.9rem}
  #dich-vu .acc .e-n-accordion-item-title-icon{justify-self:start;height:40px}
}

/* ===== Hiệu ứng (10.10) ===== */
/* Vì sao Phoenix: nhấc thẻ, thanh vàng chạy ở đáy, số chuyển màu cam */
@media (hover:hover){
  .e-con.why-item:hover{transform:translateY(-8px);box-shadow:0 30px 50px -28px rgba(74,43,17,.55);border-color:rgba(247,148,29,.45);background-size:100% 4px,auto}
  .e-con.why-item:hover .n .elementor-heading-title{color:var(--ember);-webkit-text-stroke-color:var(--ember);transform:scale(1.12)}
  .e-con.why-item:hover h3.elementor-heading-title{color:var(--ember)}
}
/* xuất hiện lần lượt khi cuộn tới (JS thêm .js-reveal / .is-in) */
.e-con.why.js-reveal > .why-item:not(.is-in){opacity:0;transform:translateY(28px)}

/* Quy trình: highlight tự chạy từng bước như kịch bản Year End */
.e-con.steps.is-auto .e-con.step.is-done{background-size:100% 2px}
.e-con.steps.is-auto .e-con.step.is-active{background-size:100% 2px;transition:background-size var(--step-dur,2600ms) linear}
.e-con.steps.is-auto .e-con.step.is-active::before{color:var(--ember);transform:scale(1.25)}
.e-con.steps.is-auto .e-con.step.is-active h3.elementor-heading-title{color:var(--ember)}
.e-con.steps.is-auto .e-con.step h3.elementor-heading-title{transition:color .3s}

/* Khung CTA: chữ & nút nằm trên lớp phủ */
.e-con.band > .e-con{position:relative;z-index:1}