/* หน้าเว็บ FanFleur Guide (v2.133 เจ้าของ 2026-10-30) โทนสีประจำเสวี่ยเอ๋อ: ชมพูกลีบบัว บนพื้นขาวงา น้ำเงินหมึก และทอง + เขียวสวน
   mobile-first ไม่กำหนดความกว้างตายตัวให้ข้อความ (อังกฤษยาวกว่าไทย) / ไม่มีโหมดมืด (หน้าหนังสือ) */
:root{--paper:#FBF3EA;--paper2:#F6E7DA;--lotus:#F2B8C6;--lotus-d:#C9657E;--ink:#2F3A5C;--ink-s:#6B7190;--gold:#C9A04A;--gold-l:#F3E2B5;--sage:#A9B994;--sage-d:#5F7A4C;--line:#E8D7C6;--card:#FFFDF9;
  --display:"Fredoka","Mali",ui-rounded,system-ui,sans-serif;--body:"Mali","Fredoka",ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.65 var(--body);background:var(--paper);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 10px}
h2{font-size:clamp(24px,4.2vw,36px);font-weight:700}
h3{font-size:20px;font-weight:600}
p{margin:0 0 12px}
.shell{width:min(100% - 32px,1120px);margin:0 auto}
a:focus-visible,button:focus-visible,.lk:focus-visible{outline:3px solid var(--lotus-d);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.eye{font:600 13px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--lotus-d);margin-bottom:8px}

/* แถบบน */
.top{position:sticky;top:0;z-index:20;background:rgba(251,243,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:10px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 19px var(--display);margin-right:auto}
.brand i{width:30px;height:30px;border-radius:50% 50% 8px 8px;flex:none;background:conic-gradient(from 210deg at 50% 100%,var(--lotus) 0 20deg,var(--gold-l) 20deg 40deg,var(--lotus) 40deg 60deg,var(--gold-l) 60deg 80deg,var(--lotus) 80deg 100deg,var(--gold-l) 100deg 120deg,transparent 120deg);box-shadow:inset 0 -3px 0 var(--gold)}
.links{display:none;gap:2px}
.links a{padding:6px 12px;border-radius:999px;text-decoration:none;font:600 15px var(--display)}
.links a:hover{background:var(--paper2)}
.chip{min-height:40px;min-width:48px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:600 14px var(--display);cursor:pointer}
.chip:hover{border-color:var(--lotus)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font:600 16px var(--display);text-decoration:none;box-shadow:0 4px 0 #1E2640}
.btn:hover{background:#3B4870}

/* hero */
.hero{padding:20px 0 28px;background:radial-gradient(120% 80% at 80% 0%,#FCE3EA 0,transparent 60%),radial-gradient(90% 70% at 0% 100%,#EAF0DD 0,transparent 60%)}
.hero-in{display:grid;gap:20px}
.hero-art{margin:0;border-radius:28px 28px 120px 28px;overflow:hidden;box-shadow:0 14px 40px rgba(47,58,92,.18);aspect-ratio:4/3}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero h1{font-size:clamp(40px,9vw,72px);font-weight:700;display:flex;flex-direction:column;gap:4px}
.hero h1 small{font:600 clamp(16px,2.6vw,20px) var(--display);color:var(--gold);letter-spacing:.04em}
.hero .tag{font:600 clamp(18px,3vw,22px)/1.35 var(--display);color:var(--lotus-d)}
.sign{font-style:italic;color:var(--ink-s)}
.sign::before{content:"— "}
.pill{display:inline-flex;align-items:flex-start;gap:10px;padding:10px 16px;border-radius:18px;background:var(--card);border:1px dashed var(--gold);font-size:14px;line-height:1.45;max-width:100%}
.pill .dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-l);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(243,226,181,.4)}}

/* sections */
.sec{padding:40px 0}
.sec.tint{background:linear-gradient(180deg,var(--paper2),var(--paper))}
.intro{color:var(--ink-s);max-width:60ch}

/* จดหมาย */
.letter{display:grid;gap:18px;padding:22px;border-radius:24px;background:var(--card) repeating-linear-gradient(180deg,transparent 0 31px,rgba(201,160,74,.14) 31px 32px);border:1px solid var(--line);box-shadow:0 8px 24px rgba(47,58,92,.08);position:relative}
.letter::before{content:"";position:absolute;top:-10px;left:50%;width:90px;height:22px;transform:translateX(-50%) rotate(-2deg);background:rgba(242,184,198,.7);border-radius:3px}
.ltr-pic{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:4px solid var(--lotus);justify-self:center}
.ltr-sign{font:600 26px var(--display);color:var(--lotus-d);transform:rotate(-3deg);display:inline-block;margin-top:4px}
.ps{font-size:14px;color:var(--ink-s)}

/* ตัวอย่างลุค */
.look-grid{display:grid;gap:24px;align-items:start}
.honest,.disc{margin-top:16px;padding:16px 18px;border-radius:18px;background:#EEF3E6;border-left:5px solid var(--sage-d)}
.disc{background:var(--card);border-left-color:var(--gold)}
.honest-t,.disc-t{font:700 18px var(--display);margin-bottom:4px}
.disc p:not(.disc-t):not(.bds){font-size:14px}
.card{margin:0;padding:20px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(47,58,92,.1);position:relative}
.ex{position:absolute;top:-12px;right:18px;margin:0;padding:3px 12px;border-radius:999px;background:var(--gold);color:#fff;font:600 13px var(--display)}
.card-t{font:700 22px/1.25 var(--display);margin-bottom:12px}
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:12px 0;border-top:1px dashed var(--line)}
.row:first-child{border-top:0}
.kind{flex:none;min-width:5.5em;font:600 13px var(--display);color:var(--lotus-d);text-transform:uppercase;letter-spacing:.04em}
.name{flex:1 1 12em;min-width:0}
.react{flex-basis:100%;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sage-d);font-style:italic}
.react .tood{width:44px;height:44px}
.takes{margin-top:14px;padding:14px;border-radius:16px;background:#FDF0F3}
.takes-q{font:600 15px var(--display);margin-bottom:8px}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.picks button{min-height:40px;padding:0 16px;border-radius:999px;border:2px solid var(--lotus);background:#fff;color:var(--ink);font:600 15px var(--display);cursor:pointer}
.picks button[aria-pressed="true"]{background:var(--lotus);color:var(--ink)}
.line{margin:0 0 8px}
.who{display:block;font:700 16px var(--display)}
.wtag{display:block;font-size:13px;color:var(--ink-s);margin-bottom:4px}
.note{font-size:12px;color:var(--ink-s);margin:0}
.card figcaption{margin-top:12px;font-size:13px;color:var(--ink-s);text-align:center}

/* ปุ่มลิงก์ + ป้ายบอก (กฎจริงใจ) */
.lks{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.lk{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:600 13px var(--display);text-decoration:none;line-height:1.2}
a.lk:hover{background:var(--ink);color:#fff}
.lk.off{border-style:dashed;border-color:#C9C3CF;color:#8C8798;background:#F7F4F8;cursor:not-allowed}
.lk small{font:500 11px var(--body);padding:1px 7px;border-radius:999px;background:#ECE7EF}
.lk .arr{font-size:12px}
.lk-ic{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid currentColor}
.lk-ic-shop,.lk-ic-shopee,.lk-ic-lazada{border-radius:3px 3px 5px 5px}
.lk-ic-ig{border-radius:4px}
.lk-ic-line{border-radius:6px 6px 6px 1px}
.lk-ic-brand{border-radius:50% 50% 2px 2px}
.lk-ic-affiliate,.lk-ic-web{border-style:dotted}
.bds{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.bd{display:inline-block;padding:3px 10px;border-radius:8px;font:600 12px/1.35 var(--body)}
.bd-paid{background:#FCE3EA;color:#8E3550}
.bd-sent{background:#E6EEF9;color:#2F4A7A}
.bd-earn{background:var(--gold-l);color:#6E5418}

/* หมวด */
.cats{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px}
.cat{display:flex;flex-direction:column;padding:20px;border-radius:22px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.cat.now{border:2px solid var(--sage-d)}
.cat h3{margin-bottom:2px}
.cat .who{font:600 14px var(--display);color:var(--ink-s);margin-bottom:8px}
.cat > p:not(.st):not(.who){font-size:15px}
.st{align-self:flex-start;margin-bottom:10px;padding:2px 10px;border-radius:999px;font:600 12px var(--display);background:#ECE7EF;color:var(--ink-s)}
.cat.now .st{background:var(--sage-d);color:#fff}
.tags{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:2px 10px;border-radius:999px;background:var(--paper2);font-size:13px}
.cat .lks,.cat .bds{flex-basis:auto;flex:none}
.cat .lks{margin-top:10px}
/* ภาพประกอบด้วย CSS ต่อหมวด */
.art{display:block;flex:none;width:64px;height:64px;margin-bottom:12px;border-radius:18px;background:var(--paper2);position:relative}
.art-fan-tree{background:url(../assets/ne/ff/s6-1a.webp) 50% 40%/cover;border-radius:50%}
.art-paper{background:url(../assets/ne/items/paper_fan.webp) center/86% no-repeat,#FDF0F3}
.art-fabric{background:linear-gradient(45deg,var(--lotus) 25%,transparent 25% 50%,var(--lotus) 50% 75%,transparent 75%) 0 0/16px 16px,linear-gradient(0deg,var(--ink) 0 50%,#7D8CB8 50%);clip-path:polygon(18% 30%,82% 30%,92% 100%,8% 100%);border-radius:0}
.art-fabric::before{content:"";position:absolute;left:30%;right:30%;top:0;height:40%;border:5px solid var(--gold);border-bottom:0;border-radius:20px 20px 0 0;clip-path:none}
.art-zine{background:linear-gradient(90deg,#fff 0 48%,var(--line) 48% 52%,#fff 52%);border:2px solid var(--ink);border-radius:6px;transform:rotate(-4deg)}
.art-zine::after{content:"";position:absolute;left:12%;top:22%;width:26%;height:30%;border-radius:50%;background:var(--lotus)}
.art-zine::before{content:"";position:absolute;right:12%;top:26%;width:26%;height:4px;background:var(--sage-d);box-shadow:0 10px 0 var(--sage-d),0 20px 0 var(--sage-d)}
.art-scent{background:none}
.art-scent::before{content:"";position:absolute;left:22%;right:22%;bottom:0;height:62%;border-radius:12px 12px 16px 16px;background:linear-gradient(180deg,#E9F1F8,#CFE0EE);border:2px solid var(--ink)}
.art-scent::after{content:"";position:absolute;left:40%;right:40%;top:14%;height:22%;border-radius:4px;background:var(--gold)}

/* Toodling */
.duo{display:grid;gap:16px;margin-top:16px}
.pc{padding:20px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
.troupe{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tood{display:inline-block;flex:none;width:64px;height:64px;background-size:400% 100%;background-repeat:no-repeat;background-position:0 0}
.tood.walk,.react .tood{animation:frames 1s steps(4) infinite}
.troupe .tood:nth-child(2){animation-delay:-.25s}.troupe .tood:nth-child(3){animation-delay:-.5s}.troupe .tood:nth-child(4){animation-delay:-.75s}
@keyframes frames{to{background-position:133.333% 0}}
.note-art{position:relative;width:96px;height:72px;margin-bottom:12px}
.note-art img{width:72px;height:72px;transform:rotate(-8deg)}
.note-art .ink{position:absolute;right:0;bottom:6px;width:22px;height:14px;border-radius:50% 40% 55% 45%;background:var(--ink);opacity:.75}

/* แบรนด์ */
.brands{padding:24px;border-radius:24px;background:linear-gradient(135deg,#FCE3EA,#F3E2B5);text-align:left}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}
.addr{font-size:14px;color:var(--ink-s);overflow-wrap:anywhere}

.foot{padding:28px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-s);text-align:center}
.foot p{margin:0 0 6px}
.foot .by{font:600 12px var(--display);letter-spacing:.08em}
.foot .cp{font-size:12px}

@media (min-width:720px){
  .links{display:flex}
  .hero{padding:40px 0 48px}
  .hero-in{grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}
  .hero-art{order:2;aspect-ratio:1/1}
  .letter{grid-template-columns:auto 1fr;gap:28px;padding:32px}
  .ltr-pic{width:160px;height:160px;justify-self:start}
  .look-grid{grid-template-columns:1fr 1.1fr;gap:40px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr 1fr}
  .brands{padding:36px}
  .sec{padding:56px 0}
}
@media (min-width:1040px){.cats{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* v2.154.0 เราทำอะไร + หมวด (รวม GOT IT, BABE GUIDE) */
.do-list{margin-bottom:36px}.do-list .pc h3{margin-bottom:6px}.do-list .pc p{margin:0}.tp-eye{margin-top:8px}

/* ===== v2.159.0 ฉบับที่ 1 (นิตยสารสำหรับผู้อ่าน) สีจาก gib.css (--g-*) ===== */
.gx-mast{padding:clamp(28px,5vw,56px) 0 0;text-align:center}
.gx-mast .shell{border-top:2px solid var(--g-ink);border-bottom:1px solid var(--g-line2);padding:14px 0 12px}
.gx-name{margin:0;font:400 clamp(34px,6vw,64px)/1.05 var(--g-display);letter-spacing:-.01em;color:var(--g-ink)}
.gx-issue{margin:6px 0 0;font:600 .78rem/1.3 var(--g-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--g-ink3)}
:lang(th) .gx-issue{letter-spacing:.02em;font-size:.95rem;font-weight:500}
.gx-cover{padding:clamp(24px,4vw,48px) 0}
.gx-cover-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.gx-cover-img{margin:0;border-radius:var(--g-r);overflow:hidden;aspect-ratio:16/10;background:var(--g-soft)}
.gx-cover-img img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.gx-cat{margin:0 0 10px;font:600 .78rem/1.3 var(--g-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--g-gold-d)}
:lang(th) .gx-cat{letter-spacing:.02em;font-size:.95rem;font-weight:500}
.gx-cover h1{margin:0 0 14px;font:400 clamp(40px,6vw,72px)/1.02 var(--g-display);color:var(--g-ink);display:flex;flex-direction:column;gap:10px}
:lang(th) .gx-cover h1{font-weight:600;line-height:1.25}
.gx-cover h1 small{font:500 clamp(17px,1.6vw,21px)/1.4 var(--g-ui);color:var(--g-ink2)}
.gx-dek{margin:0 0 16px;font-size:clamp(16px,1.3vw,18px);color:var(--g-ink2)}
.gx-by{margin:0 0 10px;font:600 .9rem var(--g-ui);color:var(--g-ink)}
.gx-insp{margin:0}.gx-insp a{display:inline-block;padding:3px 12px;border-radius:999px;border:1px solid var(--g-line2);font:600 .8rem var(--g-ui);color:var(--g-ink2);text-decoration:none}
.gx-insp a:hover{border-color:var(--g-ink);color:var(--g-ink)}
@media (max-width:900px){.gx-cover-in{grid-template-columns:1fr}}
.gx-body{max-width:720px;padding-bottom:clamp(32px,5vw,56px)}
.gx-body h2{margin:clamp(36px,5vw,56px) 0 16px;font:400 clamp(24px,2.6vw,32px)/1.2 var(--g-display);color:var(--g-ink)}
:lang(th) .gx-body h2{font-weight:600;line-height:1.4}
.gx-body h2::before{content:"";display:block;width:36px;height:3px;background:var(--g-gold);margin-bottom:14px}
.q{margin:0 0 16px;font-size:clamp(16px,1.2vw,18px);line-height:1.75;color:var(--g-ink)}
.q b{display:inline-block;min-width:4.2em;margin-right:6px;font:700 .8rem/1 var(--g-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--g-gold-d);vertical-align:.12em}
:lang(th) .q b{letter-spacing:0;font-size:.92rem;text-transform:none}
.gx-fig{margin:24px 0 28px;border-radius:var(--g-r);overflow:hidden;background:var(--g-soft)}
.gx-fig img{width:100%;height:auto;display:block}
@media (min-width:1000px){.gx-fig{margin-left:-120px;margin-right:-120px}}
.rx{display:flex;align-items:center;gap:16px;margin:8px 0 28px;padding:14px 18px 14px 12px;border-radius:var(--g-r);background:var(--g-soft);border:1px solid var(--g-line)}
.rx p{margin:0;font-size:15px;line-height:1.6;color:var(--g-ink2)}
.rx b{color:var(--g-ink);font-family:var(--g-ui)}
.rx-t{flex:none;width:84px;height:84px;background:0 0/400% 100% no-repeat;animation:rxA .9s steps(4) infinite}
.rx-t.still{background-size:100% 100%;animation:none}
@keyframes rxA{to{background-position:133.33% 0}}
@media (prefers-reduced-motion:reduce){.rx-t{animation:none}}
.gx-spec{margin:clamp(36px,5vw,56px) 0 0;padding:clamp(20px,3vw,28px);border-radius:var(--g-r);border:1px solid var(--g-line2)}
.gx-spec h2{margin-top:0}
.gx-spec dl{margin:0 0 18px;display:grid;gap:0}
.gx-spec dl div{display:grid;grid-template-columns:minmax(110px,32%) 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--g-line)}
.gx-spec dt{font:600 .85rem var(--g-ui);color:var(--g-ink3)}
.gx-spec dd{margin:0;color:var(--g-ink)}
.gx-spec .q{margin:0}
.gx-disc{margin:36px 0 0;padding-top:16px;border-top:1px solid var(--g-line);font-size:14px;line-height:1.6;color:var(--g-ink3)}
.gx-more{padding:clamp(24px,4vw,48px) 0 clamp(40px,6vw,72px);border-top:1px solid var(--g-line)}
.gx-read{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);border-radius:var(--g-r);overflow:hidden;border:1px solid var(--g-line);text-decoration:none;color:var(--g-ink);background:var(--g-bg)}
.gx-read:hover{border-color:var(--g-ink)}
.gx-read-img{min-height:200px;background:var(--g-soft) center/cover no-repeat}
.gx-read-tx{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(18px,3vw,32px)}
.gx-read-tx small{font:600 .78rem var(--g-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--g-ink3)}
.gx-read-tx b{font:400 clamp(24px,2.4vw,32px)/1.2 var(--g-display)}:lang(th) .gx-read-tx b{font-weight:600}
.gx-read-tx span{color:var(--g-ink3);font-size:14px}
.gx-btn{align-self:flex-start;margin-top:10px;font-style:normal;padding:12px 20px;border-radius:var(--g-r-sm);background:var(--g-gold);color:var(--g-on-gold);font:700 .85rem/1 var(--g-ui);letter-spacing:.04em;text-transform:uppercase}
@media (max-width:700px){.gx-read{grid-template-columns:1fr}.gx-read-img{aspect-ratio:16/9;min-height:0}}
.gx-next-h{margin:clamp(32px,5vw,48px) 0 14px;font:600 .78rem var(--g-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--g-ink3)}
.gx-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gx-n{padding:18px 20px;border-radius:var(--g-r);background:var(--g-soft);display:flex;flex-direction:column;gap:6px}
.gx-n small{font:600 .78rem var(--g-ui);color:var(--g-ink3)}
.gx-n b{font:400 clamp(18px,1.6vw,22px)/1.3 var(--g-display);color:var(--g-ink2)}:lang(th) .gx-n b{font-weight:600}
@media (max-width:600px){.gx-next{grid-template-columns:1fr}}
.gx-brand{margin:28px 0 0;font-size:14px;color:var(--g-ink3)}.gx-brand a{color:var(--g-ink);font-weight:600}