/* UTSPAY-inspired ENG refinement, 2026-09-08 */
#hero{padding-top:70px}.ecb-hero-grid{align-items:center;gap:clamp(40px,6vw,80px)}
#hero .hero-tagline{font-size:clamp(42px,4.5vw,66px);line-height:1.08}#hero .hero-sub-c{font-size:17px;line-height:1.8}
#hero .hero-btns-c{flex-wrap:wrap;gap:12px}#hero .hero-btns-c .btn{font-size:14px;min-height:48px}
.ecb-photo-frame,.ecb-hero-visual:before{border-radius:32px}.ecb-hero-visual:before{border-color:#f0c04030}
.ecb-rebate-plaque{animation:ecb-refined-card 4.6s ease-in-out -1.2s infinite;box-shadow:0 24px 54px #0006}#hero .cost-float{animation:ecb-refined-card 4.6s ease-in-out -3.1s infinite}
.ecb-country{animation:ecb-refined-float 4.2s ease-in-out infinite}.ecb-country-in{animation-delay:-2.7s}.ecb-country-th{animation-delay:-.4s}.ecb-country-vn{animation-delay:-1.6s}.ecb-country-za{animation-delay:-1s}.ecb-country-bd{animation-delay:-3.3s}
@keyframes ecb-refined-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ecb-refined-card{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-10px) rotate(.35deg)}}
#hero .hms-lbl{font-size:12px;line-height:1.5}#hero .hero-status-lbl{font-size:13px}#hero .status-form input{font-size:16px}
#what>.container,#howto>.container{padding-top:100px!important;padding-bottom:100px!important}
.ecb-section-photo,.ecb-intro-photo img{border-radius:28px}#what .badges{animation:ecb-refined-float 5.2s ease-in-out -2s infinite}
#what .what-content p,.sec-sub,.path-desc{font-size:16px}.checklist li,.path-step,.testi-quote{font-size:14px;line-height:1.8}#what .badge-lbl,#what .what-stat-lbl{font-size:12px}
.path-card{transition:transform .25s ease,border-color .25s ease}.rate-panel th{font-size:12px}.rate-panel td{font-size:14px}.faq-item summary{font-size:16px}
.fi.ecb-reveal-ready{transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1)}.ecb-section-intro>.fi:nth-child(2),.what-grid>.fi:nth-child(2){transition-delay:.09s}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #f8dc80;outline-offset:5px}
@media(hover:hover){.path-card:hover{transform:translateY(-4px);border-color:#f0c04066}}
@media(max-width:800px){#hero{padding-top:40px}.ecb-hero-grid{gap:42px}#hero .hero-tagline{font-size:clamp(36px,7.5vw,54px)}#hero .hero-sub-c{font-size:16px}#hero .hero-mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}#hero .hero-btns-c .btn{font-size:14px;white-space:normal;text-align:center;justify-content:center}.ecb-hero-visual{width:calc(100% - 44px);height:480px;max-width:440px;margin:4px auto 32px}#what>.container,#howto>.container{padding-top:68px!important;padding-bottom:68px!important}.sec-sub{font-size:16px}.rate-tabs{flex-wrap:wrap}.rate-tab{font-size:14px;min-height:44px}.status-form{display:flex;flex-wrap:wrap}.status-form input{flex:1 1 180px}}
@media(max-width:440px){#hero .hero-btns-c .btn{width:100%;padding:14px 18px}.ecb-hero-visual{height:390px}.ecb-country{max-width:48px;max-height:48px}.ecb-rebate-plaque{width:140px;left:-16px;bottom:28px}#hero .big-pct{font-size:54px}#hero .cost-corner{right:-16px;bottom:-15px}#hero .cost-card{width:136px}#what .badges{position:relative;left:auto;right:auto;bottom:auto;margin:-32px 12px 0;padding:18px 8px}.compare-grid{grid-template-columns:1fr}.compare-row{flex-wrap:wrap}.sec-title{font-size:32px}}
@media(prefers-reduced-motion:reduce){.ecb-country,.ecb-rebate-plaque,#hero .cost-float,#what .badges{animation:none!important;transform:none!important}.fi,.fi.ecb-reveal-ready{opacity:1!important;transform:none!important;transition:none!important}}

/* (บล็อก "ย้าย status checker เข้าคอลัมน์ซ้าย" รอบ 1 ถูกลบ 20 ก.ย. รอบ 5 — Hero กลับเป็นเวอร์ชัน live แล้ว ไม่มีคอลัมน์ซ้าย/ขวาอีก) */

/* 20 ก.ย. 2569 (รอบ 2) — user: กล่องลอยทั้งหน้าดีไซน์ไม่สวย ขอพื้นหลังกระจกฝ้าเบลอแบบ CashbackXM + เปลี่ยนสีเส้นขอบ
   ต้นเหตุ: .cost-card ฐานเดิมมี backdrop-filter:blur()+พื้นโปร่งแสงอยู่แล้ว แต่ editorial.css ทับด้วยพื้นสีทึบทำให้เบลอมองไม่เห็นผล
   แก้รวด: คืนพื้นกระจกฝ้าโปร่งแสง + ขอบกลาง ๆ (ขาวจาง) แทนขอบทองเดิม ให้ทั้ง 3 กล่องลอยเข้าชุดกัน */
.cost-card,.ecb-rebate-plaque,#what .badges{
  background:rgba(14,16,22,.5)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(255,255,255,.16)!important;
}
#what .badge{border-right-color:rgba(255,255,255,.14)!important}

/* 20 ก.ย. 2569 (รอบ 3) — user: ย้ายเซ็ตภาพ+การ์ดลอยของ Hero (ขวา) ไปแทนที่ฝั่งซ้ายของ Section 2 (แทน T2-phone-cashback เดิม)
   (.hero-proof ที่เคยใส่แทนฝั่งขวาของ Hero ถูกลบ 20 ก.ย. รอบ 5 — Hero กลับเป็นเวอร์ชัน live แล้ว)
   .ecb-hero-visual ทั้งชุดยังใช้ class เดิม (ไม่ scope ด้วย #hero) เลยพกสไตล์/ขนาดตามจอมาด้วยอัตโนมัติ
   ส่วนที่ scope ด้วย #hero โดยเฉพาะ (cost-corner/cost-card/big-pct/hero-kicker) ต้อง mirror ให้ #what ด้วย ไม่งั้น section 2 จะได้แค่ค่า fallback */
#what .cost-corner{display:block;position:absolute;right:-22px;bottom:-18px;top:auto;z-index:4}
#what .cost-card{width:184px;border-radius:16px}
#what .hero-kicker{font-size:12px;font-weight:600;letter-spacing:.2em;text-indent:0;margin:0;color:#b4b0a9;animation:none!important}
#what .big-pct-wrap{margin:5px 0 0;animation:none!important;gap:0}
#what .big-pct{font-size:74px;font-weight:600;letter-spacing:-.065em;color:#F0C040;text-shadow:none}
#what .big-pct-sym{font-size:38px;color:#F0C040;opacity:1;margin:4px 0 0 5px}
@media(min-width:801px) and (max-width:1100px){#what .cost-card{width:160px}#what .big-pct{font-size:62px}}
@media(max-width:800px){#what .cost-corner{right:-20px;bottom:-15px}#what .cost-card{width:150px;padding:15px}#what .big-pct{font-size:62px}}
@media(max-width:440px){#what .cost-corner{right:-16px;bottom:-15px}#what .cost-card{width:136px}#what .big-pct{font-size:54px}}

/* 20 ก.ย. 2569 (รอบ 4) — user: "เอา Section Hero ที่ Live อยู่ปัจจุบัน มาแทนที่ Section Hero อันนี้"
   Hero ใน HTML เปลี่ยนกลับไปใช้โครงสร้างเดิมของ live แล้ว (hero-bg สไลด์โชว์ + hero-center กลางจอ + cost-corner "Trading Cost -90%")
   แต่ landing-layout.css/editorial.css (2 ไฟล์นี้เกิดทีหลัง ตอนทำ redesign — live จริงไม่โหลดไฟล์นี้เลย) ยังมี #hero-scoped rules ของดีไซน์ใหม่ค้างอยู่
   เพราะ class ชื่อเดียวกัน (hero-center/hero-kicker/big-pct/hero-status/cost-corner ฯลฯ) เจาะรายละเอียดคนละแบบ
   ต้อง force กลับไปค่า base (= ของจริงบน live วัดจาก deploy/multilang/en/index.html) ด้วย #hero-scoped reset + !important ให้ชนะทุกไฟล์
   .ecb-* / #what-scoped ทั้งหมดไม่แตะ (ของ Section 2 ที่ย้ายมาเทิร์นก่อนหน้ายังต้องใช้อยู่) */
#hero{min-height:calc(100vh - 66px)!important;display:flex!important;align-items:center!important;padding:5.8rem 5vw 7.5rem!important;background:none!important;overflow:hidden!important}
#hero .hero-center{position:relative!important;align-items:center!important;text-align:center!important;max-width:840px!important;margin:0 auto!important;padding:0!important}
#hero .hero-kicker{font-size:.85rem!important;font-weight:600!important;letter-spacing:.4em!important;color:var(--text2)!important;margin:0 0 .2rem!important;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .07s both!important}
#hero .big-pct-wrap{justify-content:center!important;margin:0 0 .2rem!important;gap:normal!important}
#hero .big-pct{font-size:clamp(5.5rem,10vw,8.5rem)!important;font-weight:800!important;letter-spacing:-.04em!important;text-shadow:0 0 80px rgba(240,192,64,0.2)!important}
#hero .big-pct-sym{font-size:clamp(2.5rem,4.5vw,3.8rem)!important;margin:.5rem 0 0 0!important;opacity:.6!important}
#hero .hero-tagline{font-size:clamp(1.6rem,3.2vw,2.4rem)!important;line-height:1.25!important;max-width:none!important;letter-spacing:normal!important;margin:0 0 .75rem!important;font-weight:700!important}
#hero .hero-tagline>span{display:inline!important;font-size:inherit!important;line-height:inherit!important;margin:0!important}
#hero .hero-btns-c .btn-gold:after{content:none!important}
#hero .hero-btns-c,#hero .hero-btns-c .btn{width:auto!important}
#hero .hero-sub-c{font-size:.92rem!important;line-height:1.9!important;margin:0 0 2rem!important;max-width:440px!important}
#hero .hero-btns-c{justify-content:center!important;gap:.85rem!important}
#hero .hero-btns-c .btn{font-size:.95rem!important;padding:.75rem 1.75rem!important}
#hero .hero-mini-stats{width:auto!important;display:flex!important;justify-content:center!important;gap:2rem!important;margin-top:2.4rem!important;padding:1rem 1.6rem!important;background:rgba(10,11,15,.45)!important;border:1px solid var(--border-sub)!important;border-top:1px solid var(--border-sub)!important;border-radius:14px!important;backdrop-filter:blur(10px)!important}
#hero .hms-num{font-size:1.4rem!important;font-weight:300!important}
#hero .hms-lbl{font-size:.72rem!important;line-height:normal!important;margin-top:.15rem!important;max-width:none!important}
#hero .hero-status{position:relative!important;left:auto!important;bottom:auto!important;width:100%!important;max-width:440px!important;margin:-.5rem 0 1.6rem!important;padding:.85rem 1rem .95rem!important;background:rgba(10,11,15,.45)!important;border:1px solid var(--border-sub)!important;box-shadow:none!important;display:block!important;transform:none!important;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .38s both!important}
#hero .hero-status-lbl{font-size:.8rem!important;letter-spacing:normal!important;margin:0!important;color:var(--text2)!important}
#hero .status-form{display:flex!important;flex-wrap:nowrap!important;gap:.6rem!important;margin-top:1.4rem!important}
#hero .status-form input{flex:1 1 0!important;min-width:0!important;border-radius:var(--r-sm)!important;font-size:.95rem!important;padding:.8rem 1rem!important}
#hero .status-form .btn{flex-shrink:0!important;padding:.55rem 1.2rem!important;font-size:.85rem!important}
#hero .hero-status .sr{grid-column:auto!important;max-width:none!important}
#hero .hero-strip{position:absolute!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;padding:.9rem 5vw!important;gap:.4rem 2.2rem!important;background:rgba(8,9,12,.35)!important;border-top:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
#hero .hero-strip span{font-size:.68rem!important;letter-spacing:.14em!important}
#hero .cost-float{animation:costFloatY 3.5s ease-in-out 2.4s infinite!important}
#hero .cost-corner{position:absolute!important;right:4vw!important;top:auto!important;bottom:3rem!important;display:block!important}
#hero .cost-card{width:258px!important;background:rgba(12,14,20,.55)!important;border-color:rgba(255,255,255,.22)!important;border-radius:16px!important;padding:1rem 1.15rem .9rem!important;box-shadow:0 24px 60px rgba(0,0,0,.45)!important}
@media(max-width:980px){#hero .cost-corner{display:none!important}}
#costPathHero{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s ease .5s}
.cost-card.enter #costPathHero{stroke-dashoffset:0}
#costFillHero{opacity:0;transition:opacity .9s ease 1.5s}
.cost-card.enter #costFillHero{opacity:1}
@media(max-width:700px){
  #hero{padding:5.2rem 5vw 4rem!important}
  #hero .big-pct{font-size:clamp(5rem,15vw,7rem)!important}
}
@media(max-width:640px){#hero .hero-strip{gap:.35rem 1.2rem!important}}
@media(max-width:640px){
  #hero .hero-mini-stats{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:.5rem!important;justify-items:center!important;padding:.9rem .5rem!important;margin:2.4rem 0 3.5rem!important}
  #hero .hms-num{font-size:1.05rem!important}
  #hero .hms-lbl{font-size:.55rem!important;letter-spacing:0!important}
}

/* 20 ก.ย. 2569 (รอบ 7) — user: "ตัวเลข 01-06 ที่บอก Section ตัดออกให้หมดเลย" + การ์ดสถิติท้าย Section 2 ดูว่างเปล่า ให้ design ดีขึ้น
   ต้นเหตุเลข: editorial.css เติมวงกลมเลข 01-06 ไว้หน้า .sec-tag ทุก section ผ่าน ::before (content:'01'..'06') — ปิดทิ้งแล้วคืน .sec-tag ให้เป็น pill ทองแบบเดิม (ไม่มีวงกลม)
   ต้นเหตุการ์ดสถิติ: editorial.css ถอด border/background ของ .what-stat-card ออกจนเหลือแค่ตัวเลขลอยชิดซ้าย ไม่มีกรอบ ดูเหมือนพื้นที่ว่างเปล่า — คืนกรอบการ์ดกระจกฝ้าบางๆ ให้เข้าชุดกับการ์ดลอยอื่นในหน้า */
.sec-tag:before{content:none!important;display:none!important}
.sec-tag{display:inline-block!important;gap:0!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important}
#what .what-stats-grid{margin-top:28px!important;padding-top:28px!important;gap:16px!important}
#what .what-stat-card{background:rgba(255,255,255,.025)!important;border:1px solid var(--border-sub)!important;border-radius:14px!important;padding:22px 16px!important;text-align:center!important;transition:border-color .25s ease,transform .25s ease!important}
@media(hover:hover){#what .what-stat-card:hover{border-color:rgba(240,192,64,.3)!important;transform:translateY(-3px)}}
#what .what-stat-num{font-size:30px!important;font-weight:600!important;color:var(--gold)!important;letter-spacing:-.03em!important;margin-bottom:6px!important}
#what .what-stat-lbl{font-size:12px!important;color:var(--text3)!important}

/* 20 ก.ย. 2569 (รอบ 8) — user: "How It Works" แถว 01-04 ดูชิดซ้าย ไม่สมดุล
   ต้นเหตุ: editorial.css ทำ .flow เป็น grid 4 คอลัมน์ 1fr เท่ากัน ยืดเต็มความกว้าง container เสมอ
   แต่เนื้อหาแต่ละข้อ (icon+ข้อความ) สั้นกว่าคอลัมน์มาก แล้ว .flow-item ชิดซ้ายในคอลัมน์ตัวเอง (align-items:flex-start)
   ผลคือช่องว่างเยอะทางขวาของทุกข้อ ข้อ 4 (ข้อสุดท้าย ไม่มีลูกศรมาเติมสายตา) เลยดูเหมือนแถวทั้งหมดตกไปกองทางซ้าย
   แก้: เปลี่ยนจาก grid ยืดเต็มเป็น flex ที่กว้างตามเนื้อหาจริง + จัดกลุ่มทั้งแถวให้อยู่กึ่งกลาง container แทน */
#what .flow{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 28px!important}
#what .flow-item{flex:0 1 190px!important}
@media(max-width:700px){#what .flow{gap:14px 20px!important}#what .flow-item{flex:1 1 45%!important}#what .flow-arrow{display:none!important}}

/* 20 ก.ย. 2569 (รอบ 9) — user: เส้นขอบสีเหลืองที่การ์ด "Existing/New Account" (How to Claim) ดูไม่ Luxury ขอเปลี่ยนสีให้หมด
   ต้นเหตุ: .path-primary (การ์ดซ้าย) / .path-step-dot (วงกลมเลข 1-4) / เส้นเชื่อมระหว่างวงกลม ใช้ border/gradient สีทอง rgba(240,192,64,..)
   แก้ตามแนวเดียวกับที่แก้กล่องลอยไปแล้วรอบก่อน: ขอบกลางๆ (ขาวจาง) แทนขอบทอง — เลขในวงกลมยังเป็นสีทองไว้ (ตัวหนังสือ ไม่ใช่เส้นขอบ) */
.path-card.path-primary{border-color:rgba(255,255,255,.18)!important;background:#19191a!important}
.path-step-dot{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.2)!important}
.path-step:not(:last-child)::before{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08))!important}