/* NALALOVE 官網改版 HTML 預覽版 — 共用樣式 */
:root{
  /* NALALOVE 品牌色：logo 藍 #3EBBED、logo 綠 #3DBFA3、名片深藍 #1A3A6B */
  --navy:#1a3a6b;
  --accent:#1d9bd2;        /* 品牌藍（加深，確保文字對比） */
  --accent-dark:#177fae;
  --accent-soft:#e8f6fd;
  --teal:#2fae91;          /* 品牌綠（加深，確保文字對比） */
  --blue-logo:#3ebbed;     /* logo 原色，裝飾用 */
  --teal-logo:#3dbfa3;
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#2b2f38;
  --muted:#6b7280;
  --line:#e2e9f0;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* 越南文要排在中文字型之前挑字型：PingFang TC 這類中文字型渲染越南文疊加聲調
   會把符號拆開（在 lang="zh-Hant" 的頁面上混排越南文時特別明顯）。 */
[lang="vi"]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
body{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.75;}
/* 越南文頁面：改用完整支援越文變音符號的系統字體（PingFang TC 對越文支援不全，會逐字 fallback 造成字體混雜） */
html[lang="vi"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:0;}
html[lang="vi"] h1,html[lang="vi"] h2,html[lang="vi"] h3,html[lang="vi"] h4{letter-spacing:0;}
/* 越南在地慣例：區塊標題用大寫（hero 主標與 FAQ 長句除外，維持可讀性） */
html[lang="vi"] section h2{text-transform:uppercase;letter-spacing:.03em;}
html[lang="vi"] .acc-closed .acc-title{text-transform:uppercase;letter-spacing:.28em;}
html[lang="vi"] .step h4{text-transform:uppercase;font-size:.95rem;letter-spacing:.05em;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
section{padding:72px 0;}

/* ── 區塊背景裝飾（opt-in，加在 <section> 上） ── */
/* 細點陣紋理：淺色區塊不再是一片平白，上下用遮罩淡出不會有硬邊 */
.bg-dots{position:relative;}
.bg-dots::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(26,58,107,.09) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);}
/* 柔和光暈：沿用 page-hero 的手法，大範圍低透明度 */
.bg-glow{position:relative;overflow:hidden;}
.bg-glow::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 46% 54% at 10% 16%,rgba(62,187,237,.15),transparent 62%),
             radial-gradient(ellipse 44% 50% at 90% 86%,rgba(61,191,163,.13),transparent 62%);}
/* 淡色漸層底：取代純白 */
.bg-tint{background:linear-gradient(180deg,#f1f8fd 0%,#fff 52%,#f5fafd 100%);}
.bg-tint-r{background:linear-gradient(180deg,#fff 0%,#f2f8fc 100%);}
/* 白底區的極淡 mesh：不改變「白」的印象，但消除死平 */
.bg-mesh{position:relative;overflow:hidden;}
.bg-mesh::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 40% 46% at 88% 8%,rgba(62,187,237,.10),transparent 64%),
             radial-gradient(ellipse 38% 44% at 6% 92%,rgba(61,191,163,.09),transparent 64%);}
/* ══════════ ① 星空（程式生成，固定種子；星點大小分五級＋行星） ══════════ */
.bg-stars{position:relative;overflow:hidden;background:
  /* 行星：三顆帶光暈的球體 */
  radial-gradient(circle 132px at 11% 74%,rgba(126,206,244,.30),rgba(62,187,237,.13) 52%,transparent 74%),
  radial-gradient(circle 148px at 11% 74%,transparent 68%,rgba(62,187,237,.16) 71%,transparent 76%),
  radial-gradient(circle 74px at 89% 19%,rgba(120,226,199,.30),rgba(61,191,163,.12) 54%,transparent 76%),
  radial-gradient(circle 44px at 72% 86%,rgba(255,255,255,.22),rgba(160,200,255,.10) 56%,transparent 78%),
  /* 星雲 */
  radial-gradient(ellipse 64% 54% at 22% 6%,rgba(62,187,237,.20),transparent 64%),
  radial-gradient(ellipse 54% 48% at 84% 94%,rgba(61,191,163,.16),transparent 64%),
  linear-gradient(180deg,#060f24 0%,#0c1c3a 55%,#0e2247 100%);}
.bg-stars::before,.bg-stars::after,.stars-only::before,.stars-only::after{content:"";position:absolute;top:0;left:50%;
  width:1px;height:1px;border-radius:50%;pointer-events:none;}
.bg-stars::before,.stars-only::before{box-shadow:
    -634px 384px 0px 0 rgba(255,255,255,0.52), -543px 788px 0px 0 rgba(178,224,255,0.77),
    -277px 135px 0px 0 rgba(255,255,255,0.71), 277px 316px 1px 1px rgba(178,224,255,0.95),
    -1123px 616px 0px 0 rgba(255,255,255,0.46), -821px 927px 0px 0 rgba(206,236,255,0.82),
    815px 102px 0px 0 rgba(255,255,255,0.52), 1025px 848px 0px 0 rgba(255,255,255,0.44),
    462px 483px 0px 0 rgba(255,255,255,0.83), 513px 1035px 0px 0 rgba(255,255,255,0.44),
    -842px 898px 0px 0 rgba(255,255,255,0.43), 643px 170px 1px 1px rgba(206,236,255,0.88),
    121px 197px 0px 0 rgba(255,255,255,0.49), 994px 517px 0px 0 rgba(255,255,255,0.32),
    -1132px 469px 0px 0 rgba(206,236,255,0.77), 782px 1069px 0px 0 rgba(255,255,255,0.51),
    816px 568px 0px 0 rgba(255,255,255,0.46), -418px 536px 1px 1px rgba(178,224,255,0.87),
    -353px 953px 3px 2.2px rgba(160,235,215,0.99), -696px 357px 0px 0 rgba(255,255,255,0.46),
    -460px 544px 0px 0 rgba(255,255,255,0.42), 831px 327px 0px 0 rgba(255,255,255,0.5),
    -925px 442px 0px 0 rgba(206,236,255,0.83), 1173px 583px 0px 0 rgba(255,255,255,0.49),
    -909px 643px 0px 0 rgba(206,236,255,0.63), -1246px 882px 0px 0 rgba(255,255,255,0.32),
    -1154px 16px 0px 0 rgba(255,255,255,0.46), -855px 8px 0px 0 rgba(255,255,255,0.72),
    -1146px 341px 1px 1px rgba(255,255,255,0.88), 869px 953px 1px 1px rgba(206,236,255,0.99),
    -904px 91px 0px 0 rgba(255,255,255,0.53), -1193px 1080px 0px 0 rgba(255,255,255,0.81),
    768px 78px 0px 0 rgba(255,255,255,0.51), -560px 766px 0px 0 rgba(206,236,255,0.61),
    -1155px 370px 0px 0 rgba(255,255,255,0.36), 285px 696px 0px 0 rgba(255,255,255,0.53),
    -727px 454px 0px 0 rgba(255,255,255,0.5), 1065px 77px 0px 0 rgba(255,255,255,0.47),
    -825px 721px 0px 0 rgba(255,255,255,0.68), 479px 326px 0px 0 rgba(255,255,255,0.5),
    -546px 1036px 0px 0 rgba(178,224,255,0.77), 915px 951px 0px 0 rgba(255,255,255,0.43),
    107px 395px 0px 0 rgba(255,255,255,0.33), 248px 145px 0px 0 rgba(255,255,255,0.34),
    1180px 88px 0px 0 rgba(255,255,255,0.31), 852px 309px 0px 0 rgba(255,255,255,0.44),
    894px 979px 0px 0 rgba(255,255,255,0.44), 199px 194px 0px 0 rgba(206,236,255,0.6),
    -997px 76px 0px 0 rgba(255,255,255,0.71), -592px 338px 1px 1px rgba(255,255,255,0.92),
    594px 153px 0px 0 rgba(255,255,255,0.51), -272px 710px 0px 0 rgba(255,255,255,0.8),
    -135px 94px 0px 0 rgba(178,224,255,0.75), 642px 230px 0px 0 rgba(255,255,255,0.36),
    993px 759px 0px 0 rgba(255,255,255,0.41), 68px 990px 0px 0 rgba(255,255,255,0.35),
    1110px 956px 0px 0 rgba(206,236,255,0.69), 613px 386px 0px 0 rgba(255,255,255,0.31),
    -1065px 93px 0px 0 rgba(255,255,255,0.42), -584px 51px 0px 0 rgba(206,236,255,0.65),
    1263px 308px 0px 0 rgba(255,255,255,0.3), 489px 652px 0px 0 rgba(255,255,255,0.54),
    -136px 37px 0px 0 rgba(255,255,255,0.4), 80px 859px 0px 0 rgba(255,255,255,0.39),
    -334px 530px 1px 1px rgba(178,224,255,0.88), -1238px 1040px 0px 0 rgba(255,255,255,0.7),
    -582px 864px 0px 0 rgba(255,255,255,0.71), -909px 905px 0px 0 rgba(255,255,255,0.52),
    -207px 896px 0px 0 rgba(255,255,255,0.3), -1231px 717px 0px 0 rgba(178,224,255,0.84),
    -504px 620px 0px 0 rgba(178,224,255,0.79), -1131px 831px 0px 0 rgba(255,255,255,0.43),
    -809px 660px 0px 0 rgba(255,255,255,0.43), 820px 537px 0px 0 rgba(255,255,255,0.55),
    272px 827px 0px 0 rgba(255,255,255,0.42), -1238px 216px 0px 0 rgba(255,255,255,0.32),
    -1199px 641px 0px 0 rgba(255,255,255,0.45), -864px 45px 0px 0 rgba(255,255,255,0.51),
    -1189px 308px 0px 0 rgba(206,236,255,0.65), -470px 137px 0px 0 rgba(206,236,255,0.76),
    -271px 208px 0px 0 rgba(255,255,255,0.5), 906px 791px 0px 0 rgba(255,255,255,0.69),
    -653px 135px 0px 0 rgba(255,255,255,0.34), 627px 670px 0px 0 rgba(206,236,255,0.69),
    -201px 1052px 0px 0 rgba(206,236,255,0.7), 708px 167px 1px 1px rgba(255,255,255,0.94),
    378px 177px 0px 0 rgba(255,255,255,0.32), 1029px 472px 1px 1px rgba(178,224,255,0.86),
    -120px 899px 0px 0 rgba(206,236,255,0.84), -695px 378px 0px 0 rgba(178,224,255,0.73),
    -714px 1037px 0px 0 rgba(206,236,255,0.65), 352px 536px 0px 0 rgba(206,236,255,0.69),
    514px 161px 0px 0 rgba(255,255,255,0.34), 689px 874px 0px 0 rgba(255,255,255,0.35),
    1019px 804px 0px 0 rgba(255,255,255,0.42), -484px 1059px 0px 0 rgba(255,255,255,0.5),
    894px 535px 0px 0 rgba(255,255,255,0.47), -1297px 1028px 0px 0 rgba(255,255,255,0.4),
    1082px 944px 0px 0 rgba(255,255,255,0.47), -1246px 509px 1px 1px rgba(178,224,255,0.87),
    -990px 462px 0px 0 rgba(206,236,255,0.83), 168px 166px 0px 0 rgba(255,255,255,0.33),
    -16px 68px 1px 1px rgba(178,224,255,0.95), -1153px 336px 0px 0 rgba(255,255,255,0.48),
    592px 920px 6px 3.4px rgba(160,235,215,0.95), 420px 102px 0px 0 rgba(206,236,255,0.72),
    -1000px 943px 0px 0 rgba(255,255,255,0.47), 964px 62px 3px 2.2px rgba(160,235,215,0.92),
    -1005px 521px 0px 0 rgba(255,255,255,0.35), -425px 1073px 0px 0 rgba(255,255,255,0.51),
    -1119px 800px 0px 0 rgba(255,255,255,0.33), -1184px 399px 0px 0 rgba(255,255,255,0.44),
    1082px 1094px 0px 0 rgba(255,255,255,0.53), 955px 1086px 0px 0 rgba(255,255,255,0.48),
    -948px 944px 0px 0 rgba(178,224,255,0.76), 528px 569px 1px 1px rgba(255,255,255,0.91),
    -1231px 897px 1px 1px rgba(206,236,255,0.99), -21px 664px 0px 0 rgba(206,236,255,0.72),
    -1133px 891px 0px 0 rgba(178,224,255,0.61), -548px 500px 0px 0 rgba(255,255,255,0.34),
    -917px 798px 0px 0 rgba(206,236,255,0.63), -666px 1026px 1px 1px rgba(255,255,255,0.98),
    -125px 335px 0px 0 rgba(255,255,255,0.49), -602px 619px 0px 0 rgba(255,255,255,0.43),
    801px 101px 0px 0 rgba(206,236,255,0.78), -150px 338px 0px 0 rgba(255,255,255,0.54),
    -34px 235px 0px 0 rgba(206,236,255,0.72), -657px 180px 0px 0 rgba(255,255,255,0.31),
    -918px 641px 0px 0 rgba(255,255,255,0.83), 743px 183px 0px 0 rgba(255,255,255,0.77),
    1160px 468px 1px 1px rgba(178,224,255,0.98), -686px 472px 3px 2.2px rgba(255,255,255,0.96),
    -925px 750px 1px 1px rgba(178,224,255,0.95), -496px 557px 0px 0 rgba(255,255,255,0.33),
    687px 910px 1px 1px rgba(255,255,255,0.9), -515px 41px 3px 2.2px rgba(160,235,215,0.95),
    -33px 421px 0px 0 rgba(255,255,255,0.83), 1284px 958px 0px 0 rgba(255,255,255,0.47),
    382px 494px 0px 0 rgba(255,255,255,0.45), 825px 1060px 0px 0 rgba(255,255,255,0.42),
    -1240px 1033px 0px 0 rgba(178,224,255,0.84), -1017px 264px 0px 0 rgba(255,255,255,0.46),
    809px 870px 0px 0 rgba(255,255,255,0.53), 358px 32px 0px 0 rgba(255,255,255,0.44),
    628px 329px 1px 1px rgba(178,224,255,0.86), 865px 378px 6px 3.4px rgba(255,255,255,0.99),
    167px 899px 0px 0 rgba(255,255,255,0.41), -270px 982px 0px 0 rgba(206,236,255,0.71),
    1018px 178px 0px 0 rgba(255,255,255,0.51), 868px 562px 0px 0 rgba(206,236,255,0.75),
    -180px 742px 0px 0 rgba(206,236,255,0.77), -1201px 73px 0px 0 rgba(255,255,255,0.32),
    -230px 448px 0px 0 rgba(255,255,255,0.38), 829px 958px 0px 0 rgba(206,236,255,0.77),
    -926px 15px 0px 0 rgba(255,255,255,0.74), 100px 790px 0px 0 rgba(255,255,255,0.53),
    -1130px 627px 0px 0 rgba(178,224,255,0.8), -738px 1018px 0px 0 rgba(255,255,255,0.4),
    -135px 179px 1px 1px rgba(206,236,255,0.93), 919px 449px 6px 3.4px rgba(190,230,255,0.96),
    -969px 737px 1px 1px rgba(178,224,255,0.99), -977px 721px 0px 0 rgba(255,255,255,0.53),
    -147px 379px 0px 0 rgba(255,255,255,0.49), -354px 409px 0px 0 rgba(206,236,255,0.85),
    420px 406px 0px 0 rgba(255,255,255,0.31), 267px 395px 3px 2.2px rgba(255,255,255,0.97),
    -1223px 874px 0px 0 rgba(255,255,255,0.39), 986px 75px 0px 0 rgba(255,255,255,0.44),
    -77px 611px 0px 0 rgba(255,255,255,0.31), 1229px 860px 0px 0 rgba(255,255,255,0.5),
    465px 1044px 0px 0 rgba(255,255,255,0.43), 483px 861px 0px 0 rgba(255,255,255,0.46),
    84px 587px 1px 1px rgba(206,236,255,0.97), 424px 252px 0px 0 rgba(206,236,255,0.81),
    -1190px 334px 0px 0 rgba(255,255,255,0.42), 770px 885px 0px 0 rgba(255,255,255,0.36),
    -489px 632px 0px 0 rgba(255,255,255,0.48), 628px 304px 1px 1px rgba(206,236,255,0.99),
    -817px 590px 0px 0 rgba(255,255,255,0.68), -602px 600px 0px 0 rgba(255,255,255,0.39),
    -1204px 68px 0px 0 rgba(178,224,255,0.75), 900px 226px 0px 0 rgba(255,255,255,0.3),
    -384px 268px 0px 0 rgba(206,236,255,0.83), -544px 886px 0px 0 rgba(255,255,255,0.68),
    223px 18px 0px 0 rgba(255,255,255,0.42), 1166px 962px 6px 3.4px rgba(160,235,215,0.97),
    -465px 1037px 6px 3.4px rgba(190,230,255,0.98), -310px 713px 0px 0 rgba(255,255,255,0.35),
    542px 170px 0px 0 rgba(255,255,255,0.48), -587px 721px 0px 0 rgba(178,224,255,0.7),
    1179px 648px 0px 0 rgba(255,255,255,0.5), 189px 210px 0px 0 rgba(206,236,255,0.74),
    146px 486px 0px 0 rgba(255,255,255,0.3), -776px 748px 3px 2.2px rgba(255,255,255,0.99),
    911px 719px 0px 0 rgba(206,236,255,0.63), -123px 215px 0px 0 rgba(255,255,255,0.36),
    1294px 453px 0px 0 rgba(255,255,255,0.46), 239px 129px 0px 0 rgba(255,255,255,0.41),
    18px 361px 3px 2.2px rgba(160,235,215,0.95), -802px 812px 1px 1px rgba(255,255,255,0.9),
    -1148px 820px 3px 2.2px rgba(255,255,255,0.91), -461px 837px 0px 0 rgba(206,236,255,0.71),
    811px 363px 0px 0 rgba(255,255,255,0.52), 228px 1073px 0px 0 rgba(178,224,255,0.83),
    -552px 893px 0px 0 rgba(255,255,255,0.5), -665px 532px 3px 2.2px rgba(190,230,255,0.99),
    -1197px 64px 0px 0 rgba(255,255,255,0.33), 281px 946px 3px 2.2px rgba(190,230,255,0.96),
    844px 358px 0px 0 rgba(206,236,255,0.82), 234px 126px 0px 0 rgba(255,255,255,0.33),
    -1065px 577px 0px 0 rgba(206,236,255,0.8), 1191px 635px 0px 0 rgba(255,255,255,0.43),
    435px 1096px 0px 0 rgba(255,255,255,0.46), 161px 551px 0px 0 rgba(255,255,255,0.52),
    1064px 1015px 0px 0 rgba(178,224,255,0.85), -1272px 386px 3px 2.2px rgba(160,235,215,0.98),
    1033px 535px 0px 0 rgba(178,224,255,0.67), -1207px 323px 0px 0 rgba(206,236,255,0.66),
    -582px 737px 0px 0 rgba(255,255,255,0.5), -509px 984px 0px 0 rgba(255,255,255,0.43),
    458px 304px 0px 0 rgba(206,236,255,0.79), 930px 929px 3px 2.2px rgba(160,235,215,0.93),
    1123px 17px 0px 0 rgba(255,255,255,0.4), 1202px 28px 0px 0 rgba(255,255,255,0.51),
    1071px 1031px 0px 0 rgba(255,255,255,0.31), -242px 590px 1px 1px rgba(178,224,255,0.92),
    1270px 460px 0px 0 rgba(255,255,255,0.37), -585px 313px 0px 0 rgba(255,255,255,0.36),
    140px 234px 1px 1px rgba(206,236,255,0.94), -362px 1039px 0px 0 rgba(255,255,255,0.41),
    -1296px 673px 0px 0 rgba(255,255,255,0.38), -379px 1082px 1px 1px rgba(178,224,255,0.87),
    228px 992px 1px 1px rgba(255,255,255,0.99), -266px 215px 0px 0 rgba(255,255,255,0.45),
    1225px 899px 0px 0 rgba(178,224,255,0.65), 739px 500px 0px 0 rgba(206,236,255,0.81),
    -122px 667px 0px 0 rgba(255,255,255,0.31), 327px 85px 0px 0 rgba(178,224,255,0.7),
    -766px 861px 0px 0 rgba(178,224,255,0.81), 302px 926px 0px 0 rgba(255,255,255,0.4),
    -1195px 912px 0px 0 rgba(255,255,255,0.78), -507px 892px 0px 0 rgba(178,224,255,0.82),
    -60px 408px 0px 0 rgba(255,255,255,0.33), -1070px 573px 0px 0 rgba(178,224,255,0.74),
    423px 1077px 3px 2.2px rgba(190,230,255,0.94), -383px 766px 0px 0 rgba(255,255,255,0.78),
    652px 38px 0px 0 rgba(255,255,255,0.65), -344px 224px 0px 0 rgba(255,255,255,0.53),
    292px 499px 0px 0 rgba(206,236,255,0.65), -712px 610px 0px 0 rgba(255,255,255,0.77),
    -854px 802px 0px 0 rgba(255,255,255,0.76), 405px 72px 0px 0 rgba(255,255,255,0.5),
    185px 971px 1px 1px rgba(206,236,255,0.89), -982px 1086px 0px 0 rgba(206,236,255,0.81),
    -395px 1013px 1px 1px rgba(255,255,255,0.86), -1288px 709px 0px 0 rgba(255,255,255,0.36),
    -697px 112px 3px 2.2px rgba(160,235,215,0.98), 409px 982px 0px 0 rgba(255,255,255,0.4),
    432px 129px 0px 0 rgba(255,255,255,0.34), 2px 749px 0px 0 rgba(255,255,255,0.36),
    1204px 787px 0px 0 rgba(255,255,255,0.47), 117px 55px 0px 0 rgba(255,255,255,0.47),
    -1252px 68px 0px 0 rgba(255,255,255,0.46), 1199px 57px 1px 1px rgba(206,236,255,0.93),
    -544px 392px 0px 0 rgba(206,236,255,0.76), -1286px 947px 1px 1px rgba(255,255,255,0.88),
    -77px 373px 0px 0 rgba(255,255,255,0.34), 538px 348px 0px 0 rgba(255,255,255,0.31),
    331px 383px 0px 0 rgba(255,255,255,0.46), 689px 988px 1px 1px rgba(178,224,255,0.86),
    282px 474px 0px 0 rgba(255,255,255,0.49), 36px 658px 0px 0 rgba(255,255,255,0.34),
    34px 736px 0px 0 rgba(255,255,255,0.72), 887px 697px 0px 0 rgba(178,224,255,0.67),
    -1187px 740px 0px 0 rgba(206,236,255,0.83), 993px 342px 0px 0 rgba(255,255,255,0.47),
    -102px 996px 0px 0 rgba(255,255,255,0.42), 13px 779px 0px 0 rgba(255,255,255,0.48),
    1240px 586px 0px 0 rgba(178,224,255,0.7), 61px 577px 0px 0 rgba(255,255,255,0.34),
    -3px 863px 1px 1px rgba(206,236,255,0.95), -114px 634px 0px 0 rgba(255,255,255,0.3),
    -36px 23px 0px 0 rgba(255,255,255,0.42), 770px 377px 1px 1px rgba(255,255,255,0.96),
    -387px 1064px 0px 0 rgba(255,255,255,0.33), 32px 862px 0px 0 rgba(255,255,255,0.4),
    1113px 450px 0px 0 rgba(255,255,255,0.63), 365px 1px 0px 0 rgba(255,255,255,0.43);}
.bg-stars::after,.stars-only::after{box-shadow:
    -1166px 542px 2px 1.4px rgba(255,255,255,0.96), -1224px 407px 5px 2.6px rgba(160,235,215,0.96),
    39px 541px 2px 1.4px rgba(255,255,255,0.83), 94px 923px 2px 1.4px rgba(206,236,255,0.71),
    -14px 558px 2px 1.4px rgba(178,224,255,0.9), 274px 775px 2px 1.4px rgba(206,236,255,0.7),
    688px 786px 2px 1.4px rgba(255,255,255,0.8), 276px 4px 2px 1.4px rgba(206,236,255,0.98),
    -908px 692px 5px 2.6px rgba(255,255,255,0.92), 181px 1026px 2px 1.4px rgba(255,255,255,0.75),
    -1147px 88px 2px 1.4px rgba(206,236,255,0.79), 151px 527px 2px 1.4px rgba(178,224,255,0.95),
    265px 784px 2px 1.4px rgba(255,255,255,0.85), -501px 703px 2px 1.4px rgba(255,255,255,0.7),
    676px 358px 5px 2.6px rgba(160,235,215,0.97), 823px 868px 2px 1.4px rgba(206,236,255,0.74),
    -704px 429px 5px 2.6px rgba(190,230,255,0.88), -127px 158px 5px 2.6px rgba(255,255,255,0.99),
    285px 155px 2px 1.4px rgba(178,224,255,0.84), 931px 649px 2px 1.4px rgba(255,255,255,0.99),
    712px 10px 2px 1.4px rgba(178,224,255,0.73), -134px 1040px 2px 1.4px rgba(178,224,255,0.81),
    1241px 1092px 2px 1.4px rgba(255,255,255,0.8), 415px 926px 5px 2.6px rgba(160,235,215,0.99),
    810px 510px 2px 1.4px rgba(255,255,255,0.99), -1259px 160px 2px 1.4px rgba(255,255,255,0.99),
    -929px 449px 2px 1.4px rgba(178,224,255,0.94), -91px 108px 2px 1.4px rgba(255,255,255,0.82),
    1075px 41px 2px 1.4px rgba(255,255,255,0.95), -934px 462px 2px 1.4px rgba(178,224,255,0.87),
    281px 130px 2px 1.4px rgba(255,255,255,0.87), 523px 822px 2px 1.4px rgba(178,224,255,0.72),
    1299px 471px 5px 2.6px rgba(190,230,255,0.88);
  animation:tw 6s ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.30}50%{opacity:1}}

/* ── 深色段落：文字與卡片改成玻璃質感（配 .bg-stars 等深色底使用） ── */
.sect-dark h2{color:#fff;}
.sect-dark .sub{color:#a9bad9;}
.sect-dark .tag{background:rgba(62,187,237,.14);color:#7fd3f2;
  box-shadow:0 0 0 1px rgba(62,187,237,.30);}
.sect-dark .card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 46px -26px rgba(0,0,0,.7);}
.sect-dark .card:hover{background:rgba(255,255,255,.085);border-color:rgba(62,187,237,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 56px -24px rgba(0,0,0,.8);}
.sect-dark .card h3{color:#fff;}
.sect-dark .card p{color:#b9c8e2;}
.sect-dark .card li{color:#c4d1e6;border-bottom-color:rgba(255,255,255,.12);}
.sect-dark .card.stat b{background:linear-gradient(135deg,var(--blue-logo),var(--teal-logo));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.sect-dark a:not(.btn){color:var(--blue-logo);}
.bg-stars>.wrap{position:relative;z-index:1;}


/* 淺色藍圖格線：不轉深色的加強版，給文字量大的段落 */
.bg-blue{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#eef7fd 0%,#f7fbfe 55%,#eef6fc 100%);}
.bg-blue::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(26,58,107,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(26,58,107,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);}
.bg-blue::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 44% 50% at 88% 6%,rgba(62,187,237,.18),transparent 64%),
             radial-gradient(ellipse 40% 46% at 6% 94%,rgba(61,191,163,.16),transparent 64%);}
.bg-blue>.wrap,.bg-mesh>.wrap{position:relative;z-index:1;}

/* 深色段落內的流程步驟 */
.sect-dark .step{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 46px -26px rgba(0,0,0,.7);}
.sect-dark .step .n{background:linear-gradient(135deg,var(--blue-logo),var(--teal-logo));color:#06182c;}
.sect-dark .step h4{color:#fff;}
.sect-dark .step small{color:var(--blue-logo);}
.sect-dark .step p{color:#b9c8e2;}
.sect-dark .btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;}


/* 只加星點、不動背景：疊在本來就是深色的區塊上（中文首頁的 .journey-sec 等）。
   .journey-sec 底部會漸層淡出成淺色，所以星點也要跟著遮掉，不然會浮在白底上。 */
.stars-only{position:relative;overflow:hidden;}
/* 不要對這兩個偽元素下 mask-image：它們本身只有 1px×1px，遮罩會裁到自己的邊界框，
   結果把所有靠 box-shadow 畫出來的星點全部遮掉。星場垂直只到 1100px，
   剛好讓深色的上半部有星星、下半部漸層轉亮的地方自然沒有。 */
.stars-only>*{position:relative;z-index:1;}

/* 內容永遠壓在裝飾層之上 */
.bg-dots>.wrap,.bg-glow>.wrap,.bg-mesh>.wrap{position:relative;z-index:1;}
h2{font-size:1.9rem;color:var(--navy);text-align:center;margin-bottom:12px;}
h2.left{text-align:left;}
.sub{text-align:center;color:var(--muted);margin-bottom:48px;font-size:1.02rem;}
.tag{display:table;margin:0 auto 16px;background:var(--accent-soft);color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.15em;padding:5px 16px;border-radius:99px;
  box-shadow:0 0 0 1px rgba(29,155,210,.16),0 6px 18px -8px rgba(29,155,210,.45);}
img{max-width:100%;}
.ph-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px;}

/* 預覽提示條 */

/* 旅程敘事設計：全站共用變數 */
:root{
  --night:#0c1c38;
  --night2:#12264a;
  --glow-blue:rgba(62,187,237,.35);
  --glow-teal:rgba(61,191,163,.3);
}
/* 滾動顯現（配合 js/reveal.js） */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* NAV（深色玻璃） */
nav{background:rgba(12,28,56,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:10;}
/* 導覽列比內容區(1080)寬一些：越文選單字比中文長，1080 會把 logo 擠到第二行 */
.nav-inner{max-width:1140px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.logo{font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:.05em;text-decoration:none;display:flex;align-items:center;gap:0;}
.logo span{color:var(--accent);}
.logo img{height:32px;width:auto;margin-right:9px;}
footer .logo img{height:26px;}
.menu{display:flex;gap:15px;font-size:.9rem;align-items:center;flex-wrap:wrap;}
.menu a{color:#9db1d4;text-decoration:none;padding:4px 2px;}
.menu a:hover{color:#fff;}
.menu a.active{color:var(--blue-logo);font-weight:700;border-bottom:2px solid var(--blue-logo);}
.menu a.cta-mini{color:#0c1c38;background:linear-gradient(135deg,var(--blue-logo),var(--teal-logo));padding:6px 18px;border-radius:99px;font-weight:700;border-bottom:none;}
.menu a.lang{border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:4px 13px;font-size:.83rem;color:#9db1d4;font-weight:600;}
.menu a.lang:hover{border-color:var(--blue-logo);color:var(--blue-logo);}
nav .logo{color:#fff;}
nav .logo span{color:var(--blue-logo);}

/* 按鈕 */
.btn{display:inline-block;padding:14px 40px;border-radius:99px;font-weight:700;font-size:1rem;text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--blue-logo),var(--teal-logo));color:#0c1c38;font-weight:800;box-shadow:0 8px 28px var(--glow-blue);}
.btn-ghost{border:2px solid var(--navy);color:var(--navy);margin-left:14px;}
.btn-white{background:#fff;color:var(--accent);}

/* 內頁 Hero（夜色） */
.page-hero{position:relative;overflow:hidden;padding:80px 0 72px;
  background:radial-gradient(ellipse 55% 60% at 80% 15%,var(--glow-blue),transparent 60%),
             radial-gradient(ellipse 45% 50% at 12% 95%,var(--glow-teal),transparent 60%),
             linear-gradient(180deg,var(--night) 0%,var(--night2) 100%);}
.page-hero .crumb{font-size:.85rem;color:#8fa3c8;margin-bottom:16px;}
.page-hero .crumb a{color:#8fa3c8;text-decoration:none;}
.page-hero h1{font-size:2.4rem;color:#fff;letter-spacing:.04em;margin-bottom:14px;font-weight:900;}
.page-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue-logo),var(--teal-logo));-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero p.lead{max-width:680px;color:#a9bad9;font-size:1.08rem;margin-bottom:28px;}
.page-hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}
/* 內頁 hero 主圖：乾淨大圓角＋柔和光暈 */
.page-hero .ph-img{border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 32px 72px rgba(0,0,0,.5),0 0 80px rgba(62,187,237,.12);}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;}

/* 卡片 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
/* 文章不足 3 篇：改橫式大卡並置中，避免 3 欄格線留下空洞 */
/* 文章不足 3 篇：卡片樣式跟部落格列表頁完全一樣（直式、上圖下文），
   只是把整列置中並限制單卡寬度，避免 3 欄格線右邊留空洞。 */
.grid-3.few{grid-template-columns:repeat(auto-fit,minmax(260px,336px));justify-content:center;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px;
  box-shadow:0 1px 2px rgba(26,58,107,.05),0 10px 26px -14px rgba(26,58,107,.18);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s,border-color .34s;}
.card:hover{transform:translateY(-5px);border-color:#c9dcee;
  box-shadow:0 2px 4px rgba(26,58,107,.06),0 26px 50px -20px rgba(26,58,107,.30);}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transform:none;transition:none;}}

/* 數字卡：整頁最強的內容，給它專屬的重量 */
.card.stat{position:relative;overflow:hidden;text-align:center;padding-top:38px;}
.card.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue-logo),var(--teal-logo));}
.card.stat b{font-size:2.9rem;line-height:1.05;display:block;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--accent),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.card.stat h3{margin:10px 0 8px;font-size:1rem;}
@media(max-width:640px){.card.stat b{font-size:2.4rem;}}
.card h3{color:var(--navy);font-size:1.1rem;margin-bottom:10px;}
.card p{color:var(--muted);font-size:.95rem;}
.card .q{color:var(--accent);font-weight:800;font-size:1.05rem;display:block;margin-bottom:8px;}
.card .ico{font-size:1.8rem;display:block;margin-bottom:12px;}
.card ul{list-style:none;margin-top:12px;}
.card li{font-size:.9rem;padding:7px 0;border-bottom:1px dashed var(--line);}
.card li:last-child{border-bottom:none;}
.card li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:8px;}

/* 服務詳情列（基本版，越文版沿用中） */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:56px;}
.svc-row:last-child{margin-bottom:0;}
.svc-row.rev .svc-img{order:2;}
.svc-row h3{font-size:1.4rem;color:var(--navy);margin-bottom:10px;font-weight:900;}
.svc-row .one{font-weight:700;color:var(--accent);margin-bottom:12px;}
.svc-row p{color:var(--muted);font-size:.96rem;margin-bottom:14px;}
.svc-row ul{list-style:none;}
.svc-row li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:.93rem;}
.svc-row li:last-child{border-bottom:none;}
.svc-row li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:8px;}
.svc-img{aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--accent-soft);}
.svc-img img{width:100%;height:100%;object-fit:cover;}

/* 互動圖片手風琴（服務模組） */
.acc{display:flex;gap:14px;min-height:580px;margin-top:16px;}
.acc-panel{position:relative;flex:1;border-radius:22px;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;transition:flex .65s cubic-bezier(.65,.05,.25,1);}
.acc-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(12,28,56,.18) 30%,rgba(12,28,56,.9) 100%);transition:opacity .5s;}
.acc-panel.on{flex:3.4;cursor:default;}
/* 收合狀態：直式標題＋編號 */
.acc-closed{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:26px 0;color:#fff;opacity:1;transition:opacity .3s;}
.acc-closed .acc-no{font-weight:900;font-size:1.05rem;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);}
.acc-closed .acc-title{writing-mode:vertical-rl;letter-spacing:.35em;font-weight:800;font-size:1.02rem;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.acc-panel.on .acc-closed{opacity:0;pointer-events:none;}
/* 展開狀態：內容浮出 */
.acc-open{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 46px;opacity:0;transform:translateY(18px);transition:opacity .5s .25s ease,transform .5s .25s ease;}
.acc-panel.on .acc-open{opacity:1;transform:none;}
.acc-open .acc-no{font-size:2.6rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px var(--blue-logo);margin-bottom:14px;}
.acc-open .svc-en{display:block;font-size:.75rem;font-weight:700;letter-spacing:.15em;color:var(--blue-logo);text-transform:uppercase;margin-bottom:4px;}
.acc-open h3{font-size:1.6rem;font-weight:900;color:#fff;margin-bottom:6px;}
.acc-open .one{font-weight:700;color:var(--blue-logo);margin-bottom:12px;}
.acc-open p{color:#c9d6ec;font-size:.93rem;margin-bottom:12px;max-width:520px;}
.acc-open ul{list-style:none;}
.acc-open li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.18);font-size:.9rem;color:#dbe6f5;}
.acc-open li:last-child{border-bottom:none;}
.acc-open li::before{content:"✓";color:var(--teal-logo);font-weight:800;margin-right:8px;}
/* 插圖模式（行銷代操）：淺色底＋插圖元素 */
.acc-panel.illu{background:linear-gradient(165deg,#eef7fd 0%,#e6f8f1 100%);}
.acc-panel.illu::before{display:none;}
.acc-panel.illu .acc-illu{position:absolute;top:8%;left:50%;transform:translateX(-50%);height:44%;width:auto;max-width:86%;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(12,28,56,.15));transition:all .5s ease;z-index:1;}
.acc-panel.illu.on .acc-illu{top:6%;height:48%;}
.acc-panel.illu .acc-closed{color:var(--navy);justify-content:flex-end;}
.acc-panel.illu .acc-closed .acc-no{-webkit-text-stroke:1.5px var(--accent);}
.acc-panel.illu .acc-closed .acc-title{text-shadow:none;}
.acc-panel.illu .acc-open{justify-content:flex-end;}
.acc-panel.illu .acc-open h3{color:var(--navy);}
.acc-panel.illu .acc-open .one{color:var(--accent);}
.acc-panel.illu .acc-open p{color:var(--muted);}
.acc-panel.illu .acc-open .acc-no{-webkit-text-stroke:2px var(--accent);}

/* 時間軸 / 流程 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.steps.five{grid-template-columns:repeat(5,1fr);}
.step{text-align:center;padding:28px 18px;background:var(--card);border-radius:16px;border:1px solid var(--line);}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.step h4{color:var(--navy);margin-bottom:6px;}
.step small{color:var(--accent);font-weight:600;letter-spacing:.08em;display:block;margin-bottom:8px;}
.step p{font-size:.87rem;color:var(--muted);}

/* FAQ（手風琴：點開/收起） */
.faq{max-width:760px;margin:0 auto;}
.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;margin-bottom:16px;overflow:hidden;}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:22px 28px;color:var(--navy);font-size:1.02rem;font-weight:700;user-select:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q";color:var(--accent);font-weight:800;flex-shrink:0;}
.qa summary::after{content:"＋";margin-left:auto;color:var(--accent);font-weight:800;font-size:1.1rem;transition:transform .25s;flex-shrink:0;}
.qa[open] summary::after{transform:rotate(45deg);}
.qa[open] summary{border-bottom:1px dashed var(--line);}
.qa p{color:var(--muted);font-size:.93rem;padding:16px 28px 22px 52px;}
.qa summary:hover{color:var(--accent);}

/* 深色區塊 */
.dark-band{background:var(--navy);color:#fff;border-radius:24px;padding:56px 48px;}
.dark-band h2{color:#fff;}
.dark-band .sub{color:#b9c3d9;}

/* CTA 區 */
.cta-final{background:linear-gradient(135deg,var(--accent) 0%,var(--teal) 100%);border-radius:24px;padding:44px 40px;text-align:center;color:#fff;}
.cta-final h2{color:#fff;font-size:1.55rem;}
.cta-final p{color:#e3f4fb;margin:0 auto 26px;max-width:640px;}
.contact-row{margin-top:24px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:.92rem;color:#e3f4fb;}
.contact-row b{color:#fff;}

/* 表格 */
table.nice{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--line);}
table.nice th{background:var(--navy);color:#fff;padding:14px 18px;text-align:left;font-size:.92rem;}
table.nice td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:.92rem;}
table.nice tr:last-child td{border-bottom:none;}

/* 案例卡 */
.case-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.case-card .stats{display:flex;gap:10px;margin:16px 0 4px;flex-wrap:wrap;}
.case-card .stat{flex:1 1 30%;background:var(--accent-soft);border-radius:12px;padding:12px 10px;text-align:center;min-width:88px;}
.case-card .stat b{display:block;font-size:1.35rem;color:var(--accent);line-height:1.2;}
.case-card .stat small{color:var(--muted);font-size:.72rem;line-height:1.4;display:block;margin-top:3px;}
.case-card .body{padding:28px;}
.case-card .industry{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:99px;margin-bottom:12px;}
.case-card h3{color:var(--navy);font-size:1.15rem;margin-bottom:12px;}
.case-card dl{font-size:.9rem;}
.case-card dt{font-weight:700;color:var(--navy);margin-top:12px;}
.case-card dd{color:var(--muted);margin-left:0;}

/* 部落格卡 */
/* ── 全站長文段落兩端對齊 ──
   只套在「真的是長篇散文」的容器上。刻意排除置中的元素（.sub / .step / .cta-final /
   .fit / figcaption / 表格 / .page-hero.center），因為 text-align 會覆蓋置中。
   .card 用 :not([style*="center"]) 排除首頁那些行內置中的數據卡。 */
.legal p,.legal li,
.qa p,
.svc-row p,
.acc-open p,
.card:not([style*="center"]) p,
.page-hero:not(.center) .lead{
  text-align:justify;text-justify:inter-word;overflow-wrap:break-word;}

/* 部落格列表頁與分類頁共用：置中 hero + 主題膠囊（原本只寫在 blog.html 內嵌樣式裡，
   導致產生出來的分類頁長得不一樣。搬到這裡讓兩種頁面是同一套介面。） */
.page-hero.center{padding:62px 0 56px;}
.page-hero.center .wrap{text-align:center;}
.page-hero.center h1{text-align:center;text-wrap:balance;}
  /* text-wrap:balance 讓換行時兩行長度勻稱、不留孤字；不設 max-width，
     否則本來一行放得下的標題會被硬擠成兩行（越文複合詞會被拆開）。 */
.page-hero.center p.lead{max-width:780px;margin:0 auto;text-align:center;
  text-wrap:pretty;}                        /* 最後一行不留孤字 */
.page-hero.center .crumb{color:#9fb4d6;font-size:.84rem;margin-bottom:14px;}
.page-hero.center .crumb a{color:#8fd8f0;text-decoration:none;}
.topics{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;}
.topics span,.topics a{font-size:.85rem;color:#c3d3ee;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:7px 15px;background:rgba(255,255,255,.05);text-decoration:none;}
.topics a:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.42);}
.topics a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;display:block;transition:transform .15s;}
.post-card:hover{transform:translateY(-3px);}
.post-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent-soft),#f4ece2);display:flex;align-items:center;justify-content:center;font-size:2.4rem;}
/* 有封面圖時：改成 og:image 的 1.91:1，圖片填滿裁切（原本這兩條只在文章頁的 ART_CSS 裡，
   列表頁與房仲頁吃不到，放了封面圖會爆版） */
.post-card .thumb.has-img{padding:0;background:none;aspect-ratio:1.91/1;}
.post-card .thumb.has-img img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card .body{padding:22px 24px;}
.post-card .cat{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.08em;}
.post-card h3{color:var(--navy);font-size:1.05rem;margin:6px 0 8px;line-height:1.5;}
.post-card p{color:var(--muted);font-size:.88rem;}
.post-card .date{color:#a8adb8;font-size:.8rem;margin-top:10px;display:block;}

/* 表單 */
form.contact{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:40px;}
form.contact label{display:block;font-weight:700;color:var(--navy);font-size:.92rem;margin:18px 0 6px;}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff;}
form.contact button{margin-top:26px;width:100%;padding:15px;background:var(--accent);color:#fff;font-weight:700;font-size:1.02rem;border:none;border-radius:99px;cursor:pointer;}

/* 提示標籤（示意內容用） */
.demo-note{background:#fff8e1;border:1px solid #f0d98c;color:#8a6d1a;border-radius:12px;padding:12px 18px;font-size:.85rem;margin-bottom:32px;text-align:center;}

/* FOOTER */
/* Huy hiệu「Đã thông báo」của Bộ Công Thương.
   Ảnh gốc nền trong suốt, chữ xanh — đặt trên nền trắng mới đọc được
   trên chân trang nền tối. width/height cố định để tránh xô layout. */
.bct-badge{display:inline-block;margin-top:14px;background:#fff;border-radius:8px;
  padding:7px 11px;line-height:0;transition:transform .12s;}
.bct-badge:hover{transform:translateY(-2px);}
.bct-badge img{height:44px;width:auto;display:block;}
footer{background:var(--navy);color:#8e9ab5;padding:48px 0 36px;font-size:.85rem;margin-top:72px;}
.foot{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;}
footer .logo{color:#fff;font-size:1.15rem;}
footer h4{color:#fff;font-size:.95rem;margin-bottom:12px;}
footer a{color:#8e9ab5;text-decoration:none;display:block;padding:3px 0;}
footer a:hover{color:#fff;}
.copyright{max-width:1080px;margin:32px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:#5f6b8a;}

@media(max-width:860px){
  .grid-3,.grid-2,.grid-4,.steps,.steps.five,.grid-3.few{grid-template-columns:1fr;}
  .hero-grid,.svc-row{grid-template-columns:1fr;}
  .svc-row.rev .svc-img{order:0;}
  /* 手風琴在手機上改直式收合 */
  .acc{flex-direction:column;min-height:0;gap:12px;}
  .acc-panel{flex:none;height:88px;transition:height .5s cubic-bezier(.65,.05,.25,1);}
  .acc-panel.on{flex:none;height:560px;}
  .acc-closed{flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;padding:0 22px;}
  .acc-closed .acc-title{writing-mode:horizontal-tb;letter-spacing:.15em;}
  .acc-open{padding:26px 22px;}
  .acc-panel.illu .acc-illu{height:36%;top:5%;}
  .page-hero h1{font-size:1.8rem;}
  .foot{grid-template-columns:1fr;}
  .dark-band,.cta-final{padding:40px 24px;}
}

/* 手機專用換行：桌機隱藏，≤640px 生效 */
.m-br{display:none;}
@media(max-width:640px){
  .m-br{display:inline;}
}

/* SnapPost 子導覽列 */
.sp-subnav{background:#eef5fb;border-bottom:1px solid var(--line);}
.sp-subnav .inner{max-width:1140px;margin:0 auto;padding:11px 24px;display:flex;gap:26px;flex-wrap:wrap;font-size:.9rem;}
.sp-subnav a{color:var(--muted);text-decoration:none;font-weight:700;padding:2px 0;}
.sp-subnav a.on{color:var(--accent);border-bottom:2px solid var(--accent);}
@media(max-width:640px){.sp-subnav .inner{gap:16px;padding:10px 16px;font-size:.85rem;}}

/* 桌機專用換行：手機隱藏（讓文字自然流動），>640px 生效 */
.d-br{display:none;}
@media(min-width:641px){.d-br{display:inline;}}

/* SnapPost 主導覽下拉（桌機）；手機隱藏下拉、改用 sp-subnav 橫條 */
.dd{position:relative;}
.dd-toggle::after{content:"▾";font-size:.95em;margin-left:6px;opacity:.9;}
.dd-menu{position:absolute;top:100%;left:0;padding-top:12px;display:none;z-index:60;}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block;}
.dd-box{background:linear-gradient(180deg,var(--night,#0e2444) 0%,var(--navy) 100%);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:8px;min-width:215px;}
nav .dd-box a{display:block;padding:10px 16px;border-radius:9px;color:#dbe4f3;font-size:.92rem;text-decoration:none;font-weight:600;white-space:nowrap;}
nav .dd-box a:hover{background:rgba(62,187,237,.16);color:#fff;}
/* 分類下拉：分組標題 + 篇數 */
nav .dd-box .dd-grp{display:block;padding:9px 12px 5px;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#7f93b5;}
nav .dd-box .dd-grp:not(:first-child){margin-top:4px;border-top:1px solid rgba(255,255,255,.10);padding-top:12px;}
nav .dd-box a{display:flex;align-items:center;justify-content:space-between;gap:10px;}
nav .dd-box .dd-n{flex:none;font-size:.7rem;font-weight:700;color:#8fb4d6;
  background:rgba(255,255,255,.09);border-radius:99px;padding:1px 7px;min-width:20px;text-align:center;}
nav .dd-box a:hover .dd-n{background:rgba(255,255,255,.18);color:#fff;}
nav .dd-box a.on{color:var(--blue-logo);font-weight:800;}

/* ── 漢堡選單（≤1100px：導覽列在此寬度以下會擠不下，改成點開才展開）── */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:38px;padding:0 10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;flex:none;}
.nav-toggle i{display:block;height:2px;background:#cfe0f5;border-radius:2px;
  transition:transform .25s ease,opacity .18s ease;}
@media(max-width:1100px){
  .nav-inner{flex-wrap:nowrap;}
  .nav-toggle{display:flex;}
  nav.nav-open .nav-toggle i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  nav.nav-open .nav-toggle i:nth-child(2){opacity:0;}
  nav.nav-open .nav-toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* 選單改成從導覽列下方滑出的面板 */
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    /* nowrap 是必要的：column + wrap 在高度受限時會把項目排到右邊新欄位 */
    flex-wrap:nowrap;align-items:stretch;gap:0;font-size:.98rem;
    background:linear-gradient(180deg,#0e2444,#122c52);
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 44px rgba(0,0,0,.5);
    max-height:0;overflow:hidden;transition:max-height .3s ease;}
  nav.nav-open .menu{max-height:calc(100vh - 66px);overflow-y:auto;}
  .menu > a,.menu .dd > .dd-toggle{display:block;padding:14px 22px;
    border-bottom:1px solid rgba(255,255,255,.07);}
  .menu a.active{border-bottom:1px solid rgba(255,255,255,.07);}
  .menu a.cta-mini{margin:14px 22px 8px;text-align:center;border-bottom:none;padding:12px 18px;}
  .menu a.lang{margin:0 22px 18px;text-align:center;border:1px solid rgba(255,255,255,.22);
    border-radius:99px;padding:10px 18px;}

  /* 子選單：手風琴（.open 由 nav.js 加上） */
  .menu .dd{position:static;}
  .menu .dd > .dd-toggle::after{float:right;transition:transform .25s ease;}
  .menu .dd.open > .dd-toggle::after{transform:rotate(180deg);}
  .menu .dd .dd-menu{position:static;display:block;padding-top:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .menu .dd.open .dd-menu{max-height:760px;}
  .menu .dd .dd-box{background:rgba(0,0,0,.24);border:none;border-radius:0;
    box-shadow:none;padding:4px 0;min-width:0;}
  nav .menu .dd .dd-box a{padding:12px 22px 12px 40px;border-radius:0;white-space:normal;}
  nav .menu .dd .dd-box .dd-grp{padding-left:22px;}
  /* 不需要壓制桌機的 hover：基礎規則只改 display，手機這裡展開是靠 max-height。
     （原本多寫的 :focus-within{max-height:0} 反而會在點擊取得焦點後把手風琴鎖住） */
}
.sp-subnav{display:none;}
/* sp-subnav（SnapPost 頁的淺色分頁條）全寬度都不顯示：
   舊版是「手機關掉下拉、改用這條橫條」，現在漢堡選單裡的 SnapPost 手風琴已經取代它。
   標記語言保留在頁面上（對內部連結有幫助），只是不再佔版面。 */

/* Zalo 聊天泡泡（右下角） */
#zl-bubble{position:fixed;right:22px;bottom:22px;z-index:99;display:block;width:58px;height:58px;border-radius:16px;box-shadow:0 10px 28px rgba(0,104,255,.45);transition:transform .2s;animation:zl-pulse 2.6s infinite;}
#zl-bubble:hover{transform:scale(1.1);}
#zl-bubble img{width:100%;height:100%;display:block;border-radius:16px;}
@keyframes zl-pulse{0%{box-shadow:0 10px 28px rgba(0,104,255,.45),0 0 0 0 rgba(0,104,255,.4);}70%{box-shadow:0 10px 28px rgba(0,104,255,.45),0 0 0 14px rgba(0,104,255,0);}100%{box-shadow:0 10px 28px rgba(0,104,255,.45),0 0 0 0 rgba(0,104,255,0);}}
@media(max-width:640px){#zl-bubble{right:16px;bottom:16px;width:52px;height:52px;}}

/* 手機版 Zalo 泡泡貼近右緣 */
@media(max-width:640px){
  .zalo-chat-widget{right:12px !important;bottom:14px !important;}
  #zl-bubble{right:12px;bottom:14px;}
}

/* LINE 聊天泡泡（中文版右下角） */
#ln-bubble{position:fixed;right:22px;bottom:22px;z-index:99;display:block;width:60px;height:60px;border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.22);transition:transform .2s;}
#ln-bubble:hover{transform:scale(1.1);}
#ln-bubble img{width:100%;height:100%;display:block;border-radius:16px;}
@keyframes ln-pulse{0%{box-shadow:0 10px 28px rgba(6,199,85,.45),0 0 0 0 rgba(6,199,85,.4);}70%{box-shadow:0 10px 28px rgba(6,199,85,.45),0 0 0 14px rgba(6,199,85,0);}100%{box-shadow:0 10px 28px rgba(6,199,85,.45),0 0 0 0 rgba(6,199,85,0);}}
@media(max-width:640px){#ln-bubble{right:12px;bottom:14px;width:60px;height:60px;}}

/* 中文版 Zalo 泡泡（疊在 LINE 泡泡上方） */
#zl-top{position:fixed;right:22px;bottom:92px;z-index:99;display:block;width:58px;height:58px;border-radius:16px;box-shadow:0 10px 28px rgba(0,104,255,.45);transition:transform .2s;animation:zl-pulse 2.6s infinite;}
#zl-top:hover{transform:scale(1.1);}
#zl-top img{width:100%;height:100%;display:block;border-radius:16px;}
@media(max-width:640px){#zl-top{right:12px;bottom:78px;width:52px;height:52px;}}

/* Zalo 分工：桌機用官方站內聊天視窗、手機用自製泡泡（深連結進 App 對話） */
.zalo-chat-widget{right:15px !important;bottom:22px !important;transform:scale(1.25);transform-origin:bottom right;}
.zalo-chat-widget.zl-above{bottom:96px !important;}
@media(max-width:640px){
  .zalo-chat-widget{right:15px !important;bottom:15px !important;transform:scale(1.333);transform-origin:bottom right;}
  .zalo-chat-widget.zl-above{bottom:87px !important;}
}