/* art.css: รวมจาก art-tokens, art-base, art-sections, art-workspace, art-finish (ตามลำดับ) */ /* ===== (จาก art-tokens.css) ===== */ /* ========================================================= art/tokens.css: ตัวแปรของ Vellum Art Direction (ฉบับ "The Annotated Page") โหลดต่อจาก themes.css ไม่แก้กฎใดของไฟล์อื่น มีแต่ตัวแปร ========================================================= */ :root{ /* สี: charcoal → graphite → paper → silver */ --ink:#0c0c0d; --graphite-1:#141415; --graphite-2:#1b1b1d; --graphite-3:#2a2a2d; --graphite-4:#47474c; --paper:#ece9e2; --paper-dim:#bcb9b2; --silver:#b8bbc1; --silver-hi:#d9dbdf; --hair:rgba(236,233,226,.12); --hair-strong:rgba(236,233,226,.24); /* ตัวอักษร: เซอริฟ Latin ตามด้วยเซอริฟไทย (เบราว์เซอร์เลือกฟอนต์ตามตัวอักษรที่ใช้) ห้ามใส่ letter-spacing กับภาษาไทย */ --font-display:'Newsreader','Taviraj','Sarabun',Georgia,serif; --font-body:'Prompt','Sarabun',system-ui,sans-serif; --font-mono:'IBM Plex Mono','Prompt',ui-monospace,'SFMono-Regular',Menlo,monospace; /* ขนาดตัวอักษรแสดงผล */ --t-hero:clamp(3.1rem,11.5vw,10.5rem); --t-display:clamp(2.2rem,6.4vw,5.4rem); --t-title:clamp(1.5rem,3.2vw,2.4rem); --t-meta:.72rem; /* ระยะ */ --gutter:clamp(20px,5vw,72px); --section-y:clamp(72px,13vh,168px); /* การเคลื่อนไหว: ใช้ชุดเดียวทั้งเว็บ */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-soft:cubic-bezier(.22,.61,.36,1); --dur-1:160ms; --dur-2:320ms; --dur-3:640ms; --dur-4:1100ms; --stagger:70ms; } /* ===== (จาก art-base.css) ===== */ /* ========================================================= art/base.css: ชั้นสไตล์ Vellum "The Annotated Page" - โหลดเป็นไฟล์สุดท้ายใน ทุกกฎขึ้นต้นด้วย html.vc-art (class นี้ถูกเติมโดยสคริปต์สั้น ๆ ใน ถ้าไม่ต้องการให้ลบ class ออกได้) - ขั้น 1: พื้นหลังเรียบ เกรนฟิล์ม ฟอนต์ ลดอนิเมชันวนซ้ำที่เป็นของตกแต่ง และโครงโหมดลดการเคลื่อนไหว ขั้นถัดไปจะเพิ่มส่วนอื่นในไฟล์นี้ ดัชนี 1. พื้นหลังและเกรน 2. ตัวอักษร 3. โฟกัสและการเลือกข้อความ 4. ลดของตกแต่งที่วนซ้ำ 5. การเปิดเผยตอนเลื่อน ([data-reveal]) 6. โหมดลดการเคลื่อนไหว ========================================================= */ /* ---------- 1. พื้นหลังและเกรน ---------- */ html.vc-art body{ background:var(--bg); --ff:var(--font-body); } html.vc-art body::before{display:none} /* แสงทองที่มุมบนของมือถือ */ html.vc-art .site-header{background:rgba(12,12,13,.9);border-bottom-color:var(--hair)} /* เกรนฟิล์มบาง ๆ (ภาพเดียว ไม่เคลื่อนไหว ไม่รับการแตะ) */ html.vc-art body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); background-size:220px 220px; } /* ---------- 2. ตัวอักษร ---------- */ html.vc-art h1, html.vc-art h2, html.vc-art .rpt-title{ --ff:var(--font-display); font-weight:500; letter-spacing:0; } html.vc-art .hero h1{color:var(--paper);text-shadow:none} /* ป้ายกำกับเล็กแบบเอกสาร ใช้ฟอนต์ mono */ html.vc-art .rpt-kicker, html.vc-art .hr-no, html.vc-art .ph-eyebrow, html.vc-art .wallet-kicker, html.vc-art .dx-pill{ --ff:var(--font-mono); font-weight:500; } /* ---------- 3. โฟกัสและการเลือกข้อความ ---------- */ html.vc-art ::selection{background:var(--paper);color:var(--ink)} html.vc-art :focus-visible{outline:2px solid var(--silver-hi);outline-offset:3px} /* ---------- 4. ลดของตกแต่งที่วนซ้ำ (ตัวโหลดและโครงรอข้อมูลยังคงอยู่) ---------- */ html.vc-art body.auth-open #authLoggedIn .cred-card .wallet-total::before, html.vc-art body.auth-open #authLoggedIn .cred-card .wallet-total::after, html.vc-art body.auth-open #authLoggedIn .cred-card .wt-fx::before, html.vc-art body.auth-open #authLoggedIn .cred-card .wt-fx::after, html.vc-art body.auth-open #authLoggedIn .cred-card .ws-check::after, html.vc-art body.auth-open #authLoggedIn .cred-card .ws-voice::after, html.vc-art body.auth-open #authLoggedIn .cred-card .wallet-total .wallet-topup, html.vc-art body.auth-open .wallet::before, html.vc-art .lib-head::before, html.vc-art .lib-stat::before, html.vc-art .pay-hub::before{ animation:none; } /* ไอคอนสติกเกอร์: เอาการลอยและประกายที่วนซ้ำออก (ผู้ใช้ยังเปิด "โหมดสงบ" ของเดิมได้ตามปกติ) */ html.vc-art .ct-ico svg, html.vc-art .acct-sticker, html.vc-art .cs-ico svg, html.vc-art .cs-r-ico svg, html.vc-art .pkg-ic svg, html.vc-art .pay-head-ic svg, html.vc-art .menu-ico svg, html.vc-art .ct-ico::after, html.vc-art .cs-ico::after, html.vc-art .cs-r-ico::after, html.vc-art .pkg-ic::after, html.vc-art .pay-head-ic::after, html.vc-art .menu-ico::after, html.vc-art svg [class*="st-"]{ animation:none !important; } /* ---------- 5. การเปิดเผยตอนเลื่อน ---------- ซ่อนองค์ประกอบเฉพาะเมื่อ motion.js ยืนยันว่าเล่นอนิเมชันได้ (class vc-motion) ถ้า JS ไม่ทำงานหรือผู้ใช้ลดการเคลื่อนไหว เนื้อหาจะเห็นครบเสมอ */ html.vc-art.vc-motion [data-reveal]{ opacity:0; transform:translate3d(0,18px,0); transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out); transition-delay:calc(var(--i,0) * var(--stagger)); } html.vc-art.vc-motion [data-reveal].is-in{opacity:1;transform:none} /* เปิดเผยทีละบรรทัด (motion.js ห่อแต่ละบรรทัดด้วย .vc-line > span) */ html.vc-art .vc-line{display:block;overflow:hidden} html.vc-art.vc-motion .vc-line > span{ display:block; transform:translate3d(0,110%,0); transition:transform var(--dur-4) var(--ease-out); transition-delay:calc(var(--i,0) * var(--stagger)); } html.vc-art.vc-motion .is-in .vc-line > span{transform:none} /* ---------- 6. โหมดลดการเคลื่อนไหว ---------- ครอบทั้งกรณีระบบตั้งค่าไว้ และกรณี motion.js ตั้ง data-motion="reduced" */ @media (prefers-reduced-motion:reduce){ html.vc-art *,html.vc-art *::before,html.vc-art *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; } } html.vc-art[data-motion="reduced"] *, html.vc-art[data-motion="reduced"] *::before, html.vc-art[data-motion="reduced"] *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; } /* ตัวหมุนตอนกำลังตรวจเป็นการเคลื่อนไหวที่จำเป็น (บอกว่าระบบยังทำงาน) จึงยังหมุนช้า ๆ ในโหมดลดการเคลื่อนไหว */ @media (prefers-reduced-motion:reduce){ html.vc-art #checkBtn.is-busy::after{animation:vcSpin 1.6s linear infinite !important} } html.vc-art[data-motion="reduced"] #checkBtn.is-busy::after{animation:vcSpin 1.6s linear infinite !important} /* ===== (จาก art-sections.css) ===== */ /* ========================================================= art/sections.css: ขั้น 2 ของ Vellum "The Annotated Page" หน้าแรก · ฉากอ่านสัญญา (ตรึงจอตอนเลื่อน) · สามขั้น · แผ่นคลิป · โครงกริดของหน้า - โหลดต่อจาก art/base.css ทุกกฎขึ้นต้น html.vc-art - สถานะเริ่มต้นที่ซ่อนหรือเลื่อนอยู่ จะมีผลเมื่อ html มี class vc-motion เท่านั้น (motion.js เติมเมื่อเล่นอนิเมชันได้) ถ้า JS ล้มหรือผู้ใช้ลดการเคลื่อนไหว จะเห็นเนื้อหาสภาพสุดท้ายครบ ดัชนี 0. ตัวแปรและกรอบหน้า 1. Header 2. ป้ายและหัวข้อร่วม 3. หน้าแรก (.hero) 4. ฉากอ่านสัญญา (.mf) 5. สามขั้น (.ch) 6. แผ่นคลิป (#introVideo) 7. หัวพื้นที่ทำงาน (.desk-head) 8. กริดของหน้า (≥1024px) ========================================================= */ /* ---------- 0. ตัวแปรและกรอบหน้า ---------- */ html.vc-art{--art-head:56px;--content-max:1360px} @media (min-width:1024px){ html.vc-art{--art-head:64px} } /* overflow-x:hidden ที่เดิมใช้ทำให้ position:sticky พัง (ตัวเลื่อนย้ายไปที่ body) ใช้ clip แทน */ html.vc-art, html.vc-art body{overflow-x:clip} html.vc-art main{max-width:none;width:100%;margin:0;padding:0} html.vc-art .mono{--ff:var(--font-mono);letter-spacing:.04em} html.vc-art .dx-hero-video{display:none !important} /* วิดีโอ hero เก่า (ไฟล์ hero-video.mp4 ไม่ได้อยู่ในรีโป) */ /* ---------- 1. Header ---------- */ html.vc-art .brand-name{color:var(--paper);letter-spacing:.22em} html.vc-art .dx-nav a{border-radius:0;color:var(--muted);padding:8px 14px} html.vc-art .dx-nav a:hover{background:transparent;color:var(--paper)} html.vc-art .dx-nav a:last-child{ background:var(--paper);color:var(--ink);border-radius:2px;margin-left:8px;padding:8px 18px; } html.vc-art .dx-nav a:last-child:hover{background:var(--silver-hi);color:var(--ink)} /* ---------- 2. ป้ายและหัวข้อร่วม ---------- */ html.vc-art :is(.mf,.ch,.vc-embed,.desk-head){text-align:left} /* style.css มีกฎ header{...} ทั่วไป (กลางหน้า มีเส้นล่าง) ต้องล้างจากหัวส่วนใหม่ */ html.vc-art :is(.film-head,.ch-head){text-align:left;padding:0;background:none;border:0} html.vc-art .sec-label{ margin:0 0 22px; font-size:.74rem; color:var(--silver); display:flex;align-items:center;gap:14px; } html.vc-art .sec-label::after{content:"";flex:0 0 clamp(40px,8vw,120px);height:1px;background:var(--hair-strong)} html.vc-art :is(.mf-title,.ch-head h2,.film-head h2,.desk-head h2){ display:block; margin:0; --ff:var(--font-display); font-weight:400; font-size:var(--t-display); line-height:1.22; color:var(--paper); } html.vc-art :is(.mf-title,.ch-head h2,.film-head h2,.desk-head h2)::before{display:none} /* ---------- 3. หน้าแรก ---------- */ html.vc-art main > .hero{ position:relative; isolation:isolate; overflow:hidden; width:auto; margin:0; min-height:calc(100svh - var(--art-head)); height:auto; max-height:none; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; text-align:left; padding:clamp(18px,3vh,32px) var(--gutter) clamp(20px,4vh,40px); background:var(--bg); } html.vc-art .hero::before{display:none} html.vc-art .hero::after{ content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px; background:var(--hair); } html.vc-art .hero-meta{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--hair); --ff:var(--font-mono); font-size:.68rem; color:var(--muted); text-transform:uppercase; } html.vc-art .hero-meta span:first-child{letter-spacing:.18em} html.vc-art .hero-meta i{font-style:normal;color:var(--silver);margin-left:10px} html.vc-art .hero-main{ flex:1; display:grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:clamp(36px,6vh,64px); padding:clamp(32px,7vh,88px) 0; } html.vc-art .hero-copy{min-width:0} html.vc-art .hero .dx-pill[hidden]{ display:block !important;margin:0 0 22px;padding:0;border:0;background:none; -webkit-backdrop-filter:none;backdrop-filter:none; --ff:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.2em;color:var(--silver); } html.vc-art .hero-title{ margin:0; --ff:var(--font-display); font-weight:400; font-size:clamp(3.4rem,15vw,5.6rem); line-height:1.3; letter-spacing:0; color:var(--paper); background:none; -webkit-text-fill-color:currentColor; text-shadow:none; } html.vc-art .ht-l{display:block} html.vc-art .ht-l2{position:relative;width:fit-content;color:var(--silver);font-weight:300} html.vc-art .ht-l2::after{ content:"";position:absolute;left:0;right:0;bottom:.08em;height:2px;background:var(--paper); transform-origin:left center; } html.vc-art .vc-word{padding:.1em 0 .16em;margin:-.1em 0 -.16em} html.vc-art .hero-lead{ max-width:32em;margin:clamp(20px,3vh,32px) 0 0; font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.85;color:var(--paper-dim); } html.vc-art .hero .dx-cta-row[hidden]{ display:flex !important;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin-top:clamp(24px,4vh,36px); } html.vc-art .dx-cta, html.vc-art .dx-cta-ghost{ display:inline-block;padding:15px 26px;border-radius:2px;font-size:.98rem;font-weight:600;text-decoration:none; -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none; } html.vc-art .dx-cta{background:var(--paper);color:var(--ink);border:1px solid var(--paper)} html.vc-art .dx-cta:hover{background:var(--silver-hi);border-color:var(--silver-hi)} html.vc-art .dx-cta-ghost{background:transparent;color:var(--paper);border:1px solid var(--hair-strong)} html.vc-art .dx-cta-ghost:hover{border-color:var(--paper);color:var(--paper)} html.vc-art .hero .dx-points[hidden]{ display:flex !important;flex-wrap:wrap;justify-content:flex-start;gap:8px 36px; margin:0;padding:16px 0 0;border-top:1px solid var(--hair);list-style:none; } html.vc-art .dx-points li{padding-left:28px;font-size:.8rem;color:var(--muted)} html.vc-art .dx-points li::before{ left:0;top:.8em;width:18px;height:1px;border:0;background:var(--silver);transform:none; } html.vc-art .hero-cue{ align-self:flex-end;margin-top:18px;display:flex;align-items:center;gap:12px; font-size:.7rem;color:var(--muted);text-decoration:none; } html.vc-art .hero-cue:hover{color:var(--paper)} html.vc-art .hero-cue i{display:block;width:44px;height:1px;background:currentColor} html.vc-art .hero-art{display:none} /* ชิ้นส่วนต้นฉบับสัญญาในหน้าแรก (ตัวอย่างประกอบ) */ html.vc-art .hero-frag{margin:0;width:min(100%,460px);justify-self:start;translate:0 calc(var(--p,0) * -48px)} html.vc-art .hero-frag figcaption{margin-bottom:12px;font-size:.66rem;color:var(--muted);text-transform:uppercase} html.vc-art .frag-page{ position:relative;padding:26px 28px 24px;border-radius:2px; background:var(--paper);color:#19191b; box-shadow:0 40px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05); rotate:-1deg; } html.vc-art .frag-h{color:#19191b;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(12,12,13,.22);--ff:var(--font-display);font-weight:600;font-size:1.12rem} html.vc-art .fl{margin:0 0 10px;font-size:.92rem;line-height:1.75;color:#19191b} html.vc-art .fl:last-child{margin-bottom:0} html.vc-art .note{ display:inline-block;margin:0 0 0 8px;padding:0 7px;border:1px solid currentColor;border-radius:2px; --ff:var(--font-mono);font-size:.62rem;font-weight:500;line-height:1.7;vertical-align:.08em;white-space:nowrap; } html.vc-art .fl-mid .note,html.vc-art .cl-mid .note{color:#85610f} html.vc-art .fl-high .note,html.vc-art .cl-high .note{color:#9a2f2b} html.vc-art .cl-low .note{color:#3d6684} /* เส้นใต้ที่ถูกลากด้วยหมึก และแถบปกปิด (ใช้ร่วมกันทั้งหน้าแรกและฉากอ่านสัญญา) */ html.vc-art .mk{ background-image:linear-gradient(var(--mkc,currentColor),var(--mkc,currentColor)); background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px; padding-bottom:1px; } html.vc-art .fl-mid{--mkc:#b38a35} html.vc-art .fl-high{--mkc:#b4524f} html.vc-art .rd{position:relative;display:inline-block} html.vc-art .rd::after{ content:"";position:absolute;left:-.14em;right:-.14em;top:.16em;bottom:.04em; background:var(--ink);transform-origin:left center;transform:scaleX(var(--rt,1)); } /* จังหวะเล่นตอนเปิดหน้า */ html.vc-art.vc-motion .hero-frag .mk{background-size:0 2px;transition:background-size 1.1s var(--ease-out) var(--d,1.3s)} html.vc-art.vc-motion .hero-frag .fl-high .mk{--d:1.9s} html.vc-art.vc-motion .hero-frag.is-in .mk{background-size:100% 2px} html.vc-art.vc-motion .hero-frag .rd{--rt:0} html.vc-art.vc-motion .hero-frag .rd::after{transition:transform .9s var(--ease-in-out) .9s} html.vc-art.vc-motion .hero-frag.is-in .rd::after{transform:scaleX(1)} html.vc-art.vc-motion .ht-l2::after{transform:scaleX(0);transition:transform 1.2s var(--ease-out) 1s} html.vc-art.vc-motion .ht-l2.is-in::after{transform:scaleX(1)} html.vc-art.vc-motion .hero-title{translate:0 calc(var(--p,0) * -22px)} @media (min-width:1024px){ html.vc-art .hero-main{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(40px,6vw,104px)} html.vc-art .hero-title{font-size:clamp(4.6rem,8.4vw,9rem)} html.vc-art .hero-frag{justify-self:end} } /* ---------- 4. ฉากอ่านสัญญา (ตรึงจอ) ---------- */ html.vc-art .mf{position:relative;height:340vh;border-top:1px solid var(--hair);background:var(--bg)} html.vc-art.vc-motion .mf{--p:0} html.vc-art:not(.vc-motion) .mf{--p:1;height:auto} html.vc-art .mf-pin{ position:sticky;top:var(--art-head); height:calc(100svh - var(--art-head)); display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr); align-items:center;align-content:center; gap:clamp(14px,3vh,28px); padding:clamp(16px,3vh,32px) var(--gutter); overflow:hidden; } html.vc-art:not(.vc-motion) .mf-pin{position:static;height:auto;padding-block:var(--section-y);gap:40px} html.vc-art .mf-title{font-size:clamp(1.8rem,7vw,2.6rem)} html.vc-art .mf-steps{list-style:none;margin:clamp(12px,2.4vh,28px) 0 0;padding:0;display:grid} html.vc-art .mf-steps li{margin:0 0 18px} html.vc-art .mf-steps b{display:block;margin-bottom:6px;font-size:1rem;font-weight:600;color:var(--paper)} html.vc-art .mf-steps span{display:block;font-size:.88rem;line-height:1.7;color:var(--paper-dim);max-width:30em} html.vc-art.vc-motion .mf-steps li{ grid-area:1/1;margin:0; --in:clamp(0,calc((var(--p) - var(--a)) / .05),1); --out:clamp(0,calc((var(--b) - var(--p)) / .05),1); opacity:min(var(--in),var(--out)); translate:0 calc((1 - var(--in)) * 14px); } html.vc-art .mf-stage{min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:center;width:100%} html.vc-art .mf-doc{ width:min(100%,600px); padding:clamp(18px,3vw,40px); background:var(--paper);color:#19191b;border-radius:2px; box-shadow:0 50px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05); translate:0 calc((.5 - var(--p)) * 36px); } html.vc-art .mf-doc p{margin:0 0 10px;font-size:clamp(.8rem,2.5vw,.96rem);line-height:1.8} html.vc-art .mf-doc p:last-child{margin-bottom:0} html.vc-art .mf-tag{margin:0 0 8px;font-size:.62rem;color:rgba(25,25,27,.55);text-transform:uppercase} html.vc-art .mf-dh{--ff:var(--font-display);font-weight:600;font-size:clamp(1rem,3vw,1.2rem) !important;padding-bottom:8px;border-bottom:1px solid rgba(12,12,13,.22)} /* ค่าความคืบหน้าของแต่ละชิ้น: --a = จุดเริ่ม (0..1) กว้าง .07–.08 ของการเลื่อน */ html.vc-art .mf-doc .rd{--rt:clamp(0,calc((var(--p) - var(--a)) / .07),1)} html.vc-art .mf-doc .cl{--t:clamp(0,calc((var(--p) - var(--a)) / .08),1)} html.vc-art .mf-doc .cl .mk{background-size:calc(var(--t) * 100%) 2px} html.vc-art .mf-doc .cl-mid{--mkc:#b38a35} html.vc-art .mf-doc .cl-high{--mkc:#b4524f} html.vc-art .mf-doc .cl-low{--mkc:#5a88a6} html.vc-art .mf-doc .cl .note{opacity:var(--t)} html.vc-art .mf-tally{ display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0;font-size:.68rem;color:var(--paper-dim); opacity:clamp(0,calc((var(--p) - .78) / .08),1); } html.vc-art .mf-tally span{white-space:nowrap} @media (min-width:1024px){ html.vc-art .mf-pin{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:none;gap:clamp(32px,6vw,104px);align-content:center} html.vc-art .mf-title{font-size:clamp(2.2rem,3.8vw,3.6rem)} html.vc-art .mf-steps span{font-size:.98rem} html.vc-art .mf-stage{align-items:flex-end} html.vc-art .mf-doc{rotate:.8deg} } /* ---------- 5. สามขั้น ---------- */ html.vc-art .ch{padding:var(--section-y) var(--gutter);border-top:1px solid var(--hair);background:var(--bg)} html.vc-art .ch-list{list-style:none;margin:clamp(40px,8vh,96px) 0 0;padding:0;display:grid;gap:clamp(28px,6vh,64px)} html.vc-art .ch-item{ display:grid;grid-template-columns:minmax(0,1fr);gap:14px; padding-top:26px;border-top:1px solid var(--hair-strong);align-items:start; } html.vc-art .ch-n{ --ff:var(--font-display);font-weight:300;font-size:clamp(3.6rem,18vw,5.6rem);line-height:.9; color:transparent;-webkit-text-stroke:1px var(--silver); } html.vc-art .ch-body h3{ margin:0 0 12px;--ff:var(--font-display);font-weight:500;font-size:clamp(1.8rem,6vw,2.7rem);line-height:1.25;color:var(--paper); } html.vc-art .ch-body p{margin:0;max-width:36em;font-size:.98rem;line-height:1.9;color:var(--paper-dim)} html.vc-art .ch-tag{ justify-self:start;padding:5px 10px;border:1px solid var(--hair-strong);border-radius:2px; font-size:.64rem;letter-spacing:.18em;color:var(--silver); } html.vc-art .ch-foot{margin:clamp(48px,9vh,96px) 0 0;padding-top:18px;border-top:1px solid var(--hair);font-size:.72rem;color:var(--muted)} @media (min-width:1024px){ html.vc-art .ch-item{grid-template-columns:minmax(120px,.5fr) minmax(0,3fr) auto;gap:clamp(24px,4vw,64px)} html.vc-art .ch-item:nth-child(2){margin-left:10%} html.vc-art .ch-item:nth-child(3){margin-left:20%} html.vc-art .ch-n{font-size:clamp(4.4rem,9vw,8rem)} } /* ---------- 6. แผ่นคลิป (#introVideo) ---------- */ html.vc-art main > .vc-embed{ width:100%;margin:0;padding:var(--section-y) var(--gutter);border-top:1px solid var(--hair);background:var(--bg); } html.vc-art .film-head{margin:0 0 clamp(28px,5vh,56px)} html.vc-art .film-meta{margin:18px 0 0;font-size:.72rem;color:var(--muted)} html.vc-art .vc-embed .vc-frame{ width:100%;max-width:1040px;margin:0 auto; border:1px solid var(--hair-strong) !important;border-radius:0 !important;box-shadow:none;background:#050506; filter:grayscale(.85) contrast(1.05); /* ชั่วคราวจนกว่าจะปรับสีคลิปในขั้น 6 */ } /* คลิปไม่มีเสียง (จอ ≥1024px เท่านั้น: silent-clip.js สร้าง iframe ในช่องนี้) */ html.vc-art .film-silent{display:none;width:100%;max-width:1040px;margin:clamp(28px,5vh,56px) auto 0} @media (min-width:1024px){ html.vc-art .film-silent{display:block} } html.vc-art .film-silent > .mono{margin:0 0 10px;font-size:.68rem;color:var(--muted)} html.vc-art .film-silent .vs-embed{margin:0} html.vc-art .film-silent .vs-frame{ display:block;width:100%;height:auto;min-height:0;aspect-ratio:16/9; border:1px solid var(--hair-strong);filter:grayscale(1) contrast(1.05);opacity:.9; } /* ---------- 7. หัวพื้นที่ทำงาน ---------- */ html.vc-art .desk-head{padding:var(--section-y) var(--gutter) clamp(24px,5vh,56px);border-top:1px solid var(--hair);background:var(--bg)} /* ---------- 8. กริดของหน้า (≥1024px) ---------- คอลัมน์ข้าง ๆ คือขอบกว้างของหน้า ส่วนกลางคือพื้นที่เนื้อหา ส่วนเต็มจอ (hero, ฉาก, สามขั้น, คลิป) ครอบทุกคอลัมน์ */ @media (min-width:1024px){ html.vc-art main{ display:grid; grid-template-columns:minmax(var(--gutter),1fr) minmax(0,calc(var(--content-max) / 2)) minmax(0,calc(var(--content-max) / 2)) minmax(var(--gutter),1fr); grid-template-areas: "hero hero hero hero" "mf mf mf mf" "ch ch ch ch" "video video video video" ". deskhead deskhead ." ". auth auth ." ". input result ." ". pay pay ."; column-gap:0;row-gap:0;align-items:start; } html.vc-art main > .hero{grid-area:hero} html.vc-art main > .mf{grid-area:mf} html.vc-art main > .ch{grid-area:ch} html.vc-art main > #introVideo{grid-area:video;width:100%;justify-self:stretch} html.vc-art main > .desk-head{grid-area:deskhead;padding-left:0;padding-right:0;border-top:0} html.vc-art main > #authCard{grid-area:auth} html.vc-art main > #checkCard{grid-area:input} html.vc-art main > #resultCard{grid-area:result} html.vc-art main > #paymentCard{grid-area:pay} } @media (min-width:1280px){ html.vc-art main{ grid-template-columns:minmax(var(--gutter),1fr) minmax(0,320px) minmax(0,calc((var(--content-max) - 320px) * .56)) minmax(0,calc((var(--content-max) - 320px) * .44)) minmax(var(--gutter),1fr); grid-template-areas: "hero hero hero hero hero" "mf mf mf mf mf" "ch ch ch ch ch" "video video video video video" ". deskhead deskhead deskhead ." ". auth input result ." ". pay pay pay ."; } } /* ===== (จาก art-workspace.css) ===== */ /* ========================================================= art/workspace.css: ขั้น 3 ของ Vellum "The Annotated Page" — "โต๊ะอ่านสัญญา" บัญชีและเครดิต · เลือกประเภทและวางสัญญา · Privacy Shield · ปุ่ม · ช่องผลตรวจ (ส่วนหัว) - โหลดต่อจาก art/sections.css ทุกกฎขึ้นต้น html.vc-art - ไม่แตะ id / ปุ่ม / JS ใด ๆ เปลี่ยนเฉพาะหน้าตา แผนบัญชีมือถือ แถบล่าง และแผนเลือกประเภทยังทำงานเดิม - รายงานผลตรวจ (.rpt) จะจัดใหม่ในขั้น 4 ดัชนี 1. การ์ดและคอลัมน์ 2. หัวข้อ 3. ช่องกรอกและปุ่ม 4. ช่องวางสัญญา (กระดาษ) 5. Privacy Shield 6. บัญชีและเครดิต 7. ไอคอน 8. ช่องผลตรวจ (ว่าง) ========================================================= */ /* ---------- 1. การ์ดและคอลัมน์ ---------- */ html.vc-art main > .card{ background:transparent; border:0; border-radius:0; box-shadow:none; } @media (min-width:1024px){ html.vc-art main > #authCard, html.vc-art main > #checkCard, html.vc-art main > #resultCard{ margin:0; padding:28px clamp(20px,2vw,36px) 56px; border-top:1px solid var(--hair-strong); border-left:1px solid var(--hair); } html.vc-art main > #authCard{border-left:0;padding-left:0} html.vc-art main > #resultCard{padding-right:0} html.vc-art main > #paymentCard{margin:0} } html.vc-art .step-sub{border-top:1px solid var(--hair);margin-top:32px;padding-top:24px} html.vc-art .step-sub h3{--ff:var(--font-display);font-weight:500;font-size:1.2rem;margin:0 0 14px;color:var(--paper)} /* ---------- 2. หัวข้อ ---------- */ html.vc-art :is(#authCard,#checkCard,#resultCard) > h2, html.vc-art :is(#authCard,#checkCard,#resultCard) .step-head h2{ display:block; margin:0 0 22px; --ff:var(--font-display); font-weight:500; font-size:1.35rem; line-height:1.4; color:var(--paper); } html.vc-art :is(#authCard,#checkCard,#resultCard) h2::before{display:none} html.vc-art .field-label{--ff:var(--font-mono);font-size:.7rem;font-weight:500;color:var(--silver);letter-spacing:.04em} html.vc-art #authCard .sheet-head h2{--ff:var(--font-display);font-weight:500;font-size:1.05rem;white-space:nowrap} /* ---------- 3. ช่องกรอกและปุ่ม ---------- */ html.vc-art :is(#email,#password,.select-wrap select){ background:transparent; border:0; border-bottom:1px solid var(--hair-strong); border-radius:0; padding:14px 0; color:var(--paper); box-shadow:none; } html.vc-art .select-wrap select{padding-right:34px} html.vc-art :is(#email,#password,.select-wrap select):focus{border-bottom-color:var(--paper);box-shadow:none} html.vc-art .select-wrap::after{right:4px;border-color:var(--silver)} html.vc-art button.primary, html.vc-art #checkBtn.primary{ background:var(--paper);color:var(--ink); border:1px solid var(--paper);border-radius:2px; min-height:52px;box-shadow:none; } html.vc-art button.primary:hover:not(:disabled){background:var(--silver-hi);border-color:var(--silver-hi)} html.vc-art #checkBtn.primary:disabled{background:transparent;color:var(--muted);border-color:var(--hair-strong);opacity:1} html.vc-art button.ghost{background:transparent;color:var(--paper);border:1px solid var(--hair-strong);border-radius:2px;min-height:52px} html.vc-art button.ghost:hover:not(:disabled){border-color:var(--paper);color:var(--paper)} html.vc-art .google-btn{border-radius:2px;background:var(--paper);color:var(--ink)} html.vc-art .or-line{--ff:var(--font-mono);font-size:.7rem;color:var(--muted)} html.vc-art .sample-btn{ background:transparent;border:0;border-bottom:1px solid var(--hair-strong);border-radius:0; padding:6px 0;color:var(--silver);font-weight:500;font-size:.84rem; } html.vc-art .sample-btn:hover{color:var(--paper);border-bottom-color:var(--paper)} html.vc-art .ta-count{--ff:var(--font-mono);font-size:.7rem} html.vc-art .hint, html.vc-art .step-cost, html.vc-art .check-note{color:var(--muted)} html.vc-art .disclaimer{color:var(--muted);border-top:1px solid var(--hair);padding-top:14px;margin-top:20px;font-size:.82rem} html.vc-art .voice-opt{border-radius:0;border:0;border-bottom:1px solid var(--hair);background:transparent;padding-left:0;padding-right:0} /* ---------- 4. ช่องวางสัญญา: หน้ากระดาษเวลลัม ---------- */ html.vc-art #input{ min-height:clamp(280px,44vh,520px); padding:24px 26px; background-color:var(--paper); background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.8em - 1px),rgba(12,12,13,.08) calc(1.8em - 1px),rgba(12,12,13,.08) 1.8em); background-attachment:local; background-position:0 24px; color:#19191b; caret-color:#19191b; line-height:1.8; border:0; border-radius:2px; box-shadow:0 30px 60px -34px rgba(0,0,0,.9); } html.vc-art #input::placeholder{color:rgba(25,25,27,.45)} html.vc-art #input::selection{background:#19191b;color:var(--paper)} html.vc-art #input:focus{outline:none;box-shadow:0 0 0 2px var(--silver-hi),0 30px 60px -34px rgba(0,0,0,.9)} html.vc-art .ta-clear{background:rgba(12,12,13,.1);color:#19191b} html.vc-art .draft-bar{border-radius:0;border:0;border-left:2px solid var(--silver);background:var(--graphite-2)} /* ---------- 5. Privacy Shield: แถบปกปิด ---------- */ html.vc-art .ps{ background:transparent;border:0;border-radius:0;box-shadow:none; border-top:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong); padding:18px 0; } html.vc-art .ps-title b{--ff:var(--font-display);font-weight:500;font-size:1.12rem;color:var(--paper)} html.vc-art .ps-title b::after{ content:"";display:inline-block;width:2.6em;height:.5em;margin-left:.8em;background:var(--silver);opacity:.55;vertical-align:.1em; } html.vc-art .ps-title small{--ff:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} html.vc-art .ps-badge{ background:transparent;border:1px solid var(--hair-strong);border-radius:2px;color:var(--silver); --ff:var(--font-mono);font-size:.64rem;font-weight:500;box-shadow:none; } html.vc-art .ps-actions button{border-radius:2px;background:transparent;border:1px solid var(--hair-strong);color:var(--paper);box-shadow:none} html.vc-art .ps-preview{border-radius:0;background:var(--field);border:1px solid var(--hair)} /* ---------- 6. บัญชีและเครดิต ---------- */ html.vc-art #authLoggedIn{--a-green:var(--silver-hi);--a-blue:var(--silver-hi);--a-purple:var(--silver-hi);--a-orange:var(--silver-hi);--a-amber:var(--silver-hi)} html.vc-art #authLoggedIn#authLoggedIn .cred-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0} html.vc-art #authLoggedIn#authLoggedIn .cred-card::before, html.vc-art #authLoggedIn#authLoggedIn .cred-card::after, html.vc-art #authLoggedIn#authLoggedIn .wallet-total::before, html.vc-art #authLoggedIn#authLoggedIn .wallet-total::after, html.vc-art #authLoggedIn#authLoggedIn .wt-fx, html.vc-art #authLoggedIn#authLoggedIn .cred-line{display:none} html.vc-art #authLoggedIn#authLoggedIn .cred-head{display:block;margin:0 0 18px} html.vc-art #authLoggedIn#authLoggedIn .cred-title{margin:0;--ff:var(--font-display);font-weight:500;font-size:1.15rem;color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .cred-sub{margin:2px 0 0;font-size:.8rem;color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .cred-ico{display:none} html.vc-art #authLoggedIn#authLoggedIn .acct-row{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--hair)} html.vc-art #authLoggedIn#authLoggedIn .acct-avatar{ position:relative;flex:0 0 46px;width:46px;height:46px;padding:0;border-radius:50%; background:var(--graphite-2);border:1px solid var(--hair-strong);overflow:hidden;box-shadow:none; } html.vc-art #authLoggedIn#authLoggedIn .acct-avatar #acctInitial{display:grid;place-items:center;width:100%;height:100%;--ff:var(--font-display);font-size:1.2rem;color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .acct-avatar #acctPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} html.vc-art #authLoggedIn#authLoggedIn .acct-sticker{display:none} html.vc-art #authLoggedIn#authLoggedIn .acct-cam{display:none} html.vc-art #authLoggedIn#authLoggedIn .acct-info{min-width:0;display:block} html.vc-art #authLoggedIn#authLoggedIn .acct-label{display:block;--ff:var(--font-mono);font-size:.64rem;color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .acct-mail{display:block;font-weight:500;font-size:.9rem;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.vc-art #authLoggedIn#authLoggedIn .acct-check{display:none} html.vc-art #authLoggedIn#authLoggedIn .wallet-total{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin:0} html.vc-art #authLoggedIn#authLoggedIn .wallet-total-label{display:block;--ff:var(--font-mono);font-size:.66rem;color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .wallet-total-num{margin:6px 0 16px;color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .wallet-total-num b{--ff:var(--font-display);font-weight:300;font-size:clamp(3.4rem,6vw,4.6rem);line-height:1} html.vc-art #authLoggedIn#authLoggedIn .wallet-total-num small{font-size:.8rem;color:var(--muted);margin-left:6px} html.vc-art #authLoggedIn#authLoggedIn .wallet-rows{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair)} html.vc-art #authLoggedIn#authLoggedIn .ws{display:block;padding:12px 0;background:transparent;border:0;border-radius:0;box-shadow:none} html.vc-art #authLoggedIn#authLoggedIn .ws + .ws{border-left:1px solid var(--hair);padding-left:16px} html.vc-art #authLoggedIn#authLoggedIn .ws-ico{display:none} html.vc-art #authLoggedIn#authLoggedIn .ws-num{margin:0;--ff:var(--font-display);font-size:1.6rem;line-height:1.1;color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .ws-lab{margin:2px 0 0;font-size:.74rem;color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .wallet-quick{margin-top:14px} html.vc-art #authLoggedIn#authLoggedIn .wallet-topup{ background:var(--paper);color:var(--ink);border:1px solid var(--paper);border-radius:2px;box-shadow:none;animation:none; } html.vc-art #authLoggedIn#authLoggedIn .wallet-topup:hover{background:var(--silver-hi)} html.vc-art #authLoggedIn#authLoggedIn .wallet-quick .wallet-topup{width:100%;min-height:48px} html.vc-art #authLoggedIn#authLoggedIn .wallet{background:transparent;border:0;box-shadow:none;margin-top:24px} html.vc-art #authLoggedIn#authLoggedIn .wallet-list-title{--ff:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--silver);letter-spacing:.04em} html.vc-art #authLoggedIn#authLoggedIn .wallet-card{background:transparent;border:0;border-top:1px solid var(--hair);border-radius:0;box-shadow:none;padding:14px 0} html.vc-art #authLoggedIn#authLoggedIn .wallet-ico{display:none} html.vc-art #authLoggedIn#authLoggedIn .wallet-badge{background:transparent;border:1px solid var(--hair-strong);border-radius:2px;color:var(--silver);box-shadow:none} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-name b{font-weight:600;color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-name small{--ff:var(--font-mono);font-size:.62rem;color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-use{color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-num b{--ff:var(--font-display);font-weight:400;color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-bottom .wallet-topup{background:transparent;color:var(--paper);border:1px solid var(--hair-strong)} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-bottom .wallet-topup:hover{border-color:var(--paper);background:transparent} html.vc-art #authLoggedIn#authLoggedIn .menu-item, html.vc-art #authLoggedIn#authLoggedIn .acct-out, html.vc-art #authLoggedIn#authLoggedIn .wallet-histlink{ border-radius:0;background:transparent;border:0;border-top:1px solid var(--hair);box-shadow:none; } html.vc-art #authLoggedIn#authLoggedIn .menu-item b, html.vc-art #authLoggedIn#authLoggedIn .wallet-hist-txt b{color:var(--paper)} html.vc-art #authLoggedIn#authLoggedIn .acct-detail{background:transparent;border:0;border-top:1px solid var(--hair);border-radius:0} html.vc-art #authLoggedIn#authLoggedIn .wallet-total-label::after{display:none} /* ป้ายเรืองแสง "พร้อมใช้งาน" (มือถือ) */ /* บัตรเครดิตแยกประเภท: จัดแถวให้อ่านง่ายทั้งจอคอมและมือถือ */ html.vc-art #authLoggedIn#authLoggedIn .wallet-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-name{flex:1;min-width:0;display:block} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-name b, html.vc-art #authLoggedIn#authLoggedIn .wallet-card-name small{display:block} html.vc-art #authLoggedIn#authLoggedIn .wallet-badge{flex:none;padding:2px 8px;font-size:.66rem;line-height:1.7} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-use{margin:8px 0 0;font-size:.84rem} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-num{margin:0} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-num b{display:block;font-size:1.7rem;line-height:1.1} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-num small{display:block;font-size:.74rem;color:var(--muted)} html.vc-art #authLoggedIn#authLoggedIn .wallet-card-bottom .wallet-topup{width:auto;min-height:40px;padding:8px 16px} html.vc-art #authLoggedIn#authLoggedIn .wallet-total .wallet-topup, html.vc-art #authLoggedIn#authLoggedIn .wallet-quick .wallet-topup{background:var(--paper);color:var(--ink);box-shadow:none} /* ---------- 7. ไอคอนสติกเกอร์ที่ยังเหลือ: โทนเดียวกัน ---------- ไอคอนเดิมมีเส้นสีฟ้า เขียว ที่ฝังในตัว SVG ใช้ filter ให้เป็นเทาเงินทั้งหมดจนกว่าจะวาดชุดไอคอนใหม่ */ html.vc-art :is(.ct-ico,.cs-ico,.cs-r-ico,.menu-ico,.ps-ico,.pay-head-ic,.pkg-ic,.vault-badge,.ph-ico,.ld-ico,.ls-cell,.lib-seg-b,.bn-item,.hr-thumb,.wallet-histlink,.ct-trigger) svg{ filter:grayscale(1) contrast(1.08); } html.vc-art .ct-trigger{border-radius:2px;background:transparent;border:0;border-bottom:1px solid var(--hair-strong)} html.vc-art .ct-chip{border-radius:2px;background:transparent;border:1px solid var(--hair-strong);color:var(--paper)} html.vc-art .credit-chip{border-radius:2px;background:transparent;border:1px solid var(--hair-strong);color:var(--paper)} /* ---------- 8. ช่องผลตรวจ (สถานะว่าง) ---------- */ html.vc-art #result .empty-art{opacity:.4;margin:32px 0 12px} html.vc-art #result .empty-art svg{filter:grayscale(1)} html.vc-art #result > .empty{color:var(--muted)} /* ===== (จาก art-finish.css) ===== */ /* ========================================================= art/finish.css: รอบ 2b "บรรยากาศและการโต้ตอบ" (ตีความจากวิดีโออ้างอิงที่ผู้ใช้ส่งมา — ไม่คัดลอกภาพหรือโค้ด) - โหลดเป็นไฟล์สุดท้าย ทุกกฎขึ้นต้น html.vc-art ดัชนี 1. พื้นผิวจุดฝุ่น 2. ฉากเปิด: ผืนแคนวาส แผ่นเวลลัม หัวข้อ ปุ่มเม็ดยา 3. เมนู: ไฮไลต์เม็ดยาและเปลี่ยนเป็นเซอริฟ 4. วงแหวนเมาส์และการเอียง 5. ส่วนกระดาษขาวนวล (#chapters) กางออกตอนเลื่อน ========================================================= */ /* ---------- 1. พื้นผิวจุดฝุ่นและเส้นใย (สร้างโดย field.js ถ้าไม่มี --specks ก็ไม่แสดง) ---------- */ html.vc-art.vc-specks body::before{ display:block; content:""; position:fixed; inset:0; z-index:9997; pointer-events:none; background:var(--specks) 0 0/1024px 1024px repeat; opacity:.65; } /* ---------- 2. ฉากเปิด ---------- */ html.vc-art .hero-field{ position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none; } html.vc-art .hero-3d{position:absolute;inset:0;z-index:-3;width:100%;height:100%;pointer-events:none;display:block} html.vc-art.vc-3d .hero-sheets{display:none} html.vc-art .hero-sheets{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} html.vc-art .hero-sheets i{ position:absolute;top:-8%;bottom:-8%; border-left:1px solid rgba(236,233,226,.07);border-right:1px solid rgba(236,233,226,.04); background:linear-gradient(180deg,rgba(236,233,226,.05) 0%,rgba(236,233,226,.012) 55%,rgba(236,233,226,0) 100%); translate:calc(var(--mx,0) * var(--d,30px) * -1) calc(var(--p,0) * var(--sy,-40px)); } html.vc-art .hero-sheets i:nth-child(1){left:46%;width:15vw;--d:22px;--sy:-30px} html.vc-art .hero-sheets i:nth-child(2){left:64%;width:10vw;--d:44px;--sy:-70px;background:linear-gradient(180deg,rgba(236,233,226,.075),rgba(236,233,226,.01) 60%,transparent)} html.vc-art .hero-sheets i:nth-child(3){left:80%;width:17vw;--d:14px;--sy:-18px} @media (max-width:1023px){ html.vc-art .hero-sheets i:nth-child(1){left:52%;width:24vw} html.vc-art .hero-sheets i:nth-child(2){left:76%;width:16vw} html.vc-art .hero-sheets i:nth-child(3){display:none} } /* หัวข้อ: บรรทัดแรกเซอริฟบาง บรรทัดสองซานส์ (คู่ตรงข้ามของตัวพิมพ์) */ html.vc-art .ht-l:first-child{--ff:var(--font-display);font-weight:300} html.vc-art .ht-l2{--ff:var(--font-body);font-weight:500;color:var(--paper)} /* ลิงก์ปุ่มในฉากเปิดเป็นเม็ดยา (ปุ่มส่งฟอร์มยังเป็นสี่เหลี่ยมมุมเล็ก) */ html.vc-art .dx-cta, html.vc-art .dx-cta-ghost{border-radius:999px;padding:14px 28px;transition:background .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out)} html.vc-art .dx-cta::after{content:"\2197";display:inline-block;margin-left:.6em;font-weight:400;transition:transform .3s var(--ease-out)} html.vc-art .dx-cta:hover::after{transform:translate(2px,-2px)} /* ---------- 3. เมนู ---------- */ html.vc-art .dx-nav a{ border-radius:999px; transition:box-shadow .3s var(--ease-out),color .3s var(--ease-out),background .3s var(--ease-out); } html.vc-art .dx-nav a:not(:last-child):hover, html.vc-art .dx-nav a.is-here:not(:last-child){ color:var(--paper); --ff:var(--font-display); box-shadow:inset 0 0 0 1px var(--hair-strong); background:transparent; } html.vc-art .dx-nav a.is-here:not(:last-child){box-shadow:inset 0 0 0 1px var(--silver)} /* ---------- 4. วงแหวนเมาส์ (cursor.js สร้างเฉพาะอุปกรณ์ที่มีเมาส์) ---------- */ html.vc-art .vc-cursor{ position:fixed;left:0;top:0;z-index:10000;width:0;height:0;pointer-events:none; mix-blend-mode:difference; } html.vc-art .vc-cursor i{ position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%; border:1px solid #fff;opacity:0; transition:transform .35s var(--ease-out),opacity .25s ease; } html.vc-art .vc-cursor.is-on i{opacity:.9} html.vc-art .vc-cursor.is-link i{transform:scale(1.9)} html.vc-art .vc-cursor.is-down i{transform:scale(.7)} html.vc-art .vc-cursor.is-link.is-down i{transform:scale(1.5)} html.vc-art .vc-cursor.is-text i{opacity:0} [data-tilt]{will-change:transform;transform-style:preserve-3d} /* ---------- 5. ส่วนกระดาษขาวนวล: กางออกจากแผ่นเล็กเป็นเต็มจอตอนเลื่อนเข้ามา ---------- */ html.vc-art .ch{ background:var(--paper);color:#19191b;border-top:0; } html.vc-art .ch .sec-label{color:rgba(25,25,27,.62)} html.vc-art .ch .sec-label::after{background:rgba(25,25,27,.28)} html.vc-art .ch-head h2{color:#19191b} html.vc-art .ch-item{border-top-color:rgba(25,25,27,.28)} html.vc-art .ch-n{-webkit-text-stroke:1px rgba(25,25,27,.55)} html.vc-art .ch-body h3{color:#19191b} html.vc-art .ch-body p{color:rgba(25,25,27,.8)} html.vc-art .ch-tag{border-color:rgba(25,25,27,.32);color:rgba(25,25,27,.72)} html.vc-art .ch-foot{border-top-color:rgba(25,25,27,.22);color:rgba(25,25,27,.65)} html.vc-art.vc-motion .ch{ --t:clamp(0,calc(var(--p,0) / .2),1); --u:clamp(0,calc((1 - var(--p,0)) / .16),1); --o:max(1 - var(--t),1 - var(--u)); clip-path:inset(calc((1 - var(--t)) * 9vh) calc(var(--o) * 5vw) calc((1 - var(--u)) * 9vh) calc(var(--o) * 5vw) round calc(var(--o) * 28px)); } /* ===== ฉากเปิดจัดกึ่งกลาง (29 ต.ค. 2026) — ข้อความอยู่กลางจอทับฉาก 3 มิติ ===== */ html.vc-art main > .hero{text-align:center} html.vc-art .hero-main{ grid-template-columns:minmax(0,1fr) !important; justify-items:center; align-content:center; text-align:center; } html.vc-art .hero-copy{display:flex;flex-direction:column;align-items:center;width:100%} html.vc-art .hero .dx-pill[hidden]{margin-inline:auto} html.vc-art .hero-title{font-size:clamp(3.4rem,13vw,5.4rem);text-align:center} @media (min-width:1024px){ html.vc-art .hero-title{font-size:clamp(4.6rem,9vw,9.6rem)} } html.vc-art .ht-l{text-align:center} html.vc-art .ht-l2{margin-inline:auto} html.vc-art .hero-lead{margin-inline:auto;text-align:center;max-width:34em} html.vc-art .hero .dx-cta-row[hidden]{justify-content:center} html.vc-art .hero .dx-points[hidden]{justify-content:center} html.vc-art .hero-cue{align-self:center} html.vc-art .hero-title{width:100%} /* ===== ฟอนต์ใหม่และขนาดที่เล็กลง (29 ต.ค. 2026) ===== หัวข้อ: Newsreader (ละติน) + Taviraj (ไทย เซอริฟสง่า) เนื้อหา: Prompt (ซานส์ไทยสมัยใหม่) ป้ายเล็ก: IBM Plex Mono กลไก: ทุกองค์ประกอบใช้ฟอนต์จากตัวแปร --ff (ถ้าไม่ตั้งจะเป็นฟอนต์เนื้อหา) แล้วใช้ !important เพื่อทับกฎฟอนต์เดิมที่ฝังอยู่ในไฟล์ CSS เก่าทุกไฟล์ในครั้งเดียว จะเปลี่ยนฟอนต์ภายหลังให้แก้ที่ --font-* ใน art-tokens ด้านบนและลิงก์ฟอนต์ใน index.html */ @property --ff{syntax:"*";inherits:false} html.vc-art, html.vc-art *, html.vc-art *::before, html.vc-art *::after{font-family:var(--ff,var(--font-body)) !important} html.vc-art :is(h1,h2,h3){--ff:var(--font-display)} html.vc-art :is(pre,code,kbd,samp){--ff:var(--font-mono)} html.vc-art{--t-hero:clamp(2.4rem,5.4vw,4.6rem);--t-display:clamp(1.7rem,3.4vw,2.8rem);--t-title:clamp(1.25rem,2.2vw,1.7rem)} @media (min-width:1024px){ html.vc-art{font-size:15px} } /* ฉากเปิด */ html.vc-art .hero-title{font-size:clamp(2.7rem,11vw,3.8rem);line-height:1.35} @media (min-width:1024px){ html.vc-art .hero-title{font-size:clamp(3.4rem,5.4vw,5.2rem)} } html.vc-art .hero-lead{font-size:clamp(.92rem,1.05vw,1.05rem)} html.vc-art .dx-cta,html.vc-art .dx-cta-ghost{font-size:.92rem;padding:12px 24px} html.vc-art .hero-meta{font-size:.64rem} /* ฉากอ่านสัญญา / สามขั้น / หัวส่วนต่าง ๆ */ html.vc-art .mf-title{font-size:clamp(1.5rem,5.6vw,2rem)} @media (min-width:1024px){ html.vc-art .mf-title{font-size:clamp(1.8rem,2.8vw,2.6rem)} } html.vc-art .mf-steps b{font-size:.95rem} html.vc-art .mf-steps span{font-size:.84rem} html.vc-art .ch-n{font-size:clamp(2.6rem,13vw,3.8rem)} @media (min-width:1024px){ html.vc-art .ch-n{font-size:clamp(3rem,5.6vw,5rem)} } html.vc-art .ch-body h3{font-size:clamp(1.3rem,4.6vw,1.8rem)} html.vc-art .ch-body p{font-size:.9rem;line-height:1.85} html.vc-art .sec-label{font-size:.68rem} /* โต๊ะอ่านสัญญา */ html.vc-art :is(#authCard,#checkCard,#resultCard) > h2, html.vc-art :is(#authCard,#checkCard,#resultCard) .step-head h2{font-size:1.15rem} html.vc-art #authLoggedIn#authLoggedIn .wallet-total-num b{font-size:clamp(2.8rem,5vw,3.8rem)} /* ===== แถบหัวเว็บลอยโปร่งใส ไม่มีเส้น (29 ต.ค. 2026) ===== */ html.vc-art .site-header{ position:fixed; top:0;left:0;right:0; transition:background .35s var(--ease-out),border-color .35s var(--ease-out); } html.vc-art.vc-top .site-header{ background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; } html.vc-art main > .hero{ min-height:100svh; padding-top:calc(var(--art-head) + clamp(18px,3vh,32px)); } /* ===== ปุ่มเปลี่ยนสีเมื่อเอาเมาส์ไปแตะ: พื้นดำ/ขาวเลื่อนขึ้นมาจากด้านล่าง (29 ต.ค. 2026) ===== ปุ่มขาว (เริ่มตรวจสัญญา, ตรวจสัญญา ในเมนู, ปุ่มหลักในพื้นที่ทำงาน): แตะแล้วพื้นเป็นดำ ตัวอักษรเป็นขาว ปุ่มโปร่ง (ดูคลิปแนะนำ, ปุ่มรอง): แตะแล้วพื้นเป็นขาว ตัวอักษรเป็นดำ ใช้ ::before เป็นแผ่นสีที่เลื่อนขึ้น (ขอบบนโค้งแล้วแบนลงตอนเต็ม) ปุ่มที่ปิดใช้งาน (disabled) ไม่เปลี่ยน */ html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost){ position:relative; overflow:hidden; isolation:isolate; transition:color .45s var(--ease-out),border-color .45s var(--ease-out),background-color .45s var(--ease-out); } html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost)::before{ content:""; position:absolute; left:-2px;right:-2px;bottom:-2px; height:calc(100% + 4px); z-index:-1; background:var(--hv-fill,var(--ink)); border-radius:50% 50% 0 0 / 100% 100% 0 0; transform:translate3d(0,102%,0); transition:transform .55s var(--ease-out),border-radius .55s var(--ease-out); pointer-events:none; } /* ปุ่มขาว -> เติมดำ */ html.vc-art :is(.dx-cta,.dx-nav a:last-child,button.primary){--hv-fill:var(--ink);border:1px solid var(--paper)} /* ปุ่มโปร่ง -> เติมขาว */ html.vc-art :is(.dx-cta-ghost,button.ghost){--hv-fill:var(--paper)} @media (hover:hover){ html.vc-art :is(.dx-cta,.dx-nav a:last-child):hover, html.vc-art button.primary:hover:not(:disabled){ background:var(--paper); color:var(--paper); border-color:var(--paper); } html.vc-art :is(.dx-cta-ghost,button.ghost):hover:not(:disabled){ color:var(--ink); border-color:var(--paper); } html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost):hover:not(:disabled)::before{ transform:translate3d(0,0,0); border-radius:0; } } /* ใช้แป้นพิมพ์: โฟกัสแล้วเปลี่ยนเหมือนกัน */ html.vc-art :is(.dx-cta,.dx-nav a:last-child,button.primary):focus-visible:not(:disabled){color:var(--paper)} html.vc-art :is(.dx-cta-ghost,button.ghost):focus-visible:not(:disabled){color:var(--ink)} html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost):focus-visible:not(:disabled)::before{transform:translate3d(0,0,0);border-radius:0} html.vc-art .dx-cta:hover::after{transform:translate(3px,-3px)} /* ปุ่มส่งตรวจที่กำลังโหลดไม่เปลี่ยนสี */ html.vc-art #checkBtn.is-busy::before{display:none} /* ===== เอฟเฟกต์เมาส์แตะปุ่ม (29 ต.ค. 2026): วงแหวนล็อกปุ่ม · ปุ่มดูดเมาส์ · ตัวอักษรกลิ้ง · ประกายไฟตอนคลิก · ฉาก 3 มิติตอบสนอง ===== ทั้งหมดทำงานเฉพาะอุปกรณ์ที่มีเมาส์จริงและไม่ได้ลดการเคลื่อนไหว (cursor.js เติม class vc-cursor-on) */ html.vc-art .vc-cursor i{ left:calc(var(--rw,28px) / -2); top:calc(var(--rh,28px) / -2); width:var(--rw,28px); height:var(--rh,28px); border-radius:var(--rr,50%); transition:width .5s var(--ease-out),height .5s var(--ease-out),left .5s var(--ease-out),top .5s var(--ease-out),border-radius .5s var(--ease-out),transform .35s var(--ease-out),opacity .25s ease,border-width .3s ease; } html.vc-art .vc-cursor.is-snap i{transform:none;border-width:2px;opacity:1} html.vc-art .vc-cursor.is-snap.is-down i{transform:scale(.93)} html.vc-art .vc-spark{position:fixed;display:block;border-radius:50%;pointer-events:none;z-index:10002;box-shadow:0 0 6px rgba(255,170,80,.55)} html.vc-art .vc-wave{position:fixed;display:block;width:24px;height:24px;margin:-12px 0 0 -12px;border:1.5px solid rgba(236,233,226,.9);border-radius:50%;pointer-events:none;z-index:10002} /* ตัวอักษรกลิ้งขึ้นเมื่อแตะปุ่ม */ html.vc-cursor-on .rl{display:inline-block;position:relative;overflow:hidden;vertical-align:top;padding-block:.14em;margin-block:-.14em} html.vc-cursor-on .rl-a, html.vc-cursor-on .rl-b{display:block;white-space:nowrap;transition:transform .65s var(--ease-out)} html.vc-cursor-on .rl-b{position:absolute;left:0;top:.14em;transform:translateY(135%)} @media (hover:hover){ html.vc-cursor-on :is(.dx-cta,.dx-cta-ghost,.dx-nav a):hover .rl-a{transform:translateY(-135%)} html.vc-cursor-on :is(.dx-cta,.dx-cta-ghost,.dx-nav a):hover .rl-b{transform:translateY(0)} } html.vc-cursor-on :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child){will-change:translate} /* ===== ปุ่มมีชีวิต (29 ต.ค. 2026) — ทับกฎ "แถบเลื่อนจากล่าง" ด้านบนด้วยพื้นที่บานออกจากจุดที่เมาส์เข้า ===== */ html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost){--hx:50%;--hy:105%} html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost)::before{ left:0;right:0;top:0;bottom:0;height:auto; transform:none;border-radius:0; clip-path:circle(0% at var(--hx) var(--hy)); transition:clip-path .7s var(--ease-out); } @media (hover:hover){ html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost):hover:not(:disabled)::before{ transform:none;border-radius:0; clip-path:circle(150% at var(--hx) var(--hy)); } } html.vc-art :is(.dx-cta,.dx-cta-ghost,.dx-nav a:last-child,button.primary,button.ghost):focus-visible:not(:disabled)::before{ transform:none;border-radius:0;clip-path:circle(150% at 50% 50%); } /* ลูกศร ↗ บินออกมุมขวาบนแล้ววนเข้าจากมุมซ้ายล่าง */ @keyframes vcArrowFly{ 0%{transform:translate(0,0);opacity:1} 42%{transform:translate(1.4em,-1.4em);opacity:0} 43%{transform:translate(-1.4em,1.4em);opacity:0} 100%{transform:translate(0,0);opacity:1} } @media (hover:hover){ html.vc-art .dx-cta:hover::after{transform:none;animation:vcArrowFly .7s var(--ease-out) both} } /* ===== โครงหน้าแบบหน้าเดียว (29 ต.ค. 2026): หน้าแรก = ฉากเปิดอย่างเดียว ส่วนอื่นเป็นหน้าย่อย ===== */ html.vc-spa:not([data-view="home"]) [data-v="home"], html.vc-spa:not([data-view="how"]) [data-v="how"], html.vc-spa:not([data-view="film"]) [data-v="film"], html.vc-spa[data-view="home"] [data-v="foot"], html.vc-spa[data-view="desk"] [data-v="foot"]{display:none !important} /* หน้าตรวจสัญญา: บนจอเล็ก #authCard กับ #paymentCard เป็นแผ่นเลื่อนขึ้นจากล่างที่เปิดได้จากทุกหน้า จึงซ่อนเฉพาะส่วนที่เหลือ */ @media (min-width:768px){ html.vc-spa:not([data-view="desk"]) [data-v="desk"]{display:none !important} } @media (max-width:767px){ html.vc-spa:not([data-view="desk"]) :is(.desk-head,#checkCard,#resultCard)[data-v="desk"]{display:none !important} } /* หน้าแรกไม่เลื่อน */ html.vc-spa[data-view="home"], html.vc-spa[data-view="home"] body{overflow:hidden;height:100%} html.vc-spa[data-view="home"] main > .hero{height:100svh;min-height:0} /* หน้าย่อยเริ่มใต้หัวเว็บ */ html.vc-spa:not([data-view="home"]) main{padding-top:var(--art-head)} html.vc-spa:not([data-view="home"]) .site-header{background:rgba(12,12,13,.92)} html.vc-spa:not([data-view="home"]) .mf-pin{top:var(--art-head)} /* เมนู: หน้านี้ที่กำลังเปิด */ html.vc-spa .dx-nav a.is-here:not(:last-child){box-shadow:inset 0 0 0 1px var(--silver);color:var(--paper)} html.vc-spa .brand{cursor:pointer} /* ระลอกหมึก (ดู art.js โมดูลโครงหน้า): 3 ชั้น clip-path polygon ที่ JS คำนวณทุกเฟรม */ #vcWipe{position:fixed;inset:0;z-index:10050;display:none;pointer-events:all;overflow:hidden} #vcWipe .tw{position:absolute;inset:0;display:block;will-change:clip-path} #vcWipe .tw3{background:#1b1b1d} #vcWipe .tw1{background:linear-gradient(180deg,var(--silver-hi),var(--silver))} #vcWipe .tw2{background:var(--ink)} #vcWipe .tw-lab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(1.6rem,4vw,3rem);font-weight:400;color:var(--paper);letter-spacing:0;opacity:0;white-space:nowrap} /* จอเล็กกว่า 1024px: เมนูหลักเป็นแถบเลื่อนแถวที่สองใต้หัวเว็บ (เดิมซ่อนไว้) */ @media (max-width:1023px){ html.vc-art{--art-head:92px} html.vc-art .site-header .topbar{flex-wrap:wrap;row-gap:0;align-content:flex-start} html.vc-art .site-header .dx-nav[hidden]{ display:flex !important;order:3;flex:0 0 100%;width:100%;gap:2px; overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;-webkit-overflow-scrolling:touch; } html.vc-art .site-header .dx-nav::-webkit-scrollbar{display:none} html.vc-art .dx-nav a{flex:0 0 auto;padding:7px 14px;font-size:.84rem;white-space:nowrap} html.vc-art .dx-nav a:last-child{margin-left:auto} } html.vc-art .dx-nav a{text-decoration:none} @media (max-width:1023px){ html.vc-art .dx-nav a{color:var(--paper-dim)} html.vc-art .dx-nav a:last-child{background:var(--paper);color:var(--ink);border-radius:999px} html.vc-art .dx-nav a.is-here:not(:last-child){border-radius:999px} } /* ===== ฉาก 3 มิติเป็นฉากหลังของทุกหน้า + หน้า "วิธีอ่าน" ไม่มีกระดาษตัวอย่าง + ปุ่มบัญชีไม่ซ้ำบนมือถือ (29 ต.ค. 2026) ===== */ #vcBackdrop{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--ink)} #vcBackdrop .hero-3d{position:absolute;inset:0;width:100%;height:100%;z-index:auto} #vcBackdrop::after{content:"";position:absolute;inset:0;background:rgba(12,12,13,.5)} html.vc-spa[data-view="desk"] #vcBackdrop::after{background:rgba(12,12,13,.82)} html.vc-spa[data-view="film"] #vcBackdrop::after{background:rgba(12,12,13,.66)} html.vc-spa:not([data-view="home"]) body{background:transparent} html.vc-spa:not([data-view="home"]) :is(.mf,.vc-embed,.desk-head,.ch-head){background:transparent} html.vc-spa .mf{border-top:0} /* หน้า "วิธีอ่าน": ไม่มีกระดาษตัวอย่าง เหลือหัวข้อกับสามขั้นที่สลับตามการเลื่อน อยู่กลางหน้าเหนือฉาก 3 มิติ */ html.vc-spa .mf-pin{grid-template-columns:minmax(0,1fr) !important;justify-items:center;text-align:center} html.vc-spa .mf-copy{max-width:44rem;display:flex;flex-direction:column;align-items:center} html.vc-spa .mf-title{text-align:center} html.vc-spa .mf .sec-label{justify-content:center} html.vc-spa .mf-steps li{text-align:center} html.vc-spa .mf-steps span{margin-inline:auto} html.vc-spa .mf-steps b{font-size:1.1rem} /* บนมือถือ: ปุ่มเข้าสู่ระบบ/บัญชีของฉันอยู่มุมบนขวาแล้ว จึงไม่ซ้ำเป็นลิงก์ "บัญชี" ในแถวเมนู */ @media (max-width:767px){ html.vc-art .dx-nav a[href="#authCard"]{display:none} } /* ===== แบบฟอร์มเข้าสู่ระบบเป็นเอกสาร 3 มิติ + ตราประทับ (29 ต.ค. 2026) ===== */ html.vc-art .auth-doc-wrap{perspective:1100px;padding:6px 4px 30px} html.vc-art .ad-pose{transform:rotate(-1.6deg);transform-origin:50% 50%} @keyframes adFloat{from{translate:0 0}to{translate:0 -8px}} html[data-calm] .ad-pose{animation:none} html.vc-art .auth-doc{ position:relative;transform-style:flat !important; padding:30px 24px 22px;border-radius:2px; background:var(--paper);color:#19191b; box-shadow:0 46px 50px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05); background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,rgba(12,12,13,.045) 31px,rgba(12,12,13,.045) 32px); } /* ความหนาของกองกระดาษด้านหลัง */ html.vc-art .auth-doc::before, html.vc-art .auth-doc::after{content:"";position:absolute;inset:0;border-radius:2px;background:#cfcbc2;pointer-events:none;z-index:-1} html.vc-art .auth-doc::before{transform:translate(6px,7px);box-shadow:0 0 0 1px rgba(0,0,0,.25)} html.vc-art .auth-doc::after{transform:translate(11px,13px);background:#a9a59c} /* มุมกระดาษพับ */ html.vc-art .ad-fold{position:absolute;top:0;right:0;width:30px;height:30px;pointer-events:none;background:linear-gradient(225deg,var(--ink) 50%,#d9d5cc 50%);box-shadow:-3px 3px 6px rgba(0,0,0,.25)} html.vc-art .ad-kicker{margin:0 0 6px;font-size:.62rem;letter-spacing:.14em;color:rgba(25,25,27,.55);text-transform:uppercase} html.vc-art .ad-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.7rem;line-height:1.3;color:#19191b} html.vc-art .ad-sub{margin:8px 0 18px;font-size:.78rem;line-height:1.7;color:rgba(25,25,27,.7)} html.vc-art .ad-field{display:block;margin:0 0 12px} html.vc-art .ad-lab{display:block;font-size:.64rem;letter-spacing:.1em;color:rgba(25,25,27,.6)} html.vc-art .auth-doc :is(#email,#password){ --ff:var(--font-mono);display:block;width:100%;margin:2px 0 0; padding:8px 2px;background:transparent;border:0;border-bottom:1px solid rgba(25,25,27,.5);border-radius:0; color:#19191b;caret-color:#19191b;font-size:.95rem;box-shadow:none; } html.vc-art .auth-doc :is(#email,#password)::placeholder{color:rgba(25,25,27,.34)} html.vc-art .auth-doc :is(#email,#password):focus{border-bottom-color:#19191b;border-bottom-width:2px;padding-bottom:7px;outline:none;box-shadow:none} html.vc-art .auth-doc .btns{margin-top:16px;gap:8px} html.vc-art .auth-doc button.primary{background:#19191b;color:var(--paper);border:1px solid #19191b;--hv-fill:var(--paper)} html.vc-art .auth-doc button.ghost{background:transparent;color:#19191b;border:1px solid rgba(25,25,27,.55);--hv-fill:#19191b} @media (hover:hover){ html.vc-art .auth-doc button.primary:hover:not(:disabled){background:#19191b;color:#19191b;border-color:#19191b} html.vc-art .auth-doc button.ghost:hover:not(:disabled){color:var(--paper);border-color:#19191b} html.vc-art .auth-doc .google-btn:hover{background:#19191b;color:var(--paper)} } html.vc-art .auth-doc .or-line{margin:14px 0 10px;font-size:.64rem;color:rgba(25,25,27,.5);text-align:center} html.vc-art .auth-doc .google-btn{width:100%;margin:0;background:transparent;color:#19191b;border:1px dashed rgba(25,25,27,.55);border-radius:2px;font-size:.92rem} html.vc-art .ad-sign{display:flex;align-items:flex-end;gap:10px;margin:22px 0 0;font-size:.62rem;color:rgba(25,25,27,.5)} html.vc-art .ad-sign i{flex:1;border-bottom:1px solid rgba(25,25,27,.35);height:1px;margin-bottom:3px} html.vc-art .ad-fine{margin:10px 0 0;font-size:.64rem;line-height:1.6;color:rgba(25,25,27,.55)} @media (min-width:768px){ html.vc-art #authCard:has(#authLoggedOut:not([hidden])) .sheet-head h2{display:none} html.vc-art #authCard:has(#authLoggedOut:not([hidden])) .sheet-head{margin:0} } @media (max-width:767px){ html.vc-art .ad-pose{transform:none;animation:none} html.vc-art .auth-doc-wrap{perspective:none;padding:2px 2px 14px} html.vc-art .auth-doc::before{transform:translate(4px,5px)} html.vc-art .auth-doc::after{transform:translate(8px,10px)} } /* ตราประทับ "เข้าสู่ระบบแล้ว": สำเนาเอกสารลอยทับ แล้วประทับตราลงมา */ html.vc-art .auth-ghost{position:fixed;z-index:10040;pointer-events:none} html.vc-art .auth-ghost .auth-doc-wrap{padding:0} html.vc-art .auth-ghost .ad-pose{animation:none} html.vc-art .auth-ghost .gv{display:block;padding:8px 2px;border-bottom:1px solid rgba(25,25,27,.5);font-family:var(--font-mono);font-size:.95rem;min-height:2.1em;color:#19191b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.vc-art .auth-stamp{position:absolute;left:50%;top:60%;width:170px;height:170px;margin:-85px 0 0 -85px;pointer-events:none;opacity:0;mix-blend-mode:multiply} html.vc-art .auth-stamp .as-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%; border:4px double #9a2f2b;color:#9a2f2b;text-align:center; box-shadow:inset 0 0 0 5px rgba(154,47,43,.0),0 0 0 2px rgba(154,47,43,.0); -webkit-mask-image:radial-gradient(circle at 30% 24%,#000 55%,rgba(0,0,0,.78) 100%);mask-image:radial-gradient(circle at 30% 24%,#000 55%,rgba(0,0,0,.78) 100%)} html.vc-art .auth-stamp b{font-family:var(--font-display);font-size:1.28rem;font-weight:600;line-height:1.25;letter-spacing:0} html.vc-art .auth-stamp small{display:block;margin-top:6px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;border-top:1px solid #9a2f2b;padding-top:5px} /* สำเนาตอนประทับตรา: ซ่อนปุ่มให้เหลือกระดาษว่างให้ตราอ่านออก (เนื้อที่ยังอยู่ จึงขนาดเท่าเดิม) */ html.vc-art .auth-ghost :is(.btns,.or-line,.google-btn){visibility:hidden} html.vc-art .auth-stamp{top:64%} /* หัวข้อของหน้าใหม่: ลอยขึ้นพร้อมเงาสะท้อนบนผิวหมึก (-webkit-box-reflect: Chrome/Edge/Safari; Firefox ไม่มีเงา แต่ลอยขึ้นเหมือนกัน) */ html.vc-spa :is(.film-head h2,.desk-head h2,.mf-title){ -webkit-box-reflect:below -.1em linear-gradient(to bottom,transparent 52%,rgba(236,233,226,.16)); } @keyframes vcTitleRise{ from{opacity:0;transform:translate3d(0,56px,0);filter:blur(10px);letter-spacing:.04em} to{opacity:1;transform:none;filter:blur(0);letter-spacing:0} } html.vc-motion[data-entering] :is(.film-head h2,.desk-head h2,.mf-title){animation:vcTitleRise 1.05s var(--ease-out) .18s both} html.vc-motion[data-entering] .sec-label{animation:vcTitleRise .8s var(--ease-out) .08s both} /* ===== โต๊ะเขียนเอกสาร: ฉากเข้าสู่ระบบ (29 ต.ค. 2026) ===== กระดาษเก่าขอบไหม้ · มือเซ็นชื่อ · ตะเกียงติดๆดับๆ · กองเอกสาร · ฉากเต็มความกว้างตอนยังไม่ล็อกอิน ไม่ใช้ preserve-3d/translateZ ในเอกสาร (ทำให้คลิกไม่โดน) ขอบกระดาษทำด้วย clip-path ที่ art.js คำนวณ */ @keyframes ldLamp{ /* 1 รอบ 12 วินาที: ติด → กะพริบ → ดับ → กะพริบกลับ → ติด */ 0%,46%{--on:1} 48%{--on:.55} 50%{--on:1} 52%{--on:.2} 54%{--on:.85} 56%{--on:0} 74%{--on:0} 76%{--on:.7} 78%{--on:.1} 81%{--on:.9} 84%,100%{--on:1} } @property --on{syntax:"";inherits:true;initial-value:1} .ld-scene{--on:1;position:relative;min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);display:flex;align-items:flex-end;overflow:hidden;background:transparent} html.vc-art .ld-scene{animation:ldLamp 12s linear infinite} html[data-calm] .ld-scene{animation:none} /* ผนังไม้บุ + ชั้นหนังสือ */ .ld-wall{display:none;position:absolute;inset:0 0 40% 0;background: radial-gradient(55% 75% at 78% 46%,rgba(255,170,80,calc(.2 * var(--on))),transparent 72%), radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%), repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 120px), linear-gradient(180deg,#1a1410 0%,#2a1f16 100%)} .ld-books{display:none !important;position:absolute;left:3%;top:9%;width:36%;height:44%;display:flex;flex-direction:column;justify-content:space-between; filter:brightness(calc(.45 + .5 * var(--on)))} .ld-books .bk-row{position:relative;height:46%;display:flex;align-items:flex-end;gap:1px;padding:0 6px;border-bottom:8px solid #3b2615; box-shadow:0 10px 14px -6px rgba(0,0,0,.6);background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15))} .ld-books i{display:block;flex:none;border-radius:1px 1px 0 0} /* โต๊ะไม้: ลายไม้ตามแนวนอน ขอบหน้าโต๊ะ และแสงตะเกียงตกบนผิว */ .ld-desk{position:absolute;inset:24% 0 0 0;border-top:3px solid rgba(255,210,150,calc(.25 + .3 * var(--on)));box-shadow:0 -22px 40px rgba(0,0,0,.55);background: radial-gradient(34% 48% at 82% 34%,rgba(255,170,80,calc(.34 * var(--on))),transparent 70%), radial-gradient(34% 62% at 50% 62%,rgba(255,170,90,calc(.16 * var(--on))),transparent 75%), repeating-linear-gradient(180deg,transparent 0 176px,rgba(0,0,0,.55) 176px 179px,rgba(255,200,140,.08) 179px 181px), url("data:image/svg+xml;utf8,") 0 0/100% 100%, linear-gradient(180deg,#2a1b11 0%,#1d120a 50%,#120a05 100%)} /* วัตถุบนโต๊ะ: สมุดบัญชี แฟ้ม ม้วนกระดาษ */ .ld-pile{position:absolute;left:5%;top:48%;width:min(340px,28%);aspect-ratio:320/270;z-index:1;filter:brightness(calc(.5 + .5 * var(--on))) drop-shadow(0 6px 8px rgba(0,0,0,.5))} .ld-pile svg{display:block;width:100%;height:100%;overflow:visible} /* ตะเกียงน้ำมันทองเหลือง */ .ld-lamp{position:absolute;right:9%;top:34%;width:clamp(140px,13vw,200px);height:auto;overflow:visible;z-index:1} .ld-lamp .lp-halo{opacity:var(--on);mix-blend-mode:screen} .ld-lamp .lp-glass{fill:url(#lpGlass);stroke:rgba(255,230,190,.5)} .ld-lamp .lp-hl{opacity:calc(.3 + .6 * var(--on))} .ld-lamp :is(.lp-flame,.lp-core){opacity:var(--on);transform-origin:100px 162px;animation:ldFlame .55s ease-in-out infinite alternate} .ld-lamp .lp-core{animation-duration:.4s;animation-direction:alternate-reverse} @keyframes ldFlame{from{transform:scale(.94,1.05) skewX(-3deg)}to{transform:scale(1.05,.94) skewX(3deg)}} html[data-calm] :is(.lp-flame,.lp-core){animation:none} /* แสงจากตะเกียงบนทั้งฉาก และความมืดตอนไฟดับ */ .ld-glow{position:absolute;inset:0;pointer-events:none;background: radial-gradient(38% 52% at 78% 44%,rgba(255,176,90,calc(.3 * var(--on))),transparent 72%), radial-gradient(46% 30% at 50% 78%,rgba(255,170,90,calc(.2 * var(--on))),transparent 75%);mix-blend-mode:screen} .ld-dark{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 75% at 56% 60%,rgba(5,4,3,.1),rgba(3,2,1,.92));opacity:calc(.6 + (1 - var(--on)) * .38)} /* โต๊ะ: ตัวเอกสารอยู่กลางฉาก */ .ld-scene .auth-doc-wrap{position:relative;z-index:2;width:min(380px,92%);margin:0 auto;padding:46px 0 52px} @media (min-width:1024px){.ld-scene .auth-doc-wrap{width:380px}} /* กระดาษเก่าขอบไหม้ (ชั้นพื้น + ขอบไหม้ สร้างด้วย art.js เป็น .ad-rim/.ad-face) */ html.vc-art .auth-doc{background:none;box-shadow:none;--ink:#3a2714;color:var(--ink);padding:42px 30px 30px;background-image:none} html.vc-art .ad-pose{filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.45))} html.vc-art .auth-doc::before,html.vc-art .auth-doc::after,html.vc-art .ad-fold{display:none} .auth-doc .ad-rim,.auth-doc .ad-face{position:absolute;inset:0;pointer-events:none;z-index:-1} .auth-doc .ad-rim{background:linear-gradient(160deg,#6a4423,#4a2c14 55%,#6a4423)} .auth-doc .ad-face{background: url("data:image/svg+xml;utf8,") 0 0/100% 100%, radial-gradient(ellipse 78% 74% at 50% 46%,#f3e5c3 0%,#ecd9ae 46%,#dcbf86 78%,#c49659 100%)} .auth-doc .ad-face::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 56%,rgba(86,50,18,.38) 100%)} html.vc-art .ad-kicker{color:rgba(58,39,20,.62)} html.vc-art .ad-title{color:var(--ink);font-weight:600} html.vc-art .ad-sub{color:rgba(58,39,20,.75)} html.vc-art .ad-lab{color:rgba(58,39,20,.68)} html.vc-art .auth-doc :is(#email,#password){color:var(--ink);caret-color:var(--ink);border-bottom-color:rgba(58,39,20,.55)} html.vc-art .auth-doc :is(#email,#password)::placeholder{color:rgba(58,39,20,.38)} html.vc-art .auth-doc :is(#email,#password):focus{border-bottom-color:var(--ink)} html.vc-art .auth-doc button.primary{background:var(--ink);color:#f1e3bf;border-color:var(--ink);--hv-fill:#f1e3bf} html.vc-art .auth-doc button.ghost{color:var(--ink);border-color:rgba(58,39,20,.6);--hv-fill:var(--ink)} html.vc-art .auth-doc .google-btn{color:var(--ink);border-color:rgba(58,39,20,.6)} html.vc-art .auth-doc .or-line,html.vc-art .ad-sign,html.vc-art .ad-fine{color:rgba(58,39,20,.58)} html.vc-art .ad-sign i{border-bottom-color:rgba(58,39,20,.45)} @media (hover:hover){ html.vc-art .auth-doc button.primary:hover:not(:disabled){background:var(--ink);color:var(--ink);border-color:var(--ink)} html.vc-art .auth-doc button.ghost:hover:not(:disabled){color:#f1e3bf} html.vc-art .auth-doc .google-btn:hover{background:var(--ink);color:#f1e3bf} } /* มือเขียนเอกสาร (SVG ทับเหนือเส้นลงชื่อ) */ .ad-hand{position:absolute;left:0;right:0;bottom:6px;width:100%;height:112px;overflow:visible;pointer-events:none;z-index:3} .ad-hand .ah-ink{fill:none;stroke:#2a1a3a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9} .ad-hand .ah-hand{transform:translate(70px,92px) scale(1)} .ad-hand .ah-hand{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))} html.vc-art .auth-ghost .ad-hand{display:none} /* ฉากเต็มความกว้างตอนยังไม่ล็อกอิน (เฉพาะจอ ≥768px) */ @media (min-width:768px){ html.vc-art main:has(#authLoggedOut:not([hidden])) > #authCard{grid-column:1/-1 !important;padding:0 !important;border:0 !important;max-height:none !important;overflow:visible !important;position:relative !important;top:auto !important} html.vc-art #authCard:has(#authLoggedOut:not([hidden])) .sheet-head{display:none} html.vc-art #authCard:has(#authLoggedOut:not([hidden])) .sheet-body{padding:0} html.vc-art main:has(#authLoggedOut:not([hidden])) > .desk-head{grid-column:1/-1;padding-left:calc((100vw - var(--content-max)) / 2);padding-right:var(--gutter)} @media (max-width:1439px){html.vc-art main:has(#authLoggedOut:not([hidden])) > .desk-head{padding-left:var(--gutter)}} } @media (min-width:1024px) and (max-width:1279px){ html.vc-art main:has(#authLoggedOut:not([hidden])){ grid-template-areas:"hero hero hero hero" "mf mf mf mf" "ch ch ch ch" "video video video video" ". deskhead deskhead ." "auth auth auth auth" ". input result ." ". pay pay ."; } } @media (min-width:1280px){ html.vc-art main:has(#authLoggedOut:not([hidden])){ grid-template-areas:"hero hero hero hero hero" "mf mf mf mf mf" "ch ch ch ch ch" "video video video video video" ". deskhead deskhead deskhead ." "auth auth auth auth auth" ". input input result ." ". pay pay pay ."; } } /* มือถือ: ไม่มีโต๊ะ/ตะเกียง/กองเอกสาร เหลือกระดาษกับมือในแผ่นบัญชี */ @media (max-width:767px){ .ld-scene{min-height:0;display:block;background:none;animation:none} .ld-scene :is(.ld-wall,.ld-books,.ld-desk,.ld-pile,.ld-lamp,.ld-glow,.ld-dark){display:none} .ld-scene .auth-doc-wrap{width:100%;padding:8px 6px 18px} html.vc-art .auth-doc{padding:36px 22px 26px} } /* หัวแผ่นบัญชีมือถือ: ไอคอน 44px ของเดิมถูกซ่อนด้วยกฎหัวข้อใหม่ ทำให้ชื่อทับกัน ใช้แบบบล็อกธรรมดา */ @media (max-width:767px){ html.vc-art body[data-sheet="acct"] #authCard .sheet-head h2{display:block;white-space:normal} html.vc-art body[data-sheet="acct"] #authCard .sheet-head h2::after{display:block;margin-top:2px} } /* ตอนสลับหน้า ห้ามให้ main เลื่อน padding แบบมีทรานซิชัน (เห็นเป็นหน้าเลื่อนลง 64px) */ html.vc-spa main{transition:none !important} /* ฉากโต๊ะ: ให้เห็นภาพ 3 มิติ (ห้องอ่านหนังสือ+เตาผิง) เหนือขอบโต๊ะ ลดความทึบของชั้นมืดด้านหลัง */ html.vc-spa[data-view="desk"] body:has(#authLoggedOut:not([hidden])) #vcBackdrop::after{background:rgba(12,12,13,.3) !important} /* ===== ฉากโต๊ะ (หน้าเข้าสู่ระบบ): ของประกอบเพิ่ม + ฝุ่นในแสงตะเกียง (30 ต.ค. 2026) ===== */ .ld-blotter{position:absolute;left:50%;bottom:-30px;width:min(560px,60%);height:84%;transform:translateX(-50%) rotate(-1deg);border-radius:6px;pointer-events:none; background:url("data:image/svg+xml;utf8,"), linear-gradient(160deg,#3a2a1b,#26190f); box-shadow:0 14px 26px rgba(0,0,0,.65),inset 0 0 0 7px rgba(0,0,0,.3),inset 0 0 0 8px rgba(201,165,87,.4); filter:brightness(calc(.55 + .45 * var(--on)))} .ld-extra{position:absolute;z-index:1;filter:brightness(calc(.5 + .5 * var(--on))) drop-shadow(0 6px 6px rgba(0,0,0,.55));pointer-events:none} .ld-extra svg{display:block;width:100%;height:auto;overflow:visible} .ld-scales{left:16%;top:33%;width:clamp(110px,10vw,150px)} .ld-ink{right:19%;top:66%;width:clamp(110px,10vw,150px)} .ld-dust{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden} .ld-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,215,160,.9);box-shadow:0 0 6px rgba(255,190,110,.8);opacity:0;animation:ldDust var(--d,9s) linear var(--w,0s) infinite} @keyframes ldDust{0%{opacity:0;transform:translate(0,0)}15%{opacity:calc(.7 * var(--on))}85%{opacity:calc(.5 * var(--on))}100%{opacity:0;transform:translate(var(--x,20px),-170px)}} html[data-calm] .ld-dust{display:none} @media (max-width:767px){.ld-blotter,.ld-extra,.ld-dust{display:none}} /* ===== หน้าเข้าสู่ระบบ: เหลือโต๊ะไม้กับกระดาษใบใหญ่ (30 ต.ค. 2026) ===== */ @media (min-width:768px){ .ld-scene :is(.ld-blotter,.ld-extra,.ld-pile,.ld-dust,.ld-books,.ld-wall){display:none !important} html.vc-art .ld-scene{--on:1;min-height:max(100svh,1020px);align-items:center} .ld-desk{inset:10% 0 0 0} .ld-dark{opacity:.55} .ld-scene .auth-doc-wrap{zoom:1.3;width:380px;padding:30px 0 40px} } /* หน้าเข้าสู่ระบบ: โต๊ะเต็มถึงใต้แถบเมนู + ขอบภาพเบลอและมืด เหมือนบรรยากาศหน้าแรก */ @media (min-width:768px){ .ld-desk{inset:0} .ld-desk{border-top:0;box-shadow:none} .ld-dark{opacity:1;background: radial-gradient(ellipse 62% 64% at 50% 54%,rgba(4,3,2,0) 30%,rgba(3,2,1,.62) 70%,rgba(2,1,1,.93) 100%), radial-gradient(60% 40% at 18% 20%,rgba(120,100,80,.10),transparent 70%), radial-gradient(50% 36% at 84% 78%,rgba(120,100,80,.08),transparent 70%)} .ld-dark::before{content:"";position:absolute;inset:0;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 54%,transparent 38%,#000 86%);mask-image:radial-gradient(ellipse 58% 62% at 50% 54%,transparent 38%,#000 86%)} } /* หน้าเข้าสู่ระบบ: กระดาษใหญ่ขึ้นอีกและวางเฉียง */ @media (min-width:768px){ html.vc-art .ld-scene{min-height:max(100svh,1240px)} .ld-scene .auth-doc-wrap{zoom:1.5} html.vc-art .ad-pose{transform:rotate(-7deg)} } @media (min-width:768px){html.vc-art .ld-scene{align-items:flex-start;min-height:max(100svh,1160px)}.ld-scene .auth-doc-wrap{margin-top:40px}} /* ตะเกียง 3 มิติ: ติด-ดับเองเป็นรอบ และแตะที่ตะเกียงเพื่อเปิด/ปิดเองได้ */ @media (min-width:768px){ .ld-scene .ld-lamp{display:block;left:2%;right:auto;top:6%;width:clamp(300px,28vw,420px);cursor:pointer;pointer-events:auto;z-index:3; filter:drop-shadow(0 18px 14px rgba(0,0,0,.6)) drop-shadow(0 0 calc(26px * var(--on)) rgba(255,170,70,calc(.55 * var(--on)))); transform:none;transition:filter .3s} .ld-scene .ld-lamp:hover{transform:scale(1.04)} .ld-scene .ld-lamp{transition:transform .35s ease,filter .3s} .ld-scene .ld-glow{display:block;background: radial-gradient(34% 40% at 17% 22%,rgba(255,176,90,calc(.42 * var(--on))),transparent 72%), radial-gradient(46% 40% at 38% 58%,rgba(255,170,90,calc(.2 * var(--on))),transparent 75%);mix-blend-mode:screen;z-index:2} .ld-dark{background: linear-gradient(rgba(0,0,0,calc((1 - var(--on)) * .72)),rgba(0,0,0,calc((1 - var(--on)) * .72))), radial-gradient(ellipse 62% 64% at 50% 54%,rgba(4,3,2,0) 30%,rgba(3,2,1,.62) 70%,rgba(2,1,1,.93) 100%) !important} .ld-scene{transition:--on .4s} html.vc-art .ad-pose{filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.45)) brightness(calc(.62 + .38 * var(--on)))} html.vc-art .ld-scene[data-lamp="on"]{animation:none !important;--on:1} html.vc-art .ld-scene[data-lamp="off"]{animation:none !important;--on:0} .ld-scene .ld-lamp:focus{outline:none} .ld-scene .ld-lamp:focus-visible{outline:2px solid rgba(255,200,120,.7);outline-offset:6px;border-radius:8px} } /* ตะเกียงมองจากด้านบน: เปลวไฟมองจากบน กระพริบอยู่กลางวง */ .ld-scene .ld-lamp :is(.lp-flame,.lp-core){transform-box:fill-box;transform-origin:center;animation:ldFlameTop .5s ease-in-out infinite alternate} @keyframes ldFlameTop{from{transform:scale(.9)}to{transform:scale(1.08)}} .ld-scene .ld-lamp .lp-glass{fill:url(#ltGl)} /* ===== กระดาษเข้าสู่ระบบ: ผิวกระดาษเก่าสมจริงขึ้น (รอยพับ คราบ เส้นใย รอยไหม้ แสงเฉียง ตราขี้ผึ้ง) ===== */ .auth-doc .ad-face{background: radial-gradient(circle at 16% 20%,rgba(126,76,24,.26),transparent 20%), radial-gradient(circle at 82% 64%,rgba(110,62,18,.22),transparent 24%), radial-gradient(circle at 36% 90%,rgba(120,70,20,.2),transparent 18%), radial-gradient(circle at 72% 12%,rgba(150,100,40,.16),transparent 16%), url("data:image/svg+xml;utf8,") 0 0/300px 300px, url("data:image/svg+xml;utf8,") 0 0/100% 100%, radial-gradient(ellipse 80% 76% at 46% 44%,#f6e9c8 0%,#efdcae 46%,#dcbc80 78%,#bf9050 100%)} .auth-doc .ad-face::before{content:"";position:absolute;inset:0;pointer-events:none;background: linear-gradient(180deg,transparent calc(33% - 2px),rgba(70,40,12,.30) 33%,rgba(255,246,220,.42) calc(33% + 2px),transparent calc(33% + 7px)), linear-gradient(180deg,transparent calc(67% - 2px),rgba(70,40,12,.26) 67%,rgba(255,246,220,.38) calc(67% + 2px),transparent calc(67% + 7px)), linear-gradient(90deg,transparent calc(52% - 2px),rgba(70,40,12,.2) 52%,rgba(255,246,220,.3) calc(52% + 2px),transparent calc(52% + 6px)), linear-gradient(118deg,rgba(255,244,210,.4),transparent 36%,transparent 62%,rgba(40,16,3,.3) 100%)} .auth-doc .ad-face::after{background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(96,48,12,.42) 80%,rgba(42,16,3,.82) 100%)} .auth-doc .ad-rim{background:linear-gradient(160deg,#7d4a22,#3c1e0b 55%,#80481d)} html.vc-art .auth-doc .ad-fold{display:block;position:absolute;top:-16px;right:30px;width:60px;height:58px;z-index:4;pointer-events:none; border-radius:48% 52% 50% 50%/52% 46% 54% 48%; background:radial-gradient(circle at 34% 28%,#e6827a,#a82a20 48%,#5a120c 100%); box-shadow:0 5px 8px rgba(0,0,0,.5),inset 0 0 0 4px rgba(255,170,160,.16),inset 0 -4px 6px rgba(0,0,0,.4)} html.vc-art .auth-doc .ad-fold::before{content:"";position:absolute;inset:11px;border-radius:50%;border:1.5px solid rgba(90,15,8,.55);box-shadow:inset 0 1px 0 rgba(255,170,160,.35)} html.vc-art .auth-doc .ad-fold::after{content:"VC";position:absolute;inset:0;display:grid;place-items:center;font:600 1.05rem/1 var(--font-display,serif);color:rgba(70,10,5,.8);text-shadow:0 1px 0 rgba(255,170,160,.4)} /* ===== เอกสารเข้าสู่ระบบ แบบเอกสารกฎหมายจริงบนโต๊ะ (ตามคำแนะนำ: กระดาษหลายแผ่นซ้อน ขอบหนา กรอบเส้นคู่ คลิป ปากกา ตรา) ===== */ @media (min-width:768px){ .auth-doc .ad-rim,.auth-doc .ad-face{clip-path:none !important;border-radius:3px} .auth-doc .ad-rim{transform:translate(3px,4px);background:linear-gradient(180deg,#d2c29b,#a99567);box-shadow:0 1px 0 rgba(0,0,0,.25)} .auth-doc .ad-face{background: url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat, radial-gradient(circle at 18% 22%,rgba(126,76,24,.10),transparent 22%), radial-gradient(circle at 84% 70%,rgba(110,62,18,.09),transparent 24%), url("data:image/svg+xml;utf8,") 0 0/300px 300px, linear-gradient(120deg,#f8f0dc 0%,#f2e8cf 55%,#e6d8b6 100%)} .auth-doc .ad-face::before{background: linear-gradient(180deg,transparent calc(50% - 2px),rgba(70,45,15,.16) 50%,rgba(255,250,232,.4) calc(50% + 2px),transparent calc(50% + 6px)), linear-gradient(112deg,rgba(255,236,190,.5),transparent 34%,transparent 64%,rgba(60,30,6,.24) 100%)} .auth-doc .ad-face::after{background:radial-gradient(ellipse at 50% 50%,transparent 62%,rgba(110,70,25,.2) 100%)} /* แผ่นรองด้านล่างซ้อนเฉียง ให้เห็นเป็นกองเอกสาร */ html.vc-art .auth-doc::before,html.vc-art .auth-doc::after{display:block;content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;border-radius:3px; background:linear-gradient(160deg,#eadfc3,#d4c49c);box-shadow:0 2px 4px rgba(0,0,0,.35)} html.vc-art .auth-doc::before{transform:rotate(2.6deg) translate(10px,8px)} html.vc-art .auth-doc::after{z-index:-3;transform:rotate(-2.2deg) translate(-8px,12px);background:linear-gradient(160deg,#e2d6b8,#c9b88f)} html.vc-art .ad-pose{filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 14px 18px rgba(0,0,0,.5)) brightness(calc(.64 + .36 * var(--on)));animation:docSettle .9s cubic-bezier(.2,.8,.25,1) both} .auth-doc .ad-clip{position:absolute;top:-24px;left:4px;width:26px;height:74px;z-index:5;pointer-events:none;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.5))} .ld-pen{position:absolute;left:16%;top:74%;width:clamp(200px,20vw,300px);transform:rotate(-24deg);z-index:1;pointer-events:none;filter:brightness(calc(.55 + .45 * var(--on))) drop-shadow(0 8px 6px rgba(0,0,0,.6))} .ld-pen svg{display:block;width:100%;height:auto;overflow:visible} } @keyframes docSettle{from{opacity:0;transform:translateY(-22px) rotate(-10deg)}to{opacity:1;transform:rotate(-7deg)}} @media (prefers-reduced-motion:reduce){html.vc-art .ad-pose{animation:none}} /* เอกสารสีน้ำตาล (กระดาษคราฟต์เก่า) */ @media (min-width:768px){ .auth-doc .ad-face{background: url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat, radial-gradient(circle at 18% 22%,rgba(90,50,16,.14),transparent 24%), radial-gradient(circle at 84% 70%,rgba(70,38,10,.16),transparent 26%), url("data:image/svg+xml;utf8,") 0 0/300px 300px, linear-gradient(120deg,#d2a874 0%,#c19460 55%,#a97c47 100%)} .auth-doc .ad-rim{background:linear-gradient(180deg,#8a6234,#5e3f1d)} html.vc-art .auth-doc::before{background:linear-gradient(160deg,#b98d58,#9a7142)} html.vc-art .auth-doc::after{background:linear-gradient(160deg,#a67b48,#82592d)} html.vc-art .auth-doc{--ink:#2a1608} .auth-doc .ad-field input::placeholder{color:rgba(60,34,12,.55)} html.vc-art .auth-doc button.primary{background:#2a1608;color:#f3dfb8} } /* แผ่นกระดาษขาววางบนกระดาษสีน้ำตาล (เฉพาะส่วนฟอร์ม) */ @media (min-width:768px){ .auth-doc .ad-sheet{position:absolute;left:8px;right:12px;top:54px;bottom:14px;z-index:-1;pointer-events:none;border-radius:2px;transform:rotate(-.5deg); background: url("data:image/svg+xml;utf8,") 0 0/260px 260px, linear-gradient(118deg,#fffdf8 0%,#f8f4ea 60%,#ece6d6 100%); box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 6px rgba(50,25,5,.45),0 0 0 1px rgba(90,60,25,.25)} html.vc-art .auth-doc{--ink:#2a1a0c} } /* เอกสารสีขาวทั้งแผ่น (ตรา คลิป และมือคงเดิม) */ @media (min-width:768px){ .auth-doc .ad-sheet{display:none} .auth-doc .ad-face{background: url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat, url("data:image/svg+xml;utf8,") 0 0/260px 260px, linear-gradient(118deg,#fffefb 0%,#f9f6ee 60%,#eeeadf 100%)} .auth-doc .ad-rim{background:linear-gradient(180deg,#d9d5ca,#b8b3a6)} html.vc-art .auth-doc::before{background:linear-gradient(160deg,#efebe0,#d8d3c6)} html.vc-art .auth-doc::after{background:linear-gradient(160deg,#e3dfd3,#c6c1b3)} .auth-doc .ad-kicker{color:rgba(60,45,30,.7)} } /* ลบปากกาบนโต๊ะ + ลิ้นชักแฟ้มเปิดอยู่มุมซ้ายล่าง */ @media (min-width:768px){ .ld-pen{display:none !important} .ld-drawer{position:absolute;left:2.5%;bottom:7%;width:clamp(210px,19vw,280px);transform:rotate(-4deg);z-index:1;pointer-events:none; filter:brightness(calc(.55 + .45 * var(--on))) drop-shadow(0 10px 10px rgba(0,0,0,.6))} .ld-drawer svg{display:block;width:100%;height:auto;overflow:visible} } @media (min-width:768px){.ld-drawer{left:3%;bottom:6%;width:clamp(210px,19vw,280px);transform:none}} /* ลิ้นชักออก ใส่กระเป๋าสะพายหนังแทน (วางบนโต๊ะมุมซ้ายล่าง) */ @media (min-width:768px){ .ld-drawer{display:none !important} .ld-bag{position:absolute;left:2%;bottom:6%;width:clamp(300px,28vw,420px);transform:rotate(-9deg);z-index:1;pointer-events:none; filter:brightness(calc(.55 + .45 * var(--on))) drop-shadow(0 10px 10px rgba(0,0,0,.6))} .ld-bag svg{display:block;width:100%;height:auto;overflow:visible} } @media (min-width:768px){.ld-bag{left:3%;bottom:4%;width:clamp(190px,18vw,270px);transform:rotate(-8deg)}} @media (min-width:768px){.ld-bag{left:3%;bottom:11%;width:clamp(170px,15.5vw,235px)}} @media (min-width:768px){.ld-bag{left:3%;bottom:9%;width:clamp(240px,22vw,340px);transform:rotate(12deg)}} @media (min-width:768px){.ld-bag{left:-1%;bottom:2%;width:clamp(320px,31vw,460px);transform:rotate(26deg);transform-origin:50% 85%}} @media (min-width:768px){.ld-bag{transform:rotate(26deg) scaleY(.74);transform-origin:50% 90%;bottom:3%}} @media (min-width:768px){.ld-bag{left:-8%;bottom:0%}} /* ขนาดกระดาษพอดีกับความสูงจอ (จอเตี้ยลดลงตามขั้น) */ @media (min-width:768px) and (max-height:1099px){html.vc-art .ld-scene{min-height:calc(100svh - 65px);align-items:center}.ld-scene .auth-doc-wrap{zoom:1.3;margin-top:0}} @media (min-width:768px) and (max-height:940px){.ld-scene .auth-doc-wrap{zoom:1.1}} @media (min-width:768px) and (max-height:820px){.ld-scene .auth-doc-wrap{zoom:.95}} @media (min-width:768px) and (max-height:720px){.ld-scene .auth-doc-wrap{zoom:.82}} @media (min-width:768px) and (max-height:620px){.ld-scene .auth-doc-wrap{zoom:.7}} @media (min-width:768px) and (max-height:540px){.ld-scene .auth-doc-wrap{zoom:.58}} @media (min-width:768px){ .ld-bag{width:clamp(150px,min(31vw,50vh),460px)} .ld-scene .ld-lamp{width:clamp(120px,min(28vw,40vh),420px)} } /* ขนาดกระดาษ: ใหญ่ขึ้นแต่ยังพอดีความสูงจอ */ @media (min-width:768px) and (max-height:1099px){.ld-scene .auth-doc-wrap{zoom:1.5}} @media (min-width:768px) and (max-height:980px){.ld-scene .auth-doc-wrap{zoom:1.42}} @media (min-width:768px) and (max-height:900px){.ld-scene .auth-doc-wrap{zoom:1.35}} @media (min-width:768px) and (max-height:830px){.ld-scene .auth-doc-wrap{zoom:1.22}} @media (min-width:768px) and (max-height:760px){.ld-scene .auth-doc-wrap{zoom:1.08}} @media (min-width:768px) and (max-height:690px){.ld-scene .auth-doc-wrap{zoom:.95}} @media (min-width:768px) and (max-height:620px){.ld-scene .auth-doc-wrap{zoom:.84}} @media (min-width:768px) and (max-height:560px){.ld-scene .auth-doc-wrap{zoom:.73}} @media (min-width:768px) and (max-height:500px){.ld-scene .auth-doc-wrap{zoom:.63}} /* พื้นโต๊ะขยายขึ้นไปถึงขอบบนสุดของหน้าจอ ใต้แถบเมนูโปร่งใส */ @media (min-width:768px){ html.vc-art .ld-scene{margin-top:-65px;min-height:100svh !important;padding-top:65px} html.vc-spa[data-view="desk"] body:has(#authLoggedOut:not([hidden])) .site-header{background:linear-gradient(180deg,rgba(6,4,2,.78),rgba(6,4,2,0)) !important;border-bottom-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important} } /* แก้วกาแฟ (มองจากด้านบน) พร้อมควันลอยขึ้น */ @media (min-width:768px){ .ld-cup{position:absolute;right:8%;top:50%;width:clamp(120px,min(15vw,25vh),210px);z-index:1;pointer-events:none;transform:rotate(-8deg); filter:brightness(calc(.6 + .4 * var(--on))) drop-shadow(0 6px 6px rgba(0,0,0,.5))} .ld-cup svg{display:block;width:100%;height:auto;overflow:visible} .ld-steam{position:absolute;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle,rgba(255,244,228,.75),rgba(255,236,210,.28) 55%,transparent 72%);filter:blur(7px); animation:ldSteam var(--d,5s) ease-out var(--w,0s) infinite} } @keyframes ldSteam{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.95}70%{opacity:.4}100%{opacity:0;transform:translate(var(--x,10px),-120%) scale(2.2)}} @media (max-width:767px){.ld-cup{display:none}} @media (prefers-reduced-motion:reduce){.ld-steam{animation:none;opacity:.25}} html[data-calm] .ld-steam{animation:none;opacity:.2} @media (min-width:768px){.ld-cup{top:19%;right:9%;width:clamp(150px,min(19vw,31vh),290px)}} /* ===== ฉากมือเล่นกับกาแฟ ===== */ .ld-arm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6;opacity:0;transition:opacity .25s} .ld-arm .wind{opacity:0;transition:opacity .2s} .ld-arm .wind.on{opacity:1} .ld-arm .wind line{stroke:rgba(255,255,255,.7);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:16 26;animation:ldWind .35s linear infinite} @keyframes ldWind{to{stroke-dashoffset:-42}} .ld-cup.nosteam .ld-steam{opacity:0 !important;animation:none} .ld-ice{position:absolute;width:10%;aspect-ratio:1;margin:-5% 0 0 -5%;border-radius:18%;pointer-events:none;opacity:0;transform:scale(1.9) rotate(var(--r,0deg)); background:linear-gradient(135deg,rgba(240,250,255,.85),rgba(160,205,230,.45));box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 2px 3px rgba(0,0,0,.4)} .ld-ice.in{opacity:.95;transform:scale(1) rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s} .ld-ice.melt{opacity:0;transform:scale(.35) rotate(var(--r,0deg));transition:transform 4s ease-in,opacity 4s ease-in} .ld-rip{position:absolute;width:6%;aspect-ratio:1;margin:-3% 0 0 -3%;border-radius:50%;border:2px solid rgba(255,235,200,.75);pointer-events:none;animation:ldRip 1s ease-out forwards} @keyframes ldRip{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(4)}} .ld-cup .cp-cof,.ld-cup .cp-swirl{transition:opacity .4s} .ad-spill{position:absolute;inset:6px;z-index:-1;pointer-events:none;opacity:0;mix-blend-mode:multiply;transform:scale(.04);transform-origin:76% 68%} .ad-spill svg{display:block;width:100%;height:100%} .ad-spill.on{opacity:.85;transform:scale(1);transition:transform 1.3s cubic-bezier(.15,.8,.3,1),opacity .4s} .ad-spill.on.dry{opacity:0;transition:opacity 3.4s linear} .ld-stain{position:absolute;z-index:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s; background:radial-gradient(closest-side,rgba(38,16,5,.9),rgba(38,16,5,.6) 62%,transparent);filter:blur(2px)} .ld-cup .cp-swirl{transform-box:view-box;transform-origin:120px 120px} .ld-emo{position:absolute;z-index:8;pointer-events:none;line-height:1;margin:-.5em 0 0 -.5em;opacity:0;transform-origin:50% 100%; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));animation:ldEmo 2.1s cubic-bezier(.2,.8,.3,1) forwards} @keyframes ldEmo{0%{opacity:0;transform:translateY(10px) scale(.2)}14%{opacity:1;transform:translateY(-6px) scale(1.35) rotate(-8deg)}28%{transform:translateY(-14px) scale(1) rotate(6deg)}78%{opacity:1;transform:translateY(-34px) scale(1) rotate(-3deg)}100%{opacity:0;transform:translateY(-60px) scale(.9)}} /* ปุ่มเข้าสู่ระบบ/สมัครใหม่: ขนาดเท่ากัน ไม่มีกรอบโฟกัสแบบสี่เหลี่ยมเอียง + อนิเมชันตอนกด */ html.vc-art .auth-doc .btns{display:grid !important;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch} html.vc-art .auth-doc .btns button{width:100% !important;height:54px;min-height:54px;margin:0 !important;padding:0 12px;border-radius:3px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center; outline:none !important;transition:transform .14s cubic-bezier(.3,1.6,.5,1),box-shadow .2s} html.vc-art .auth-doc :is(.btns button,.google-btn){outline:none !important} html.vc-art .auth-doc :is(.btns button,.google-btn):focus-visible{box-shadow:0 0 0 2px rgba(255,250,235,.95),0 0 0 4px rgba(42,22,8,.85)} html.vc-art .auth-doc :is(.btns button,.google-btn):active:not(:disabled){transform:scale(.95) translateY(1px);box-shadow:inset 0 4px 10px rgba(0,0,0,.4)} html.vc-art .auth-doc :is(.btns button,.google-btn){isolation:isolate} html.vc-art .auth-doc .rp{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;pointer-events:none;z-index:2;background:rgba(255,236,190,.6);animation:adRp .65s ease-out forwards} html.vc-art .auth-doc .ghost .rp,html.vc-art .auth-doc .google-btn .rp{background:rgba(42,22,8,.28)} @keyframes adRp{from{transform:scale(1);opacity:.9}to{transform:scale(34);opacity:0}} @keyframes adPress{0%{transform:translateY(0)}35%{transform:translateY(3px) rotate(.25deg)}100%{transform:translateY(0)}} html.vc-art .auth-doc.pressed{animation:adPress .28s ease-out} /* ===== เลื่อนเมาส์ไปบนเอกสารเข้าสู่ระบบ: ยกตัว เอียงตามเมาส์ เงาลึก ขอบทอง แสงตามเมาส์ ตราขยาย แผ่นล่างแยกตัว ===== */ @media (min-width:768px) and (hover:hover){ html.vc-art .ad-pose{--rx:0deg;--ry:0deg;translate:0 0;scale:1; transition:translate .45s cubic-bezier(.2,.8,.25,1),scale .45s cubic-bezier(.2,.8,.25,1),filter .45s} html.vc-art .ad-pose.is-hover{translate:0 -11px;scale:1.025; filter:drop-shadow(0 4px 3px rgba(0,0,0,.5)) drop-shadow(0 34px 34px rgba(0,0,0,.62)) drop-shadow(0 0 20px rgba(255,190,90,.22)) brightness(calc(.84 + .16 * var(--on)))} html.vc-art .ad-pose.is-hover .auth-doc{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) !important} html.vc-art .ad-pose .auth-doc{transition:transform .25s ease-out} html.vc-art .auth-doc::before,html.vc-art .auth-doc::after{transition:transform .5s cubic-bezier(.2,.8,.25,1)} html.vc-art .ad-pose.is-hover .auth-doc::before{transform:rotate(3.6deg) translate(16px,13px)} html.vc-art .ad-pose.is-hover .auth-doc::after{transform:rotate(-3.2deg) translate(-14px,19px)} html.vc-art .auth-doc .ad-glint{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:3px; background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,226,150,.42),rgba(255,210,120,.12) 32%,transparent 58%);mix-blend-mode:soft-light; box-shadow:inset 0 0 0 1.5px rgba(232,190,100,.0)} html.vc-art .ad-pose.is-hover .ad-glint{opacity:1;box-shadow:inset 0 0 0 1.5px rgba(232,190,100,.55),inset 0 0 22px rgba(232,190,100,.22)} html.vc-art .auth-doc .ad-fold{transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s} html.vc-art .ad-pose.is-hover .ad-fold{transform:scale(1.08) rotate(-4deg);box-shadow:0 7px 12px rgba(0,0,0,.5),0 0 16px rgba(230,70,50,.55),inset 0 0 0 4px rgba(255,170,160,.2),inset 0 -4px 6px rgba(0,0,0,.4)} .ld-spot{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(260px 260px at var(--sx,50%) var(--sy,50%),rgba(255,184,96,calc(.2 * var(--on))),transparent 70%);mix-blend-mode:screen} .ld-scene.doc-hover .ld-spot{opacity:1} .ld-scene .ld-desk{transform:scale(1.04) translate(var(--px,0px),var(--py,0px));transition:transform .5s ease-out} } @media (prefers-reduced-motion:reduce){html.vc-art .ad-pose.is-hover{translate:0 0;scale:1}} /* ===== มือถือ: โต๊ะไม้ + กระดาษขาว + ตะเกียง/กาแฟ/กระเป๋า เหมือนบนคอม (ย่อขนาด) ===== */ @media (max-width:767px){ html.vc-art .ld-scene{--on:1;position:relative;display:block;min-height:0;overflow:hidden;border-radius:8px;background:#120a05;animation:none} html.vc-art .ld-scene :is(.ld-desk,.ld-dark,.ld-lamp,.ld-glow,.ld-bag,.ld-cup){display:block} .ld-scene :is(.ld-wall,.ld-books,.ld-pile,.ld-pen,.ld-blotter,.ld-extra,.ld-dust,.ld-drawer,.ld-spot){display:none !important} .ld-desk{inset:0;border:0;box-shadow:none} .ld-dark{opacity:1;background:radial-gradient(ellipse 80% 70% at 50% 52%,rgba(4,3,2,0) 35%,rgba(3,2,1,.7) 100%)} .ld-scene .ld-lamp{left:2%;right:auto;top:10px;bottom:auto;width:92px;transform:none;z-index:1;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 6px 5px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,170,70,.45))} .ld-scene .ld-cup{right:3%;left:auto;top:12px;bottom:auto;width:92px;transform:rotate(-8deg);z-index:1} .ld-scene .ld-bag{left:-6%;right:auto;bottom:-14px;top:auto;width:150px;transform:rotate(26deg) scaleY(.74);transform-origin:50% 90%;z-index:0;opacity:.95} html.vc-art .ld-scene .auth-doc-wrap{position:relative;z-index:2;width:100%;padding:92px 12px 46px} html.vc-art .ad-pose{transform:rotate(-2.4deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 12px 14px rgba(0,0,0,.5))} html.vc-art .auth-doc{padding:38px 22px 28px} .auth-doc .ad-rim,.auth-doc .ad-face{clip-path:none !important;border-radius:3px} .auth-doc .ad-rim{transform:translate(3px,4px);background:linear-gradient(180deg,#d9d5ca,#b8b3a6)} .auth-doc .ad-face{background: url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat, linear-gradient(118deg,#fffefb 0%,#f9f6ee 60%,#eeeadf 100%)} .auth-doc .ad-face::before{background:linear-gradient(180deg,transparent calc(50% - 2px),rgba(70,45,15,.14) 50%,rgba(255,250,232,.4) calc(50% + 2px),transparent calc(50% + 6px))} html.vc-art .auth-doc::before,html.vc-art .auth-doc::after{display:block;content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;border-radius:3px;background:linear-gradient(160deg,#efebe0,#d8d3c6);box-shadow:0 2px 4px rgba(0,0,0,.35)} html.vc-art .auth-doc::before{transform:rotate(2.4deg) translate(7px,6px)} html.vc-art .auth-doc::after{z-index:-3;transform:rotate(-2deg) translate(-6px,9px);background:linear-gradient(160deg,#e3dfd3,#c6c1b3)} .auth-doc .ad-clip{position:absolute;top:-20px;left:6px;width:22px;height:62px;z-index:5;pointer-events:none} .auth-doc .ad-clip svg{display:block;width:100%;height:100%} html.vc-art .auth-doc .ad-fold{top:-14px;right:20px;width:46px;height:44px} html.vc-art .auth-doc .ad-fold::after{font-size:.85rem} html.vc-art .auth-doc{--ink:#2a1a0c} } @media (max-width:767px){.ld-scene :is(.ld-bag,.ld-cup){position:absolute;pointer-events:none}.ld-scene .ld-bag{width:130px;left:-5%}} @media (max-width:767px){.ld-scene .ld-cup{top:4px;right:2%;width:80px}.ld-scene .ld-lamp{top:6px;width:84px}} @media (max-width:767px){.auth-doc .ad-face::after{background:radial-gradient(ellipse at 50% 50%,transparent 66%,rgba(110,70,25,.16) 100%)} html.vc-art .ad-pose{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 10px 12px rgba(0,0,0,.45))}} /* มือถือ: พื้นโต๊ะเต็มพื้นที่ของแผ่น (ไม่มีขอบดำรอบฉาก) + แขนเล่นกาแฟเปิดใช้ */ @media (max-width:767px){ html.vc-art #authCard:has(#authLoggedOut:not([hidden])) .sheet-body{padding:0 !important;background:#120a05} html.vc-art .ld-scene{border-radius:0;margin:0;min-height:calc(100svh - 200px)} .ld-scene .ld-arm{display:block} } /* มือถือ: ย่อเอกสารเข้าสู่ระบบลง ~18% */ @media (max-width:767px){html.vc-art .ld-scene .auth-doc-wrap{zoom:1;width:100%;padding:96px 30px 50px} html.vc-art .ld-scene .auth-doc{padding:30px 17px 22px} html.vc-art .ld-scene .auth-doc .btns button{height:46px;min-height:46px} html.vc-art .ld-scene .auth-doc .ad-title{font-size:1.55rem} html.vc-art .ld-scene .auth-doc .ad-sub,html.vc-art .ld-scene .auth-doc .ad-fine{font-size:.78rem}} /* มือถือเท่านั้น: แผ่นเข้าสู่ระบบขยายขึ้นไปจนสุดขอบบนของหน้าจอ (ไม่เห็นหน้าเว็บเบลอด้านบน) */ @media (max-width:767px){ html.vc-art body.auth-open #authCard:has(#authLoggedOut:not([hidden])){top:0 !important;max-height:100vh !important;max-height:100dvh !important;height:100vh;height:100dvh;border-radius:0 !important} html.vc-art body.auth-open #authCard:has(#authLoggedOut:not([hidden])) .sheet-head{padding-top:calc(14px + env(safe-area-inset-top))} html.vc-art .ld-scene{min-height:calc(100svh - 120px)} } /* ฉากบังคับตอนล็อกอินสำเร็จ: มืด+เบลอรอบเอกสาร, มือเขียนชื่อผู้ใช้, ตรา "ได้รับการตรวจสอบแล้ว" */ .auth-focus{position:fixed;inset:0;z-index:10035;pointer-events:auto;cursor:progress; background:radial-gradient(ellipse 75% 80% at 50% 50%,rgba(14,8,4,.2),rgba(2,1,1,.66) 100%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} html.vc-art .auth-ghost .gv{border-bottom:1px solid rgba(25,25,27,.5);min-height:2.4em;display:block} html.vc-art .auth-ghost .gv .gw{display:inline-block;font-family:var(--font-display),"Taviraj",serif;font-style:italic;font-size:1.25rem;color:#2a1a3a;line-height:1.7;white-space:nowrap} html.vc-art .auth-ghost .gh-hand{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:6} html.vc-art .auth-ghost .gw2{font-size:1.15rem} html.vc-art .auth-ghost .auth-stamp{top:auto} html.vc-art .auth-stamp .as-ring b{font-size:1.12rem} /* ===== พิธีเซ็นรับรอง (The Signature Ritual): ตราขี้ผึ้ง VC จริง ไม่ใช่วงกลมแบบปุ่ม ===== */ html.vc-art .auth-doc .ad-fold{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3CradialGradient id='wg' cx='.36' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23c8463c'/%3E%3Cstop offset='.45' stop-color='%238e1d17'/%3E%3Cstop offset='1' stop-color='%234a0a07'/%3E%3C/radialGradient%3E%3CradialGradient id='wi' cx='.62' cy='.66' r='.75'%3E%3Cstop offset='0' stop-color='%23a8302a'/%3E%3Cstop offset='1' stop-color='%23651310'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M114.6 60.0 Q114.6 60.0 112.3 65.7 Q110.0 71.4 110.0 77.7 Q110.0 84.1 104.6 87.7 Q99.2 91.3 95.0 95.0 Q90.9 98.7 88.3 106.0 Q85.7 113.3 78.6 112.1 Q71.6 110.9 65.8 111.2 Q60.0 111.4 53.9 112.6 Q47.7 113.8 41.9 111.7 Q36.1 109.6 32.5 104.3 Q28.9 99.0 24.5 95.4 Q20.1 91.8 17.5 86.8 Q15.0 81.7 11.9 76.7 Q8.7 71.7 6.8 65.9 Q4.8 60.0 7.6 54.3 Q10.3 48.7 10.7 42.5 Q11.0 36.4 16.5 33.0 Q21.9 29.6 23.9 23.5 Q26.0 17.3 32.1 16.1 Q38.3 14.9 43.2 11.3 Q48.1 7.7 54.0 7.4 Q60.0 7.0 65.4 9.7 Q70.9 12.4 76.5 13.3 Q82.1 14.2 87.6 16.4 Q93.1 18.5 98.1 22.1 Q103.2 25.6 106.6 30.8 Q110.0 35.9 112.6 41.7 Q115.2 47.4 114.9 53.7 Z' fill='url(%23wg)'/%3E%3Cpath d='M114.6 60.0 Q114.6 60.0 112.3 65.7 Q110.0 71.4 110.0 77.7 Q110.0 84.1 104.6 87.7 Q99.2 91.3 95.0 95.0 Q90.9 98.7 88.3 106.0 Q85.7 113.3 78.6 112.1 Q71.6 110.9 65.8 111.2 Q60.0 111.4 53.9 112.6 Q47.7 113.8 41.9 111.7 Q36.1 109.6 32.5 104.3 Q28.9 99.0 24.5 95.4 Q20.1 91.8 17.5 86.8 Q15.0 81.7 11.9 76.7 Q8.7 71.7 6.8 65.9 Q4.8 60.0 7.6 54.3 Q10.3 48.7 10.7 42.5 Q11.0 36.4 16.5 33.0 Q21.9 29.6 23.9 23.5 Q26.0 17.3 32.1 16.1 Q38.3 14.9 43.2 11.3 Q48.1 7.7 54.0 7.4 Q60.0 7.0 65.4 9.7 Q70.9 12.4 76.5 13.3 Q82.1 14.2 87.6 16.4 Q93.1 18.5 98.1 22.1 Q103.2 25.6 106.6 30.8 Q110.0 35.9 112.6 41.7 Q115.2 47.4 114.9 53.7 Z' fill='none' stroke='rgba(255,170,150,.22)' stroke-width='1.2' transform='translate(-.6 -.6)'/%3E%3Ccircle cx='60' cy='60' r='39' fill='url(%23wi)' stroke='rgba(40,4,2,.55)' stroke-width='2.4'/%3E%3Ccircle cx='60.8' cy='60.8' r='39' fill='none' stroke='rgba(255,175,155,.35)' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='32' fill='none' stroke='rgba(255,190,170,.32)' stroke-width='1.4' stroke-dasharray='1.2 3.6'/%3E%3Ctext x='61' y='70.6' text-anchor='middle' font-family='Georgia,Times New Roman,serif' font-weight='700' font-size='29' fill='rgba(255,175,155,.45)'%3EVC%3C/text%3E%3Ctext x='60' y='69.4' text-anchor='middle' font-family='Georgia,Times New Roman,serif' font-weight='700' font-size='29' fill='%234e0806'%3EVC%3C/text%3E%3Cellipse cx='38' cy='30' rx='14' ry='7' fill='rgba(255,235,225,.22)' transform='rotate(-35 38 30)'/%3E%3C/svg%3E") center/contain no-repeat !important;border-radius:0 !important;box-shadow:none !important; filter:drop-shadow(0 3px 2px rgba(40,4,2,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.35))} html.vc-art .auth-doc .ad-fold::before,html.vc-art .auth-doc .ad-fold::after{display:none !important} html.vc-art .auth-stamp.wax{width:118px;height:118px;margin:-59px 0 0 -59px;mix-blend-mode:normal;opacity:0} html.vc-art .auth-stamp.wax svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 1px rgba(40,4,2,.6)) drop-shadow(0 5px 6px rgba(0,0,0,.3))} html.vc-art .auth-stamp.wax .wx-cap{position:absolute;left:50%;top:100%;margin-top:6px;transform:translateX(-50%);white-space:nowrap;text-align:center; font-family:var(--font-display),"Taviraj",serif;font-size:.86rem;font-weight:600;color:#7a1712;opacity:0;letter-spacing:.02em} html.vc-art .auth-stamp.wax .wx-cap small{display:block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;color:rgba(122,23,18,.75);margin-top:1px} .wx-shadow{position:absolute;width:126px;height:126px;margin:-63px 0 0 -63px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(40,6,2,.5),transparent);opacity:0;z-index:3} /* แสงหลักจากซ้ายบนลงที่เอกสาร ด้านขวามืดกว่า (ไม่ให้วงแสงฉากหลังเด่น) */ .auth-focus{background: radial-gradient(60% 70% at 38% 34%,rgba(255,196,120,.10),transparent 70%), radial-gradient(ellipse 75% 80% at 46% 50%,rgba(14,8,4,.25),rgba(2,1,1,.72) 100%), linear-gradient(90deg,transparent 55%,rgba(2,1,1,.25)) !important} .auth-skip{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:10050;padding:9px 16px;border-radius:999px;cursor:pointer; border:1px solid rgba(240,225,200,.35);background:rgba(20,14,10,.6);color:#f1e3c8;font:500 .78rem/1 var(--font-mono);letter-spacing:.12em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .auth-skip:hover{background:rgba(240,225,200,.15)} .auth-welcome{position:fixed;left:0;right:0;bottom:max(9vh,64px);z-index:10045;text-align:center;pointer-events:none;color:#f3e7cf;opacity:0} .auth-welcome small{display:block;font:500 .66rem/1 var(--font-mono);letter-spacing:.32em;color:rgba(232,205,150,.8);margin-bottom:10px} .auth-welcome b{display:block;font-family:var(--font-display),"Taviraj",serif;font-weight:500;font-size:clamp(1.3rem,2.4vw,1.9rem)} .auth-welcome span{display:block;margin-top:6px;font-size:.82rem;color:rgba(243,231,207,.7)} @media (max-width:767px){.auth-welcome{bottom:auto;top:max(4vh,env(safe-area-inset-top));}.auth-welcome b{font-size:1.15rem}} /* ===== The Living Document: เวทีโต๊ะดำจริง ไม่มีวงแสงขาวจากฉาก 3 มิติ ===== */ html.vc-ritual #vcBackdrop .hero-3d,html.vc-ritual .hero-3d{visibility:hidden !important} .auth-focus{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background: radial-gradient(48% 58% at 34% 26%,rgba(255,196,120,.16),transparent 70%), radial-gradient(ellipse 70% 78% at 48% 52%,rgba(20,13,8,.80),rgba(3,2,1,.97) 100%), url("data:image/svg+xml;utf8,") 0 0/900px 300px, #070504 !important} /* เอกสารเอียงตามมุมกล้อง + เงาสัมผัสบนโต๊ะ (ไม่ใช่ภาพแปะ) */ html.vc-art .auth-ghost .auth-doc-wrap{transform:perspective(1500px) rotateX(9deg);transform-origin:50% 75%} html.vc-art .auth-ghost .ad-pose{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 6px 6px rgba(0,0,0,.45)) !important} .gh-contact{position:absolute;left:4%;right:2%;top:7%;bottom:-3%;z-index:-1;pointer-events:none;border-radius:6px; background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.35) 70%,transparent);filter:blur(14px);transform-origin:50% 60%} /* แสงเฉียงผ่านขอบกระดาษ (ไล่จากซ้ายบน) */ .gh-rake{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:3px;mix-blend-mode:soft-light; background:linear-gradient(115deg,rgba(255,236,200,.55) 0%,rgba(255,236,200,.18) 30%,transparent 48%,rgba(30,15,5,.35) 100%) -60% 0/220% 100% no-repeat} /* หมึกเปียกตอนเขียน แล้วแห้ง */ html.vc-art .auth-ghost .gv .gw{color:#140a22;text-shadow:0 0 .6px rgba(20,10,34,.8);transition:color 1.2s,text-shadow 1.2s} html.vc-art .auth-ghost .gv .gw.dry{color:#2a1a3a;text-shadow:none} /* ตรา: ขี้ผึ้งแผ่ออก + แสงวาบบนผิวตรา */ .wx-spread{position:absolute;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;pointer-events:none;z-index:3; background:radial-gradient(closest-side,rgba(142,29,23,.55),rgba(142,29,23,.15) 70%,transparent)} html.vc-art .auth-stamp.wax{overflow:visible} .wx-glint{position:absolute;left:14%;top:-10%;width:30%;height:120%;pointer-events:none;border-radius:50%; background:linear-gradient(90deg,transparent,rgba(255,235,225,.55),transparent);mix-blend-mode:screen;opacity:0; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 62%);mask-image:none} .auth-sound{position:fixed;right:calc(max(18px,env(safe-area-inset-right)) + 92px);bottom:max(18px,env(safe-area-inset-bottom));z-index:10050;padding:9px 14px;border-radius:999px;cursor:pointer; border:1px solid rgba(240,225,200,.25);background:rgba(20,14,10,.6);color:rgba(241,227,200,.8);font:500 .72rem/1 var(--font-mono);letter-spacing:.1em} .auth-sound[aria-pressed="true"]{color:#f1e3c8;border-color:rgba(240,225,200,.5)} @media (max-width:767px){html.vc-art .auth-ghost .auth-doc-wrap{transform:perspective(1200px) rotateX(6deg)}} /* ===== รอบ 4: มือสมจริงขึ้น · สแกนเอกสาร · โต๊ะชาร์โคล + parallax ===== */ /* มือ: เอาขอบสติกเกอร์ออก ทอดเงาลงบนกระดาษตามทิศแสงซ้ายบน และรับแสงอุ่นเหมือนกระดาษ */ html.vc-art .auth-ghost .gh-real .ah-out{display:none} html.vc-art .auth-ghost .gh-real .gh-g{filter:drop-shadow(10px 14px 6px rgba(20,10,4,.38)) drop-shadow(22px 30px 18px rgba(0,0,0,.28)) saturate(.85) brightness(.96) contrast(1.04)} /* เส้นสแกนสีเงิน */ .gh-scan{position:absolute;left:3%;right:3%;height:2px;z-index:5;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(214,220,230,.95) 20%,#fff 50%,rgba(214,220,230,.95) 80%,transparent); box-shadow:0 0 10px rgba(210,218,230,.6),0 -14px 22px -6px rgba(210,218,230,.18)} .gh-hl{position:absolute;z-index:1;pointer-events:none;opacity:0;border-radius:3px;background:linear-gradient(90deg,rgba(214,200,150,.0),rgba(214,200,150,.28) 12%,rgba(214,200,150,.22) 88%,rgba(214,200,150,0));mix-blend-mode:multiply} /* เวทีโต๊ะชาร์โคล แสงอุ่นจากด้านซ้าย + parallax */ .auth-focus{background: radial-gradient(40% 70% at calc(4% + var(--px,0px)) calc(40% + var(--py,0px)),rgba(255,186,110,.16),transparent 70%), radial-gradient(ellipse 72% 80% at calc(48% + var(--px,0px)) calc(52% + var(--py,0px)),rgba(22,22,24,.82),rgba(4,4,5,.97) 100%), url("data:image/svg+xml;utf8,") var(--px,0px) var(--py,0px)/900px 300px, #08080a !important} .auth-welcome small{letter-spacing:.24em} .gh-scan{height:46px;margin-top:-44px;background:linear-gradient(180deg,transparent,rgba(150,165,190,.10) 60%,rgba(150,165,190,.22) 92%,rgba(120,135,165,.95) 96%,rgba(255,255,255,.9) 97.5%,transparent 100%) !important;box-shadow:none !important;border-radius:2px} /* ===== รอบ 5: กระดาษแปลงร่างเป็นหน้าพื้นที่ตรวจสัญญา · ปากกาบนโต๊ะ · ปิดด้วยชื่อแบรนด์ ===== */ .gh-report{position:absolute;left:4%;right:4%;top:3%;z-index:4;pointer-events:none;border-radius:2px;overflow:hidden;padding:18px 18px 12px; background:linear-gradient(118deg,#fffefb,#f6f2e8 70%,#ece6d8);box-shadow:0 1px 0 rgba(255,255,255,.8) inset;color:#24180e} .gh-report .rp-k{margin:0;font:500 .56rem/1 var(--font-mono);letter-spacing:.24em;color:rgba(60,45,30,.6)} .gh-report h4{margin:8px 0 2px;font-family:var(--font-display),"Taviraj",serif;font-weight:600;font-size:1.25rem;color:#1d130a} .gh-report .rp-m{margin:0 0 12px;font-size:.72rem;color:rgba(40,28,16,.65);padding-bottom:10px;border-bottom:1px solid rgba(70,50,25,.25)} .gh-report .rp-row{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:2px 8px;padding:7px 0;border-bottom:1px dashed rgba(70,50,25,.18);font-size:.76rem} .gh-report .rp-row b{font:600 .66rem/1 var(--font-mono);color:#7a1712} .gh-report .rp-row i{grid-column:2;height:5px;width:var(--w);border-radius:3px;background:linear-gradient(90deg,rgba(60,45,30,.22),rgba(60,45,30,.08));transform-origin:0 50%} .gh-report .rp-ok{margin:10px 0 0;font:500 .66rem/1 var(--font-mono);letter-spacing:.12em;color:#2f6b3c} .gh-report .rp-edge{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#dfe4ec 25%,#fff 50%,#dfe4ec 75%,transparent);box-shadow:0 0 8px rgba(210,218,230,.7)} html.vc-art .auth-ghost .auth-stamp.wax{z-index:6} .gh-pen{position:absolute;right:-34%;bottom:4%;width:62%;pointer-events:none;z-index:-1;transform-origin:30% 50%; filter:drop-shadow(8px 16px 6px rgba(0,0,0,.6)) drop-shadow(18px 30px 16px rgba(0,0,0,.4)) brightness(.9)} .gh-pen svg{display:block;width:100%;height:auto;overflow:visible} .auth-welcome .wl-brand{font-family:var(--font-display),serif;font-weight:500;letter-spacing:.32em;font-size:clamp(1.2rem,2.2vw,1.7rem)} @media (max-width:767px){.gh-pen{display:none}.gh-report{padding:14px 14px 10px}.gh-report h4{font-size:1.05rem}} /* ===== รอบ 6: Ink Physics · Light as a Story · The Vellum Frame ===== */ .ink-bead{position:absolute;z-index:5;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 35% 35%,#5a4a78,#140a22 60%);box-shadow:0 0 2px rgba(20,10,34,.6);transition:opacity .25s} .ink-blot{position:absolute;z-index:4;margin:-3px 0 0 -3px;border-radius:50% 46% 52% 48%;pointer-events:none;background:radial-gradient(circle at 40% 40%,#2a1a3a,#140a22 70%,rgba(20,10,34,.4))} html.vc-art .auth-ghost .ad-sign ~ svg path,html.vc-art .auth-ghost svg path{stroke-linecap:round} /* แสงเล่าเรื่อง: เริ่มมืด ค่อยเปิดตามการเขียน แสงเฉียงต่ำตอนตราลง แล้วสงบ */ .ls-shade{position:absolute;inset:-2px;z-index:7;pointer-events:none;border-radius:3px; background:radial-gradient(ellipse 85% 75% at 30% 28%,rgba(10,6,3,.25),rgba(10,6,3,.92) 100%)} .ls-rake{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;mix-blend-mode:soft-light;border-radius:3px; background:linear-gradient(160deg,rgba(255,226,170,.75) 0%,rgba(255,226,170,.15) 35%,transparent 55%,rgba(20,8,2,.45) 100%)} /* กรอบเส้นคู่ของเอกสาร ขยายกลายเป็นกรอบหน้าเว็บ */ .vf-frame{position:fixed;z-index:10046;pointer-events:none;box-sizing:border-box;border:1px solid rgba(214,182,110,.75); box-shadow:0 0 0 4px rgba(0,0,0,0),inset 0 0 0 4px transparent,inset 0 0 0 5px rgba(214,182,110,.4);transform-origin:50% 50%} html.vc-art.vf-glow :is(#authCard,#checkCard,#resultCard,.site-header){box-shadow:inset 0 0 0 1px rgba(214,182,110,.6) !important;transition:box-shadow .5s ease} html.vc-art :is(#authCard,#checkCard,#resultCard,.site-header){transition:box-shadow 1.1s ease} /* ===== รอบ 7: The Focus Pull · The Architectural Grid · The Signature Lock ===== */ .fp-blur{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;border-radius:3px; -webkit-backdrop-filter:blur(1.8px);backdrop-filter:blur(1.8px); -webkit-mask-image:radial-gradient(circle var(--fr,140px) at var(--fx,50%) var(--fy,40%),transparent 35%,#000 100%); mask-image:radial-gradient(circle var(--fr,140px) at var(--fx,50%) var(--fy,40%),transparent 35%,#000 100%)} .ag-line{position:fixed;z-index:10046;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(214,182,110,.8) 12%,rgba(214,182,110,.8) 88%,transparent)} .ag-line.ag-v{width:1px;height:0;background:linear-gradient(180deg,transparent,rgba(214,182,110,.6) 15%,rgba(214,182,110,.6) 85%,transparent)} @media (prefers-reduced-motion:reduce){.fp-blur{display:none}} /* ลบ: เบลอบนเอกสาร (Focus Pull) และเส้น/กรอบสีทองตอนจบ */ .fp-blur,.ag-line,.vf-frame{display:none !important} html.vc-art.vf-glow :is(#authCard,#checkCard,#resultCard,.site-header){box-shadow:none !important} /* ===== Motion pass (31 ต.ค.): เงาแบบคงที่แทน filter บนทั้งแผ่น · ปากกาเป็นเลเยอร์แยก ===== */ html.vc-art .auth-ghost .ad-pose{filter:none !important;animation:none !important} html.vc-art .auth-ghost .auth-doc{box-shadow:0 1px 1px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.42)} html.vc-art .auth-ghost .gh-sig{position:absolute;overflow:visible;pointer-events:none;z-index:4} .gh-penw,.gh-pensh{position:absolute;left:0;top:0;width:206px;height:28px;margin:-14px 0 0 0;transform-origin:0 50%;pointer-events:none;will-change:transform;z-index:8} .gh-penw .pn{display:block;width:100%;height:100%;overflow:visible} .gh-pensh{z-index:7;border-radius:14px 30px 30px 14px;height:16px;margin-top:-8px;background:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.55) 12%,rgba(0,0,0,.45) 90%,rgba(0,0,0,0));will-change:transform,opacity} html.vc-art .auth-ghost .ink-bead{will-change:transform,opacity;transition:opacity .2s} .ls-shade{will-change:opacity} .gh-report .rp-edge{top:0} html.vc-art .auth-ghost .gh-pen{display:none} @media (max-width:767px){.gh-penw,.gh-pensh{z-index:8}} /* ===== Unlock Burst: เอกสาร → บัญชีของฉัน (แสงรัศมีหลากสี + ดาว + ตราเรืองแสง) ===== */ .ub-wrap{position:fixed;left:50%;top:50%;width:0;height:0;z-index:10047;pointer-events:none;will-change:transform,opacity} .ub-rays{position:absolute;left:-90vmax;top:-90vmax;width:180vmax;height:180vmax;will-change:transform,opacity} .ub-ray{position:absolute;inset:0;border-radius:50%;opacity:0;will-change:opacity; background:radial-gradient(circle,var(--c) 0%,color-mix(in srgb,var(--c) 55%,transparent) 8%,transparent 46%), repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 85%,#fff) 0deg 5deg,transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle,#000 0%,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 0%,#000 18%,transparent 62%)} .ub-core{position:absolute;left:-120px;top:-120px;width:240px;height:240px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.7) 25%,transparent 70%)} .ub-star{position:absolute;margin:-.5em 0 0 -.5em;line-height:1;color:#fff;text-shadow:0 0 8px #fff,0 0 16px #8ff;opacity:0;will-change:transform,opacity} .ub-badge{position:absolute;left:0;top:0;width:150px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translate(-50%,-50%)} .ub-badge svg{position:relative;width:118px;height:118px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))} .ub-glow{position:absolute;left:50%;top:59px;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%} .ub-badge b{position:relative;font-family:var(--font-display),"Taviraj",serif;font-weight:600;font-size:1.25rem;color:#fff;white-space:nowrap} .ub-badge span{position:relative;font:500 .7rem/1 var(--font-mono);color:rgba(255,255,255,.75);white-space:nowrap} @media (max-width:767px){.ub-badge svg{width:96px;height:96px}.ub-glow{top:48px;width:80px;height:80px;margin:-40px 0 0 -40px}} .ub-badge b,.ub-badge span{padding:2px 12px;border-radius:999px;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.35) 70%,transparent)} .ub-badge b{text-shadow:0 2px 6px rgba(0,0,0,.8)} /* ===== Seal Iris: เอกสาร → บัญชีของฉัน (เรียบ ไม่จ้า) ===== */ .si-iris{position:fixed;z-index:10044;pointer-events:none;border-radius:50%;opacity:0;will-change:transform,opacity; box-shadow:0 0 0 400vmax #060504,inset 0 0 18px 10px #060504} .si-seal{position:fixed;z-index:10048;pointer-events:none;will-change:transform,opacity} .si-seal svg{display:block;width:100%;height:100%} /* ===== รายละเอียดพรีเมียม: เลขที่เอกสาร · ตราติดรูปโปรไฟล์ ===== */ html.vc-art .auth-ghost .gh-serial{position:absolute;z-index:5;margin:0;white-space:nowrap;pointer-events:none; font:500 .62rem/1 var(--font-mono);letter-spacing:.06em;color:rgba(40,28,18,.78)} #authLoggedIn .acct-avatar{position:relative;overflow:visible !important} #authLoggedIn .acct-avatar .av-seal{position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))} #authLoggedIn .acct-avatar .av-seal svg{display:block;width:100%;height:100%} /* ลายมือหมึกซึม: อีเมลที่มือเขียนในพิธีเข้าสู่ระบบ */ html.vc-art .auth-ghost .gv .gw{font-family:"Charmonman","Newsreader","Taviraj",cursive !important;font-style:normal !important;font-weight:700;font-size:1.5rem;letter-spacing:.01em;line-height:1.5} html.vc-art .auth-ghost .gv{min-height:2.6em} @media (max-width:767px){html.vc-art .auth-ghost .gv .gw{font-size:1.3rem}} /* ===== ภาพถ่ายจริง (31 ต.ค.): โต๊ะไม้ · กระดาษ · ปากกา (ไฟล์ใน public/img/) ===== */ /* โต๊ะ: ไม้จริง + แสงตะเกียง + มืดลงให้เข้ากับฉาก */ html.vc-art .ld-scene .ld-desk{background: radial-gradient(40% 46% at 18% 24%,rgba(255,176,96,calc(.22 * var(--on))),transparent 70%), linear-gradient(rgba(8,5,3,.28),rgba(8,5,3,.28)), var(--vc-img0) center/cover no-repeat #1a110b !important} /* เวทีพิธีเข้าสู่ระบบ: ไม้เดียวกัน มืดกว่า */ .auth-focus{background: radial-gradient(48% 58% at 34% 30%,rgba(255,190,120,.10),transparent 70%), radial-gradient(ellipse 72% 80% at 48% 52%,rgba(10,7,5,.55),rgba(3,2,1,.93) 100%), var(--vc-img0) center/cover no-repeat #070504 !important} /* กระดาษ: ผิวกระดาษจริง + เส้นกรอบบางๆ เดิม */ html.vc-art .auth-doc .ad-face{background: url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat, var(--vc-paper) center/100% 100% no-repeat #e6d6bf !important} html.vc-art .auth-doc .ad-face::after{background:radial-gradient(ellipse at 50% 50%,transparent 66%,rgba(80,55,30,.18) 100%) !important} html.vc-art .auth-doc .ad-rim{background:linear-gradient(180deg,#cdbca0,#a8977a) !important} html.vc-art .auth-doc::before{background:linear-gradient(160deg,#e3d3ba,#c9b797) !important} html.vc-art .auth-doc::after{background:linear-gradient(160deg,#d8c7ab,#bba886) !important} /* ปากกา: ภาพจริง ปลายปากกาอยู่ที่จุดหมุน (0, 8.9px) */ .gh-penw{height:auto !important;margin:-8.9px 0 0 0 !important;transform-origin:0 8.9px !important} .gh-penw .pn{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none} .gh-pensh{height:14px !important;margin-top:-7px !important;transform-origin:0 50% !important} :root{} /* ตราขี้ผึ้งซ้ำ: ซ่อนตราเล็กมุมกระดาษ (เหลือตราที่ประทับตอนเข้าสู่ระบบอันเดียว) */ html.vc-art .auth-doc .ad-fold{display:none !important} /* ตัดแสงวิบวับที่วิ่งผ่านตราขี้ผึ้ง */ .wx-glint{display:none !important} /* ===== Beauty pass (31 ต.ค.): เอกสารแบบหัวจดหมายทางการ · หมึกน้ำเงินดำ · ปุ่มพิมพ์นูน · แสงเงาตามตะเกียง · เกรนฟิล์ม ===== */ /* หัวเอกสาร: จัดกลาง มีตราประจำแบรนด์เล็กๆ และเส้นคู่คั่นแบบเอกสารกฎหมาย */ html.vc-art .auth-doc .ad-kicker{display:flex !important;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:0 0 10px !important; letter-spacing:.32em !important;font-size:.58rem !important;color:rgba(60,42,24,.72) !important} html.vc-art .auth-doc .ad-kicker::before{content:"";width:26px;height:30px;opacity:.78; background:url("data:image/svg+xml;utf8,VC") center/contain no-repeat} html.vc-art .auth-doc .ad-title{text-align:center !important;letter-spacing:.02em;margin-top:0 !important;color:#24170c !important} html.vc-art .auth-doc .ad-sub{text-align:center !important;max-width:30ch;margin-left:auto !important;margin-right:auto !important;color:rgba(50,36,22,.72) !important; padding-bottom:14px;margin-bottom:16px !important; background:linear-gradient(rgba(70,50,28,.45),rgba(70,50,28,.45)) 50% calc(100% - 3px)/62% 1px no-repeat,linear-gradient(rgba(70,50,28,.3),rgba(70,50,28,.3)) 50% 100%/62% 1px no-repeat} /* ป้ายช่องกรอก: ตัวพิมพ์เล็กระยะห่างกว้างแบบแบบฟอร์มราชการ */ html.vc-art .auth-doc .ad-lab{letter-spacing:.2em !important;color:rgba(60,42,24,.7) !important} /* หมึก: น้ำเงินดำแบบหมึกปากกาหมึกซึม (เอกสารจริงและฉากพิธี) */ html.vc-art .auth-doc :is(#email,#password){color:#1b1a33 !important} html.vc-art .auth-ghost .gv,html.vc-art .auth-ghost .gv .gw{color:#1b1a33 !important} html.vc-art .auth-ghost .gv .gw.dry{color:#232448 !important} html.vc-art .auth-ghost .gh-sig path,html.vc-art .ad-hand .ah-ink{stroke:#1d1c3a !important} /* ปุ่ม: แบบพิมพ์นูน (letterpress) แทนกล่องทึบ */ html.vc-art .auth-doc button.primary{background:linear-gradient(180deg,#3a2716,#24170c) !important;color:#f1e6cf !important;border:1px solid #1a1008 !important; box-shadow:inset 0 1px 0 rgba(255,235,200,.18),inset 0 -2px 0 rgba(0,0,0,.35),0 1px 0 rgba(255,250,235,.5),0 2px 4px rgba(40,25,10,.35) !important;letter-spacing:.04em} html.vc-art .auth-doc :is(button.ghost,.google-btn){background:rgba(255,250,238,.18) !important;color:#2a1c0f !important;border:1px solid rgba(60,42,24,.42) !important; box-shadow:inset 0 1px 2px rgba(60,40,20,.18),0 1px 0 rgba(255,250,235,.55) !important} html.vc-art .auth-doc .or-line{letter-spacing:.3em !important;color:rgba(60,42,24,.55) !important} html.vc-art .auth-doc .ad-fine{text-align:center !important;font-size:.66rem !important;letter-spacing:.04em;color:rgba(60,42,24,.55) !important} /* แสงเงาสอดคล้องกับตะเกียงซ้ายบน: เงาทอดไปทางขวาล่าง */ @media (min-width:768px){ html.vc-art .ld-scene .ad-pose{filter:drop-shadow(2px 3px 2px rgba(0,0,0,.55)) drop-shadow(18px 24px 22px rgba(0,0,0,.5)) brightness(calc(.84 + .16 * var(--on))) !important} html.vc-art .ld-scene .ad-pose.is-hover{filter:drop-shadow(3px 5px 3px rgba(0,0,0,.5)) drop-shadow(26px 38px 34px rgba(0,0,0,.55)) brightness(calc(.9 + .1 * var(--on))) !important} } html.vc-art .auth-ghost .auth-doc{box-shadow:1px 2px 2px rgba(0,0,0,.5),14px 20px 26px rgba(0,0,0,.42) !important} /* แสงตะเกียงตกบนกระดาษ (ซ้ายบนอุ่น ขวาล่างเย็นลง) */ html.vc-art .auth-doc .ad-face::after{background: radial-gradient(120% 90% at 0% 0%,rgba(255,214,150,.16),transparent 55%), radial-gradient(ellipse at 50% 50%,transparent 62%,rgba(70,48,26,.2) 100%), linear-gradient(135deg,transparent 55%,rgba(30,20,10,.1)) !important} /* เกรนฟิล์มนิ่งบางๆ ทั้งฉาก (ภาพนิ่ง ไม่ขยับ จึงไม่กินเครื่อง) */ .ld-scene::after,.auth-focus::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;opacity:.07;mix-blend-mode:overlay; background:url("data:image/svg+xml;utf8,") 0 0/180px 180px} :root{} /* ===== ภาษาเดียวกันทั้งเว็บ (31 ต.ค.): หัวเอกสาร ตราโล่ เส้นคู่ หมึกน้ำเงินดำ บนหน้าบัญชีและหน้าตรวจสัญญา ===== */ :root{--vc-rule:rgba(201,191,174,.42);--vc-rule2:rgba(201,191,174,.22);--vc-ink:#1b1a33} /* หัวข้อส่วน: ตราโล่เล็ก + ชื่อแบบเซอริฟ + เส้นคู่ใต้หัวข้อ */ html.vc-art :is(#authCard .sheet-head h2,#checkCard .step-head h2,#resultCard > h2){position:relative;display:flex !important;align-items:center;gap:10px; font-family:var(--font-display),"Taviraj",serif !important;font-weight:500 !important;letter-spacing:.02em;padding-bottom:12px !important; background:linear-gradient(var(--vc-rule),var(--vc-rule)) 0 calc(100% - 3px)/100% 1px no-repeat,linear-gradient(var(--vc-rule2),var(--vc-rule2)) 0 100%/100% 1px no-repeat !important} html.vc-art :is(#authCard .sheet-head h2,#checkCard .step-head h2,#resultCard > h2)::before{content:"" !important;display:block !important;flex:none;width:18px;height:21px;opacity:.85;position:static !important; background:url("data:image/svg+xml;utf8,VC") center/contain no-repeat !important;border:0 !important;box-shadow:none !important;transform:none !important} html.vc-art #checkCard .step-head{align-items:flex-end} /* ช่องวางสัญญา: กระดาษจริงเดียวกับเอกสารเข้าสู่ระบบ + กรอบเส้นคู่ + หมึกน้ำเงินดำ */ html.vc-art #input{background: linear-gradient(transparent calc(100% - 1px),transparent 0) , var(--vc-paper) center/cover no-repeat,#e9dcc6 !important; color:var(--vc-ink) !important;caret-color:var(--vc-ink); border:1px solid rgba(90,70,45,.5) !important;outline:1px solid rgba(201,191,174,.28);outline-offset:4px; box-shadow:inset 0 0 0 4px rgba(233,220,198,.0),inset 0 0 0 5px rgba(90,70,45,.22),2px 4px 3px rgba(0,0,0,.45),14px 20px 30px -10px rgba(0,0,0,.6) !important} html.vc-art #input::placeholder{color:rgba(60,42,24,.5) !important;font-style:italic} html.vc-art #input:focus{outline-color:rgba(201,191,174,.6) !important;box-shadow:inset 0 0 0 5px rgba(90,70,45,.3),2px 4px 3px rgba(0,0,0,.45),14px 20px 30px -10px rgba(0,0,0,.6) !important} /* ตัวเลขเครดิต: ตัวเลขแบบเซอริฟสีกระดาษ */ html.vc-art #authLoggedIn :is(#walletTotal,#walletRowCheck,#walletRowVoice){font-family:var(--font-display),"Newsreader",serif !important;font-weight:400 !important;color:#ece3d2 !important} html.vc-art #authLoggedIn .cred-title{font-family:var(--font-display),"Taviraj",serif !important;letter-spacing:.02em} html.vc-art #authLoggedIn .acct-row{border-bottom:0 !important;padding-bottom:16px !important; background:linear-gradient(var(--vc-rule),var(--vc-rule)) 0 calc(100% - 3px)/100% 1px no-repeat,linear-gradient(var(--vc-rule2),var(--vc-rule2)) 0 100%/100% 1px no-repeat} /* ปุ่มเติมเครดิต / ปุ่มหลักในพื้นที่ทำงาน: แบบพิมพ์นูนสีกระดาษ */ html.vc-art :is(#authLoggedIn .wallet-topup,#checkCard button.primary,#checkCard #checkBtn){background:linear-gradient(180deg,#f1e7d4,#ddd0b8) !important;color:#24170c !important; border:1px solid rgba(90,70,45,.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(90,70,45,.18),0 2px 6px rgba(0,0,0,.4) !important} /* ผลการตรวจว่าง: วงตราเส้นประรอประทับ */ html.vc-art #resultCard .empty-art{position:relative} html.vc-art #resultCard .empty-art::after{content:"";position:absolute;left:50%;top:50%;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%; border:1.5px dashed rgba(201,191,174,.35);box-shadow:0 0 0 6px transparent,0 0 0 7px rgba(201,191,174,.14);pointer-events:none} html.vc-art #authCard .sheet-head h2{flex-wrap:wrap} html.vc-art #authCard .sheet-head h2::after{flex-basis:100%;margin-top:2px} /* ===== พิธีประทับตราจริง: หยดขี้ผึ้ง · ตราทองเหลือง · เงาตามความสูง ===== */ html.vc-art .auth-ghost .wx-pool{position:absolute;z-index:3;pointer-events:none;opacity:0;border-radius:47% 53% 51% 49%/52% 46% 54% 48%; background:radial-gradient(circle at 38% 32%,#d9574a 0%,#a3241c 38%,#6e120d 78%,#4a0806 100%); box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,170,150,.35),0 2px 3px rgba(40,4,2,.45)} html.vc-art .auth-ghost .wx-tool{position:absolute;z-index:7;pointer-events:none;opacity:0;will-change:transform,opacity} html.vc-art .auth-ghost .wx-tool svg{display:block;width:100%;height:100%} html.vc-art .auth-ghost .wx-tsh{position:absolute;z-index:6;pointer-events:none;opacity:0;border-radius:50%;will-change:transform,opacity; background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 65%,transparent)} html.vc-art .auth-ghost .wx-shadow{display:none !important} /* เกรนฟิล์ม: ตัดจากพิธี (ผสมสีทั้งจอทุกเฟรมหนักเกินไป) และบนโต๊ะใช้แบบไม่ผสมสี */ .auth-focus::after{display:none !important} .ld-scene::after{mix-blend-mode:normal !important;opacity:.035 !important} /* หยดขี้ผึ้งแบบสมจริง (นูน ขอบเป็นคลื่น เงาสะท้อนตามแสงซ้ายบน) แทนวงกลมแบบการ์ตูน */ html.vc-art .auth-ghost .wx-pool{border-radius:0 !important;box-shadow:none !important; background:url("data:image/webp;base64,UklGRvIVAABXRUJQVlA4WAoAAAAQAAAAxwAAxwAAQUxQSGsIAAAB8Dz9n+O22bZ1g+ZAASgqka4i6FUOCA7wmmmvnCXnuGMBTqsz5/MkSjtHUuUIpTP8AQxYn0oAFc64OgknBZxgOGUMT6F/XdU9M8D09O/HnSsiZMG2GrbRAwmEFDVtd20sEdFv9kPNxAOJdq3j2yBcc7aOvvySopdHtyZ6qFY446l84dPayrKildqn7x15fKvn7dBL/UfKVxsygKD+19JoH8ED4o/9vC6kFOAjIaR0r5SGiVU4c/ZXmhIEyEABoJRJNYBSQ+/+ql8LVoRHGXsg7rkTdHFboEjfVwMI0DoOaP1rtph2OtzUAqcjRw+ydjVANucLeXXVDKCtj2cVpbw/fXr0EKQvNY2r50svvuSjFyfPL9RqC1++8Wx2cw/jnCi9y2mUIt3lAHKlprsrjbn3jqQ4FXLD/k5691OLjv/KvT9zUS8fScUYp8A2fEH6dANdART07wOUcmqXQ0F17wkXhIySACRUC49yzpHrvRPf6d5oWQixfCaH/ILJY09XfLaoje5fDvdrbwOvTH3a8srIjdCu//wxB7ESO1yX3kE2GJvzhbQT5Gxgk2XhLVYYpWzOFZ5JMYy+EvdJm5TGVe1bJBKJpOPvwiLbvn5bRgmvb/Hx1NR0MZ/x+n0cBfJXlbSLgvyqxtWqx+9zECicOYWGYd2osyH8fl8x7SCQuXklrSXw+X3NSlH5GLbj2YbssrLtf6ryMaxfJntjVcF6Usra2RzjVsuhL++qgoHBPZe1G5ma7kGhwNqZR61Wx/6h2jioLZcLcYvlpt+2VMEiRHX3PfYicTKgjWKy9zYzbi2mVBsNCTmXtRgfYwLI28/ai+wcLriTW601P9dQwNQ8/zjjluLlFWS4mrcWLy6jgoRG0bGTOX9dV6jEdJJxm706TIM/TliK3IIUyDCXtRTZqsRWNZ6z0xw7vIgOKy8ybucSDQiJDP97O25l+1Bd9SBjmH3IOsEZy/3Fu2KGa6qFrF3gXJezri7YmotHeiyzsC3DZ12PDZsQtjz7cK/F2TY6eSVYp/bZh3PvfruOJHJlcMH27GODZVMi+2zpvI4kgg6F0GcfbYnfP/676dmGq/9dddTIfPbhqjW0592Zf7W8e6E+C1JRPxyLUm59/HB58Y43ZMBvQStEORWV4CyW+tGFuvDsUhFAQouoms6u8g3ftg4FAGhHJfijhaqUXVjo7eZPnFkWnTeCCe7mLFnqdKelups7B67LdlAhu5uzdMXgdYWy9TPOnGLTYC++9bNIdoEJEnMZxqPcBaZk4mYhjmoX2Or9/OqumNmFGM86JUks5CmTk3CWrQX2EHTvMoyAiqB71yDj6wAkyPqzG4yDKpO4MMxi6wLk2ol+4xVZY777cT/j6wBAyJs/2sK5URDWeW2YGQVlaktHg60DkCDdc1n7KzTRYGefiPF1AFLA2qcmHLyeI/VA0OXgPdsbljlLvK9X/Mjj9uX9vSw0piWBAJC1/Ru4yeg00u7DysPj6wCkAPfEvWYr0jy8CTVBeNBoqjwdCw8iRUvfvUJg6yfdgLBlglDVaI1MSCHKQ4yHjHqkU+wLgxeX6QTIlZdCVauUojW5JYR536ICnc3zaca7xn3nSMVCNgQ2f0QoQFbDIHlSCkqrXAhs+m2L0ApmHgzj2o3/i8wmyDvvxsM4EvfPSgAq24t7Qj37xAtNMj1tODUU7okhMycFjYNEdVfMwH43gWjL6wccI/EHFD5Ql5KMm4gHoe8p1D2b40bicwCoe0X90ydMrJLznI5zJu1LysvPpsxsWtgbd27PCSWV/eZiXHJ/uWsn23NiTNxY4ezQV7JNEIPvBB+jYSEDP7khBUGXFXCvlIyfqNT/U8VAjvXbEyN9jJuOY+v/8Q1JCoSA5vyEbzHZNP/kO0I69WZQVZ+jFMUZJDE2eIoQk5DflXc6kX1CoGdXFQCo0G/8JBXlCYnKwyPCpErYOBBDHh4N+k89JUoeuSIpgE+PlvomCRD6Fd4SrRhdwN8tRHmQxVjk6NPdJHx4JnrydJOxbxd9twTccj5vh+Ts2duoAdAs9oaRdH5eAEDOp40WutbRQDYLjiqWcHpeAiD/lIYt7CBeaRbw36KjYI+YkwJtf8V0f/iYNikAbZya6reI7tmtn3/Qxg3aRXHdjTqO0yJTRnWjj6sl+94lwBfnbJ6p2YsBsPQ0UO5ZIaBEj3yFAJ9up/KEPokHT/n+rEe3VNVnemOK3WTcXvT/HM2EIG9MOAr28mN6QizrMgN2n78c1xNiWZcJ0CmfEIyty0S/qknB2SJ2rNms2W8SPmm9OC/sh8AgGYs/W5eA4ywk+8WgzgxhN/7/hZJoMnVYHpv9RozjyZxi9+growwFGLNdQKvUxzimzEIWt/81hivTUxvsXSebfYBxRJm3bnRvgqDMZ1Ge8YKIBrqNeOnghANgXUU2HvGiOUSOoKmPzy0KpUSzx+IooGKtCgh+fUDOJk1Dh8t1YZ4BwLvHgot/Um/7csx6X79a+zQwhxbjg89eliCM25Y9eyzIeCAg56/v9SPbnMBEpr48tMKoEYTry5aCzZDKF6anPDRdyHuiRjskltV5gb+TwvzJFUhzYicTHko63WYw2/GTG0o1epJIH/4c5ZyHuZ4ajiRCnzM+5PUUzEUSkZZ1uv/HZhgi07Hd4Qx8XREQ10UaD0xUvg9nBKW1KhMDVhbrtp6ePrvWPXvej/jqk7yjCoGUK133+BxdJtS7s1g+nOJU/iUMyQOVpjecvFNOQNn698y7e4Y4oVnmnXTx05rr8WSDcjSu/udPvxm/Xz/nkKkx7XNsGymdr/2zFZAzs/z6S/uGNgTcuylV2NZ0Zux3J6d8OUyHOOvCQuWUeqZNyYCcsmT/6RgdXFi7xuJ2BdkPsBEDAFZQOCBgDQAAsEgAnQEqyADIAD49HoxEoiGhEejU4CADxKbt1eHbk/iO3bB55H8qPbCtj+d/GvQCnR7bf433LdtX7sPcG/UTqGfsz6iv51/c/9x/evaR/zvsg9AD+ef4D/2dhP6A37LerJ/wP2R+CD9qf3K+Aj+Yf2D/qfn/8gHoAegB6b/CD8Se5D0xXwDGV1yUjO975dMKrk7r5pdPmnlc+yn/feP36d9gT+X/1r/meud7IP279h79ZR3JTnqjllDSZNcaeYtA0c+rmo/+iX02mNxBmaGVogf5QaTQqUK8qeeMBy4C72DcJCT3UJA8hcic6R6IljCZxDNnKnHvJXFO+gXACh0dLZcuaBIpLFqwxzH2wiPCN6CFB3vC0L+gi9hlcDoMZHviyBC4MNRVmAwKeY8TQMiiKzgq5gLS5pr/dQD0kEJJUOhIylT2gxnf//8XkNgKRblWycg+SF/YBz8+W5KXrtb8GcAPH/OVlTJdJ/y4ejb7wOvu9zkifDsuomqXUBpr19UEaz35PSVlWvMVFSk5ZRs5G1wHDPF3As8bjPz/p8E+eaitXpSqFWotIOYuX92lLU7eteu/ULi30KaZ/Cxrersw9CH8W34MLl/8BksdjgjGy7MCr1LWfMZgQSg+rJFqvFxJ9aUEFtJg/9dnb0U3IIb6c5qywBLcgVwJOhhB6LdbiMUCiIEBa6MXUSybKlfoGUzAFd76O0LmfEPhpiyV7HgLMVZErGtFz7gbwCC6oknB6Jks4VLV+uQJejER9p8uP/4obSGPTqvq7u8SHSRyPwAA/v58lEp+rK1D1wL/yfiUC2n/+6skJ8ucs0rql/6iq4e5/cvWCaUNhxYtpnhR8zZFCHdtj9TQHv0m2vY7pVUln/lWK+4MzqNckKvcgKNO9Lr72LXta+jprtK4Je7q34aBhSJ3GtKqx6u0igAFF/5iGKBlFDxVSBk54VzX/IIlco6+qy0RV9GwkMJ3HQ5GQCm8vj4yHh73kQ7V/5Qhg7dx9XFBHNBffo9k9uS9O2Gnhe73J+B7jmTlzHY/KWTTV75zakdoqZIHbJSR22wVrxY1TzQlzS4G4YIJm2CoODmlPHuuN30/8dj3wUh4ym4XdSgLalVj6vGs2jqzxO0o95QgrLlG4Mh3B4TPCUi8YURamwkPcr3R4YTRI3AW9YxQUH/q/qtWtOpSKqnRUdxxWWpx7ZV2kl0hB6EzmC8bY/Cn33rV0HvW9oL848H+vHNJdUNJl3HiL0zcJsa+M5XG4Kp0akzZfg6o9jm/pPRJZzyFxsKrqhkzcmsYTXjurOrt+B0tm1s+5RB4nCnYAvEWMvvX7EwGn/lirts/phi1Uhj7HFY+/13Re3tkWkhXYsp0y+Zx5mZ6zv3LN5Oa9f61sRUkhx1mY5jIvnGzt3WkIPf2tIeBnhkoHNDAdtSpqk1EN/sMyeRH/i/UAR/0WzL1IFjqhtvyDgH1tkD/bKJmLdOKVoCX1HI63xeaOgzayg7k8xJ67BI7+t/EwNhKTr+MvO5PqnOXKGU9LFga4WFG+zu77MDUuEu/Bjxkb2i/rx/k/gQXdId8xRYgsiw1a1dz2vATywck8doE1tCoTtToe1NDVx6+seDE9/OPKXTimweMUinfTZ+bJ6mif+sF+OpjU0e8JQ4wrpKkBQc4+fS3Lb0w8SyAEcG+dDkSnOjqwPyYexZA34IUuH2ZXB3/tA3u7kXn6dyBnE0jmbHxGXvt6dJ9BiMuEzybHsHpjSoLpqKqNv+khb2Qb1Ww2r7qOv8HUNz5nAAjlE7HCa8JBIu7s0FeynG9b051ZJt0Fc6oaGEDFcziJm3vtXE5jGE1ARhSw8sYnAfFz6Od4OjUS41I4R/0I5NbdfLdKZMn+f0ncySyPp8zG27e1VV/nvug+8F4f1mtb1Led7Zz8pRXJCPTVL3LXRv201h9Ira77ug2j6CYqISneoLHAgMO2Fl+2q1924/v8Uq07MYecMtYPFzxhH8vgIufyTTf2NapU3cla5WRkC5Kiu4N3Yc3kDiki4iyvzBytNv0vSclvlmU44gn+UB5E+zJg7a+lrKQKotVUVeqL+UWr5sv+clwtVryYQ1q/MQGeBb+f3XWzRoDAJFV/8YQA4ZjiS55udX+2K5nrqZF+HyUjbandfiNtGk398QhnsCGABHQ5MFTkbhm5A/IgijosmYKIH/4D0kOmL8NojK9JQWLu4TAWEFZpWrAxsM8MhdGh6kzAz3pJ1lxxuIFBmqrqits2GkmlkNXiClwhTio/Aew8pcISteEKTIhqu1ttUfdF+wqhK2yGzZ6mcG522gIme9p+D1yAehjxSqT2Ld6MxR6+m8eh1S7f32CoK6evxt4Zc95eZE03l0ICS/S0VfZON5F/SL7f+GUA7e6moeF9PdmnWmPW7pm1wTZhl8ald5Rq1Xjqd7YZyRzJc7gzFbb8XxgCfPr+oxfelbjp0vuuXQKemxGDySYncMdeVFt1C7Rq7MR3RIAEit0gu0R+8ci7d61xXMf070flVw8Jg0PTXLaQPBc0fxVnwWMoeclXCf8/feuw35ctrweiSFPe3xOJApBVhFYOXbDfa1b5Mby/kawLIlGV8BK1jI+UQ8ZMDXkLTjnZUKlItgS6SENs2OAC+JCnzARr7DX9cyqMMxLBrbOGnZZ397bRDWmCoofv9YuPTZNX/F067yaPipP63Sbet4Dn8iXWID1QYKdCMyiFntW2KSOLoPGDc1fnVvHXGuDXYISGXO00hCafVGRC14hacQEU4gg4gChPaFoigJiNFqIVFXpdetoRrETUvtl914boPanLS/JHqc+p2z2Qq5SnYyDLJBe5Z3foHDW+0SnxXADrg4F28HC59wluaWpCAK7CqsPDQwXyodeF/vigWdajqMpE/R86YlxJYBH6QTuwWtXE68ZiFkdBNJ+ZAvvzZzobcaNhMHNIuuhDYRPLqwYXYRCrWFnAhAYHS23IhdFVEae2G8/S1NpB2BB/oFe8mY5UN8hKunsBvm0lbnhcWLZAtESaV/2L581nxXA0VswD2YJu6D9VsjmuaBxw/5ak0iW+11OQhbuc1hcAokftoUDTXde+uDf/yR+0JktMRuJ6a5ZzSelVzfGyBDXMGV5cgeie+b6UKCXaeoCc7ah6scx5X4Iae36JRezoJe2i6QYBoBgkW88Y5/fcoseX0lfa4fkpOSSC7TyzJFSPistFIDl8PWEDgwne4jvJ2PQyWdEqY1OqXbwhlj6CoDzmciK6t1BGfpBVMSlhbKUL74zdIvW2HtbHw4qOdmwA3iGBJQKPZhc3Ypm6VeFK1CiEeBAW9TDZVP57JsDOi7zfpaAipQv/1wIhR7OhgyVOi455qBaictwVswP9c1GPcM0sEJ35BJmqUtfzZRF5szgS6fJKzt4YwUx1VDKbHuc0zgBp3o3uOfX/ZXBIvGJxrYe6PivKiiJXUJx17slUfdrUsLaiSJrc1dNd1xp2tlNH+hdRYQgJARYEK2AYDZuqmp1qUNqz4KQvdUdzU91Ige8Ego9CQ/gZRC3PGqbVenhgpjnEnbESZUGKiUNV2yRMfN2EpA29Ds/29vBq3IchT0ATvEOME97i8RHE5griEpig6yefUDU3YkEp3NJ41b6pVaLgms52HNBTu7kIQj6uiTKwJXPDOqZTU+oNHGxmk46caUGrR9Ztabec5TKpZ9yRwzoNjz+BidxRuNwjKXzGT/cviZCmOcH+bmiLgMeCa5B/ruYe2zy6Kn3D15e7BxOTHncAGhay03x235gDcehfT50qHbjr3JYLEoLqBzVOKpge7utkK87Yvkgf5T7sMjAWmzscQ0+CCS16jpqbEhxDxyQwxumZzt8qDSgPs84qsh0oh4NvXDmITg6PK0VTRXYsv5BN9ZdveaXFxAFICYBh+vslkUnMAkTGrbYR8JYsqJ2FdjbEJAD+t9d9Q4kpwgEll/eXNzFDe8EAGnENxkTUi7byiq8mU70JZxYuqN3bkrtFGgJrtUBL1FheDADxa7iO8w1VMtavJ9OVICMhleixtX8xMFI5yPTiwjZItIEDeH8MPFwUOZ+5G2qGxDdPD3EB23vTq3eG3RCN6BPjpwXsRk8p69KAVaqyB3EOyREXKzcTJbTrmZCbBN/du59k2xnO6P/Qi/cppDhX6ZdoExdeiPDdMbyVLotsFAXnM2T1X//Fuhx4T7VLC/ntpCEBTWAJyH88rkMbDSXjTIgc/k1aOwr8r1Q+wKGEwJls8ZkvsodDlcDm6rs47WhE1FtJj7/tt5RCgx32rxNAWuRY0Kkdzrajwlj4lmsH6i8zKJ330mVdvJIF03wf2JepPelG4RQmw6qYmAAAABiXo2vVHZToa37HwnZhc3X1TfBYY2V190AZlqVT7Y8iiJHsA82/ZRRRs+Vj/LFCXg4v7FGfYy88viAIkOxABYf5qJw3nELrjspRM0GMJ53lq6M6GotyX4bmZ00APoGo4ogBtwRI19xiscTrDakL6eZQHHJQjgVrI4WK/TlORuGQif+CCvw83rxko8Z2t01mby/gsT6t/HoB+z4UOIbF7jo5gSdmyjxzgptjoAAAAAAAAAAAA==") center/contain no-repeat !important; filter:drop-shadow(1px 2px 1.5px rgba(40,6,2,.55)) drop-shadow(4px 6px 6px rgba(0,0,0,.25))} /* ตราขี้ผึ้ง VC และตราทองเหลือง: ภาพเรนเดอร์แสงเงาจริง */ html.vc-art .auth-stamp.wax .wx-img,.si-seal .wx-img,#authLoggedIn .acct-avatar .av-seal .wx-img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none} html.vc-art .auth-stamp.wax .wx-img{filter:drop-shadow(1px 2px 1.5px rgba(40,4,2,.55)) drop-shadow(4px 7px 7px rgba(0,0,0,.28))} html.vc-art .auth-ghost .wx-tool img{display:block;width:100%;height:100%;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.45))} /* ปากกาในมือที่เซ็นชื่อ: ใช้ภาพปากกาจริง ซ่อนเส้นปากกาที่วาดไว้ */ #authLoggedOut .ad-hand :is(path[d^="M0 0 L124"],path[d^="M14 -3 L110"],path[d^="M70 -5 L76"],path[d^="M-12 1 L20"]){display:none} .ld-lamp .lp-img{pointer-events:none} /* กระเป๋าผ้าภาพเรนเดอร์: ให้ดำสนิทขึ้นตามโทนเดิม */ .ld-bag svg image{filter:brightness(.7) contrast(1.1)} /* มือเซ็นชื่อบนหน้าเข้าสู่ระบบ: ใช้ภาพมือจริงจับปากกา (ซ่อนมือวาดเดิม) */ #authLoggedOut .ad-hand .ah-rot{display:none} #authLoggedOut .ad-hand .ah-photo{filter:drop-shadow(8px 12px 8px rgba(30,15,5,.4)) brightness(.95)} html.vc-art .auth-ghost .ad-hand .ah-photo{display:none} #authLoggedOut .ad-hand .ah-sleeve{filter:drop-shadow(6px 12px 8px rgba(20,10,4,.45)) brightness(.95)} html.vc-art .auth-ghost .ad-hand .ah-sleeve{display:none} #authLoggedOut .ad-hand .ah-fimg{filter:none !important} /* ลายเซ็นจากวิดีโอมือจริง: ชั้นข้างเอกสาร คัดลอกการหมุนของเอกสาร ผสมแบบ multiply */ .ld-scene .ad-vidlayer{position:absolute;z-index:3;pointer-events:none} .ld-scene .ad-vidlayer :is(.ad-sigvid,.ad-sigstill){position:absolute;mix-blend-mode:multiply;object-fit:fill;transition:opacity .7s ease} .ld-scene .ad-vidlayer .ad-sigvid{opacity:0} .ld-scene .ad-vidlayer.playing .ad-sigvid{opacity:1;transition:opacity .25s} .ld-scene .ad-vidlayer .ad-sigstill{opacity:0} .ld-scene .ad-vidlayer.done .ad-sigstill{opacity:1} .ld-scene .ad-vidlayer.done .ad-sigvid{opacity:0} #authLoggedOut .auth-doc.has-sigvid .ad-hand{display:none !important} @media (min-width:768px) and (hover:hover){.ld-scene .ad-pose.is-hover + .ad-vidlayer{translate:0 -11px;scale:1.025;transition:translate .45s cubic-bezier(.2,.8,.25,1),scale .45s cubic-bezier(.2,.8,.25,1)} .ld-scene .ad-vidlayer{transition:translate .45s cubic-bezier(.2,.8,.25,1),scale .45s cubic-bezier(.2,.8,.25,1)}} /* ให้ชั้นวิดีโอผสมกับโต๊ะได้: ไม่สร้าง stacking context ที่ wrap และให้ layer เป็นตัว multiply */ html.vc-art .ld-scene .auth-doc-wrap{z-index:auto !important} .ld-scene .ad-vidlayer{z-index:auto !important;mix-blend-mode:multiply} .ld-scene .ad-vidlayer :is(.ad-sigvid,.ad-sigstill){mix-blend-mode:normal !important} /* เว้นที่ให้ลายเซ็นมือจริง (สูงกว่าเส้นเดิม) */ html.vc-art #authLoggedOut .auth-doc .ad-sign{margin-top:46px !important} /* มือจากวิดีโอค้างไว้หลังเซ็นเสร็จ */ .ld-scene .ad-vidlayer.held .ad-sigvid{opacity:1} .ld-scene .ad-vidlayer.held .ad-sigstill{opacity:0} /* คอม/โน้ตบุ๊ก: มือวิดีโอใหญ่ขึ้น เว้นที่เหนือเส้นลงชื่อเพิ่ม */ @media (min-width:768px){html.vc-art #authLoggedOut .auth-doc .ad-sign{margin-top:30px !important}} /* perspective บน wrap ทำให้ชั้นวิดีโอผสมสีได้แค่บนกระดาษ (นอกกระดาษเป็นแถบขาว) → ปิด */ html.vc-art .ld-scene .auth-doc-wrap{perspective:none !important} /* วิดีโอมือใส่น้ำแข็ง (ซ้อนแทนแก้วชั่วคราว) */ .ld-cup .ld-icevid{position:absolute;pointer-events:none;opacity:0;z-index:3} /* เครดิตโมเดลมือ 3D (CC BY-SA) */ .faq-foot.hand-credit{font-size:11px;opacity:.6;margin-top:4px;line-height:1.5} .faq-foot.hand-credit a{color:inherit;text-decoration:underline} /* มือ 3D: ภาพมีความทึบในตัว ไม่ต้องผสมแบบ multiply */ .ad-vidlayer.v3d{mix-blend-mode:normal !important} .ad-vidlayer.v3d :is(.ad-sigvid,.ad-sigstill){mix-blend-mode:normal !important} /* มือถือเท่านั้น (31 ต.ค. 2026): แก้วกาแฟใหญ่ขึ้น (มือ 3D ใหญ่ตาม) · เอกสารเข้าสู่ระบบเล็กลง และเลื่อนลงให้พ้นแก้ว */ @media (max-width:767px){ html.vc-art .ld-scene .ld-cup{top:10px;right:3%;width:136px} html.vc-art .ld-scene .auth-doc-wrap{zoom:.86;padding:178px 44px 50px} } /* ลบเส้นดำใต้แถบหัวเว็บ (เส้นขอบล่าง 1px ของ header) */ .site-header{border-bottom:0 !important} /* ลบรอยพับกลางกระดาษเข้าสู่ระบบ (เส้นแนวนอนระหว่างช่องอีเมลกับรหัสผ่าน) */ html.vc-art .auth-doc .ad-face::before{background:none !important} /* มือถือเท่านั้น (3 พ.ย. 2026): เอกสารเล็กลงอีก · ตะเกียงใหญ่ขึ้น */ @media (max-width:767px){ html.vc-art .ld-scene .auth-doc-wrap{zoom:.74;padding:205px 80px 56px} html.vc-art .ld-scene .ld-lamp{top:-6px;left:-2%;width:175px} } /* มือถือเท่านั้น (3 พ.ย. 2026 รอบ 2): จัดองค์ประกอบใหม่ — ไม่ให้ตะเกียงกับแก้วตั้งสมมาตรเท่ากันสองมุม ตะเกียงเล็กลงและล้นขอบซ้าย, แก้วเล็กลงและล้นขอบขวาต่ำกว่า, เอกสารเอียงเล็กน้อยและขยับขึ้น */ @media (max-width:767px){ html.vc-art .ld-scene .ld-lamp{top:-14px;left:-9%;width:150px} html.vc-art .ld-scene .ld-cup{top:16px;right:3%;width:124px} html.vc-art .ld-scene .auth-doc-wrap{zoom:.74;padding:196px 74px 64px 84px} } /* มือถือ: หมุนแก้วทั้งชุด (รวมวิดีโอมือ 3D ที่อยู่ในแก้ว) ให้แขนยื่นออกไปทางขอบบน/ขวาของจอ ไม่พาดทับเอกสาร */ @media (max-width:767px){html.vc-art .ld-scene .ld-cup{transform:rotate(var(--cupRot,-60deg))}} /* มือถือ: mobile-polish.css บีบ canvas ให้กว้างไม่เกินแก้ว (max-width:100%) → ภาพมือ 3D ถูกบีบ/เลื่อน ผิดตำแหน่ง */ .ld-cup .ld-hand3d,.ld-cup .ld-icevid,.ad-vidlayer canvas,.ad-vidlayer img{max-width:none !important} /* มือถือ: ใช้รอบตะเกียงแบบเดียวกับคอม (ldLamp 12 วิ: ไฟกระพริบดับ-ติดเอง) · กดตะเกียงเพื่อเปิด/ปิดยังทำงาน (data-lamp ทับ) */ @media (max-width:767px) and (prefers-reduced-motion:no-preference){ html.vc-art .ld-scene:not([data-lamp]){animation:ldLamp 12s linear infinite !important} } /* มือถือ: เหมือนคอม — กดตะเกียงเปิด/ปิดได้ (ไฟค่อยๆ หรี่ 0.4 วิ) และเอกสารมืดลงตามไฟ */ @media (max-width:767px){ html.vc-art .ld-scene{transition:--on .4s} html.vc-art .ld-scene[data-lamp="on"]{animation:none !important;--on:1} html.vc-art .ld-scene[data-lamp="off"]{animation:none !important;--on:0} html.vc-art .ld-scene .ld-lamp{filter:drop-shadow(0 6px 5px rgba(0,0,0,.55)) drop-shadow(0 0 calc(18px * var(--on)) rgba(255,170,70,calc(.55 * var(--on))))} html.vc-art .ld-scene .ad-pose{filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.45)) brightness(calc(.62 + .38 * var(--on)))} } /* มือถือ: วงแสงอุ่นจากตะเกียงแผ่บนโต๊ะแบบคอม (ใหญ่ขึ้นเมื่อไฟติด) + ทั้งฉากมืดลงเมื่อไฟดับ */ @media (max-width:767px){ html.vc-art .ld-scene .ld-glow{display:block;z-index:2;mix-blend-mode:screen;background: radial-gradient(70% 34% at 18% 11%,rgba(255,176,90,calc(.55 * var(--on))),transparent 72%), radial-gradient(95% 48% at 30% 30%,rgba(255,170,90,calc(.24 * var(--on))),transparent 75%) !important} html.vc-art .ld-scene .ld-dark{background: linear-gradient(rgba(0,0,0,calc((1 - var(--on)) * .62)),rgba(0,0,0,calc((1 - var(--on)) * .62))), radial-gradient(ellipse 80% 70% at 50% 50%,rgba(4,3,2,0) 35%,rgba(3,2,1,.45) 75%,rgba(2,1,1,.8) 100%) !important;opacity:1 !important} } /* ฉากเปิด: จุดตะเกียง + กล้องเลื่อน (transform/opacity เท่านั้น) */ .vc-fadeblack{position:fixed;inset:0;z-index:9998;background:#050302;opacity:0;pointer-events:none;transition:opacity .26s ease} .vc-fadeblack.on{opacity:1} html.vc-art .ld-scene.vc-intro{overflow:hidden;animation:none !important;--on:1} .vc-intro-ov{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden;transition:opacity .6s ease} .vc-intro-ov.out{opacity:0} .vc-intro-ov .io-hole{position:absolute;border-radius:50%;will-change:transform;transform:scale(1); background:radial-gradient(circle,rgba(0,0,0,0) 0,rgba(0,0,0,0) 3.2%,rgba(4,3,2,.6) 6%,rgba(3,2,1,.98) 10%); animation:ioHole var(--D) cubic-bezier(.3,.05,.2,1) forwards} .vc-intro-ov .io-dark{position:absolute;inset:0;background:#030201;will-change:opacity;animation:ioFlick var(--D) linear forwards} .vc-intro-ov.short .io-dark{animation-name:ioFlickS} .vc-intro-ov i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,226,170,.85);box-shadow:0 0 6px rgba(255,200,120,.8);opacity:0;will-change:transform,opacity;animation:vcMote 3s ease-out forwards} @keyframes ioHole{0%,22%{transform:scale(1)}100%{transform:scale(11)}} @keyframes ioFlick{0%,9%{opacity:1}12%{opacity:.35}15%{opacity:.95}19%{opacity:.15}22%{opacity:.7}27%,100%{opacity:0}} @keyframes ioFlickS{0%,4%{opacity:1}8%{opacity:.3}11%{opacity:.85}16%,100%{opacity:0}} @keyframes vcMote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy))}} @media (prefers-reduced-motion:reduce){.vc-intro-ov{display:none}} /* ===== บรรยากาศลอย: ฝุ่นในแสงตะเกียง + วงแสงโบเก้ + ไอกาแฟ (คอม+มือถือ) ===== */ .vc-dust,.vc-bokeh{position:absolute;inset:0;pointer-events:none;overflow:hidden;contain:strict} .vc-dust{z-index:4;opacity:calc(.22 + .78 * var(--on,1)); -webkit-mask-image:radial-gradient(circle at var(--lx,20%) var(--ly,15%),#000 0,rgba(0,0,0,.9) 18vmax,rgba(0,0,0,.42) 44vmax,rgba(0,0,0,.2) 80vmax); mask-image:radial-gradient(circle at var(--lx,20%) var(--ly,15%),#000 0,rgba(0,0,0,.9) 18vmax,rgba(0,0,0,.42) 44vmax,rgba(0,0,0,.2) 80vmax)} .vc-dust i{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity; background:radial-gradient(circle,#fff8e8 0,rgba(255,218,156,.95) 30%,rgba(255,180,100,.4) 50%,rgba(255,170,90,0) 70%); animation:vcDrift var(--d,24s) ease-in-out var(--w,0s) infinite alternate,vcTwink var(--t,4s) ease-in-out var(--tw,0s) infinite alternate} .vc-dust i.b{background:radial-gradient(circle,rgba(255,226,180,.55) 0,rgba(255,200,130,.4) 45%,rgba(255,190,120,.12) 62%,rgba(255,190,120,0) 72%)} @keyframes vcDrift{0%{transform:translate(0,0)}33%{transform:translate(var(--x1),var(--y1))}66%{transform:translate(var(--x2),var(--y2))}100%{transform:translate(var(--x3),var(--y3))}} @keyframes vcTwink{0%{opacity:calc(var(--o,.8) * .15)}100%{opacity:var(--o,.8)}} .vc-bokeh{z-index:8;opacity:calc(.12 + .88 * var(--on,1))} .vc-bokeh i{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity; background:radial-gradient(circle,rgba(255,196,120,.04) 0,rgba(255,186,110,.08) 50%,rgba(255,214,160,.17) 64%,rgba(255,200,140,.06) 69%,rgba(255,190,120,0) 71%); animation:vcBok var(--d,36s) ease-in-out var(--w,0s) infinite alternate} .vc-bokeh i.c{background:radial-gradient(circle,rgba(255,170,90,.07) 0,rgba(255,160,80,.11) 55%,rgba(255,190,130,.17) 66%,rgba(255,170,90,0) 71%)} @keyframes vcBok{0%{opacity:0;transform:translate(0,0) scale(.9)}25%{opacity:var(--o,.7)}60%{opacity:calc(var(--o,.7) * .55)}85%{opacity:var(--o,.7)}100%{opacity:.15;transform:translate(var(--x),var(--y)) scale(1.08)}} .vc-steam{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3;font-size:120px} .vc-stbox{position:absolute;left:-.5em;top:-1.55em;width:1em;height:1.7em;filter:url(#vcStF)} .ld-scene .vc-steam .vc-wisp{position:absolute;left:.5em;top:1.55em;margin:0;width:.2em;height:.6em;aspect-ratio:auto;border-radius:50%;filter:none;opacity:0; background:radial-gradient(50% 50% at 50% 55%,rgba(255,248,236,.62),rgba(255,240,220,.22) 50%,rgba(255,236,214,0) 72%); transform-origin:50% 100%;will-change:transform,opacity;animation:vcWisp var(--d,6s) cubic-bezier(.33,.1,.45,1) var(--w,0s) infinite} @keyframes vcWisp{0%{opacity:0;transform:translate(-50%,-80%) scale(.35,.25) rotate(0)} 18%{opacity:var(--o,.7)} 50%{transform:translate(calc(-50% + var(--x1)),calc(-80% - .45em)) scale(.85,.9) rotate(var(--r1))} 78%{opacity:calc(var(--o,.7) * .4)} 100%{opacity:0;transform:translate(calc(-50% + var(--x2)),calc(-80% - .8em)) scale(1.7,1.3) rotate(var(--r2))}} .ld-scene .vc-steam .vc-curl{position:absolute;left:.37em;top:1.3em;margin:0;width:.26em;height:.32em;aspect-ratio:auto;border-radius:50%;background:none;filter:none;opacity:0; border:.02em solid rgba(255,246,232,.3);border-left-color:transparent;border-bottom-color:transparent;will-change:transform,opacity; animation:vcCurl var(--d,6.5s) cubic-bezier(.3,.1,.5,1) var(--w,0s) infinite} @keyframes vcCurl{0%{opacity:0;transform:translate(0,0) rotate(var(--r0)) scale(.4)} 25%{opacity:.65} 100%{opacity:0;transform:translate(var(--x2),-.8em) rotate(calc(var(--r0) + var(--r2))) scale(1.5,1.9)}} .ld-cup.nosteam ~ .vc-steam{opacity:0} html:not(.vc-art) :is(.vc-dust,.vc-bokeh,.vc-steam){display:none} html[data-calm] :is(.vc-dust,.vc-bokeh) i,html[data-calm] .vc-steam .ld-steam{animation:none} html[data-calm] .vc-bokeh,html[data-calm] .vc-steam{display:none} @media (prefers-reduced-motion:reduce){.vc-dust i{animation:none;opacity:calc(var(--o,.6) * .5)}.vc-bokeh,.vc-steam{display:none}} /* ===== ฉากเปิด: ไฟฉายส่องข้อความเล็ก + แว่นขยายทอง + แผ่นสัญญาลอย 3D (คอม+มือถือ) ===== */ :is(.hx-base,.hx-pool,.hx-sheets,.hx-lens){display:none} html.vc-art.hx-on :is(.hx-base,.hx-pool,.hx-sheets,.hx-lens){display:block} html.vc-art .hx-base,html.vc-art .hx-pool,html.vc-art .hx-sheets,html.vc-art .hx-lens{position:absolute;left:0;top:0;z-index:-1;pointer-events:none} html.vc-art main > .hero{overflow:hidden} .hx-fine{position:absolute;left:0;top:0;font-family:Taviraj,Sarabun,serif;line-height:1.55;letter-spacing:.01em} html.vc-art .hero .hx-fine p{position:absolute;margin:0;padding:0;width:21em;max-width:none;text-align:justify;color:inherit;font:inherit;line-height:1.55;letter-spacing:inherit;opacity:1;text-shadow:inherit;transform:none;animation:none} html.vc-art .hero .hx-fine :is(b,em){color:inherit} .hx-fine em{font-style:normal;font-weight:600;letter-spacing:.04em} .hx-fine b{font-weight:600} html.vc-art .hero .hx-base{color:rgba(236,226,206,.07)} html.vc-art .hero .hx-base b{color:rgba(255,170,140,.09)} /* วงไฟฉาย: หน้าต่างกลมเลื่อนด้วย transform ส่วนข้อความข้างในเลื่อนสวนทาง จึงไม่ต้องวาดใหม่ทุกเฟรม */ .hx-pool{border-radius:50%;overflow:hidden;will-change:transform; background:radial-gradient(closest-side,rgba(255,226,180,.10),rgba(255,210,160,.04) 55%,transparent); -webkit-mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%)} .hx-lit{color:rgba(244,232,210,.5);will-change:transform} html.vc-art .hero .hx-lit b{color:#ffb59a;text-decoration:underline wavy rgba(255,110,80,.75);text-decoration-thickness:1px;text-underline-offset:3px} html.vc-art .hero .hx-lit em{color:rgba(255,226,170,.75)} /* แว่นขยาย */ .hx-lens{will-change:transform} .hx-lin{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(30,24,18,.10),rgba(10,8,6,.28))} .hx-big{color:rgba(250,242,226,.92);will-change:transform;text-shadow:0 0 .4em rgba(255,210,150,.25)} html.vc-art .hero .hx-big b{color:#ffd2c0;background:linear-gradient(transparent 55%,rgba(255,80,50,.38) 55%,rgba(255,80,50,.38) 92%,transparent 92%)} html.vc-art .hero .hx-big em{color:#ffe1a6} .hx-glass{position:absolute;inset:0;border-radius:50%; background: radial-gradient(60% 38% at 34% 22%,rgba(255,255,255,.22),rgba(255,255,255,.05) 55%,transparent 70%), radial-gradient(30% 14% at 70% 84%,rgba(255,236,200,.12),transparent 70%), radial-gradient(closest-side,transparent 78%,rgba(255,236,200,.08) 90%,rgba(0,0,0,.35) 100%); box-shadow:inset 0 0 calc(var(--R,100px) * .18) rgba(255,214,150,.18)} .hx-rim{position:absolute;inset:calc(var(--R,100px) * -.1);border-radius:50%; background:conic-gradient(from 210deg,#6b4d1c,#f6e2a0 10%,#a77c33 22%,#fff3c8 34%,#8a6424 48%,#e5c271 62%,#5e4318 76%,#d9b463 88%,#6b4d1c); -webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--R,100px) * .1 - 1px),#000 calc(100% - var(--R,100px) * .1),#000 calc(100% - 1.5px),transparent 100%); mask-image:radial-gradient(closest-side,transparent calc(100% - var(--R,100px) * .1 - 1px),#000 calc(100% - var(--R,100px) * .1),#000 calc(100% - 1.5px),transparent 100%)} .hx-rim::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 40%,rgba(0,0,0,.35))} .hx-lsh{position:absolute;inset:calc(var(--R,100px) * -.1);border-radius:50%;box-shadow:0 calc(var(--R,100px) * .28) calc(var(--R,100px) * .45) rgba(0,0,0,.55),0 0 calc(var(--R,100px) * .5) rgba(255,190,110,.12)} .hx-handle{position:absolute;left:50%;top:50%;width:calc(var(--R,100px) * .2);height:calc(var(--R,100px) * 1.25);margin-left:calc(var(--R,100px) * -.1); transform-origin:50% 0;transform:rotate(-42deg) translateY(calc(var(--R,100px) * 1.04));border-radius:0 0 calc(var(--R,100px) * .1) calc(var(--R,100px) * .1); background:linear-gradient(90deg,#120c07,#4a3020 35%,#2a1a0f 60%,#0c0805);box-shadow:0 calc(var(--R,100px) * .2) calc(var(--R,100px) * .3) rgba(0,0,0,.5)} .hx-handle i{position:absolute;left:-8%;right:-8%;top:0;height:22%;border-radius:2px;background:linear-gradient(90deg,#6b4d1c,#f3dc96 40%,#9c7330 70%,#5a4118)} /* แผ่นสัญญาลอย */ .hx-sheets{width:100%;height:100%;perspective:1100px;perspective-origin:50% 45%;overflow:hidden} .hx-stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} .hx-sheet{position:absolute;transform-style:preserve-3d} .hx-sheet.far{opacity:.5} .hx-sheet .hx-pg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(14,9,5,.16);pointer-events:none} html.hx-lite .hx-base,html.hx-lite .hx-sheet.far{display:none !important} html.hx-lite .hx-pg{animation:none} .hx-pg{position:relative;width:100%;aspect-ratio:1/1.414;border-radius:.12em;will-change:transform; background: linear-gradient(135deg,rgba(255,255,255,.22),transparent 38%,rgba(40,20,0,.22) 100%), radial-gradient(120% 90% at 100% 100%,rgba(255,150,70,.28),transparent 60%), #e6dbc3; box-shadow:0 1.6em 2.4em -.6em rgba(0,0,0,.6),inset 0 0 0 1px rgba(120,90,50,.18); animation:hxFloat var(--d,12s) ease-in-out var(--w,0s) infinite alternate} @keyframes hxFloat{0%{transform:translate3d(0,0,0) rotateX(0) rotateY(0)} 50%{transform:translate3d(.3em,calc(var(--fy,-18px) * .6),0) rotateX(calc(var(--fr,6deg) * -.6)) rotateY(var(--fr,6deg))} 100%{transform:translate3d(-.2em,var(--fy,-18px),0) rotateX(var(--fr,6deg)) rotateY(calc(var(--fr,6deg) * -.8))}} .hx-pg .hp-h{position:absolute;left:30%;right:30%;top:7%;height:.42em;border-radius:.1em;background:rgba(50,36,24,.55)} .hx-pg .hp-l{position:absolute;left:10%;right:10%;top:16%;height:52%; background:repeating-linear-gradient(180deg,rgba(60,44,30,.32) 0 .16em,transparent .16em .62em); -webkit-mask-image:linear-gradient(90deg,#000 80%,rgba(0,0,0,.6));mask-image:linear-gradient(90deg,#000 80%,rgba(0,0,0,.6))} .hx-pg .hp-hl{position:absolute;left:9%;width:62%;height:.42em;background:rgba(230,70,50,.45);border-radius:.1em} .hx-pg .hp-sig{position:absolute;left:12%;bottom:8%;width:44%;height:auto} .hx-pg .hp-seal{position:absolute;right:10%;bottom:7%;width:1.9em;height:1.9em;border-radius:50%; background:radial-gradient(circle at 38% 35%,#d0503a,#8e1f16 60%,#5a110b);box-shadow:0 .1em .2em rgba(0,0,0,.4)} .hx-pg .hp-lt{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,200,130,.08),transparent 40%,rgba(0,0,0,.18))} @media (max-width:767px){ html.vc-art .hero .hx-fine p{width:19em} html.vc-art .hero .hx-base{color:rgba(236,226,206,.035)} html.vc-art .hero .hx-lit{color:rgba(244,232,210,.3)} html.vc-art .hero .hx-lit b{color:rgba(255,181,154,.7)} html.vc-art .hero .hx-big{color:rgba(250,242,226,.7)} } html.vc-art.hx-on .hero-main{text-shadow:0 0 .5em rgba(10,7,5,.85),0 0 1.4em rgba(10,7,5,.6)} html[data-calm] .hx-pg{animation:none} @media (prefers-reduced-motion:reduce){.hx-pg{animation:none}} /* คอม: ข้อความพื้นหลังจางลง ไม่ให้ตาลาย (มือถือคงเดิม) */ @media (min-width:768px){ html.vc-art .hero .hx-base{color:rgba(236,226,206,.026)} html.vc-art .hero .hx-base b{color:rgba(255,170,140,.035)} html.vc-art .hero .hx-lit{color:rgba(244,232,210,.24)} html.vc-art .hero .hx-lit b{color:rgba(255,181,154,.5);text-decoration-color:rgba(255,110,80,.45)} html.vc-art .hero .hx-lit em{color:rgba(255,226,170,.4)} html.vc-art .hero .hx-big{color:rgba(250,242,226,.78)} } /* คอม: ข้อความสั้นๆ ที่วางเว้นเมนู/ปุ่ม/หัวเรื่อง */ html.vc-art .hero .hx-fine p.s{width:auto;white-space:nowrap;text-align:left} /* ===== เลื่อนเมาส์: ผงทอง + แว่นเกาะปุ่ม ===== */ html.vc-art .hx-trail{position:absolute;left:0;top:0;z-index:3;pointer-events:none} html:not(.hx-on) .hx-trail{display:none} .hx-lens,.hx-pool{transition:opacity .25s ease} .hero.hx-docked :is(.hx-lens,.hx-pool){opacity:0} .hx-dock{position:fixed;left:0;top:0;width:0;height:0;z-index:9990;pointer-events:none;display:none;border-radius:50%;--bw:3px; filter:drop-shadow(0 0 8px rgba(255,196,110,.55)) drop-shadow(0 0 22px rgba(255,170,70,.25)); transition:left .42s cubic-bezier(.2,1.25,.35,1),top .42s cubic-bezier(.2,1.25,.35,1),width .42s cubic-bezier(.2,1.25,.35,1),height .42s cubic-bezier(.2,1.25,.35,1),border-radius .42s ease,opacity .3s} .hx-dock.on{display:block} .hx-dock{opacity:0} .hx-dock.vis{opacity:1} .hx-dock.nt{transition:none} .hx-dock i{position:absolute;inset:0;border-radius:inherit;padding:var(--bw);box-sizing:border-box;transition:padding .42s ease; background:conic-gradient(from 200deg,#6b4d1c,#f6e2a0 10%,#a77c33 22%,#fff3c8 34%,#8a6424 48%,#e5c271 62%,#5e4318 76%,#d9b463 88%,#6b4d1c); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .hx-dock b{position:absolute;inset:0;border-radius:inherit;overflow:hidden} .hx-dock b::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;transform:skewX(-22deg);opacity:0; background:linear-gradient(90deg,transparent,rgba(255,244,214,.55),transparent)} .hx-dock.sh b::before{animation:hxShine .9s .18s cubic-bezier(.3,.1,.3,1)} @keyframes hxShine{0%{left:-60%;opacity:1}100%{left:120%;opacity:1}} .hx-dk{scale:1.06;transition:scale .3s cubic-bezier(.2,1.3,.4,1)} :is(.dx-nav a,.dx-cta,.dx-cta-ghost,.auth-toggle){transition:scale .3s ease} .dx-nav a.hx-dk{text-shadow:0 0 14px rgba(255,214,150,.65)} html.hx-docking .vc-cursor i{opacity:0 !important} @media (prefers-reduced-motion:reduce){.hx-dock{display:none !important}} /* ===== หัวเรื่อง: แสงไฟเตาผิง + โฟกัสแบบกล้อง (คอม+มือถือ) ===== */ html.vc-art .hx-focus{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(8,6,4,.5),rgba(8,6,4,.32) 55%,rgba(8,6,4,0)); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); -webkit-mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,.6) 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,.6) 70%,transparent 100%); opacity:0;animation:hxFocusIn 1.6s .4s ease forwards} @keyframes hxFocusIn{to{opacity:1}} html:not(.hx-on) .hx-focus{display:none} html.hx-lite .hx-focus{-webkit-backdrop-filter:none;backdrop-filter:none} html.vc-art .hero-title.has-fire{position:relative} html.vc-art .hero-title .ht-fire{position:absolute;inset:0;pointer-events:none;color:#ffab5e; text-shadow:0 0 .28em rgba(255,128,40,.55),0 0 .7em rgba(255,110,30,.25) !important; -webkit-mask-image:linear-gradient(98deg,transparent 26%,rgba(0,0,0,.45) 55%,#000 88%);mask-image:linear-gradient(98deg,transparent 26%,rgba(0,0,0,.45) 55%,#000 88%); opacity:0;will-change:opacity;animation:htFireIn 1.4s ease forwards,htFlick 2.7s 1.4s ease-in-out infinite} .hero-title .ht-fire,.hero-title .ht-fire *{transition:none !important;transform:none !important} .hero-title .ht-fire *{animation:none !important;color:inherit !important;text-shadow:inherit !important} .hero-title .ht-fire *::after,.hero-title .ht-fire *::before{display:none !important} .hero-title .ht-fire.off{visibility:hidden} @keyframes htFireIn{to{opacity:.72}} @keyframes htFlick{0%{opacity:.72}13%{opacity:.86}21%{opacity:.62}34%{opacity:.82}48%{opacity:.58}57%{opacity:.85}71%{opacity:.66}84%{opacity:.9}100%{opacity:.72}} @media (prefers-reduced-motion:reduce){html.vc-art .hero-title .ht-fire{animation:none;opacity:.5}.hx-focus{animation:none;opacity:1}} html[data-calm] .hero-title .ht-fire{animation:none;opacity:.5} /* ===== ข้อกำหนด + นโยบายความเป็นส่วนตัว: ช่องติ๊กยอมรับ / พลิกกระดาษ / หน้าต่างอ่าน ===== */ .ad-consent{margin:4px 0 12px;font:400 13px/1.5 Sarabun,Prompt,sans-serif;color:inherit;text-align:left} .ad-consent label{display:flex;gap:9px;align-items:flex-start;cursor:pointer} .ad-consent input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .ad-consent .ac-box{flex:none;width:17px;height:17px;margin-top:1px;border:1.6px solid rgba(58,39,20,.7);border-radius:3px;background:rgba(255,255,255,.35);position:relative;transition:background .2s,border-color .2s} .ad-consent input:checked + .ac-box{background:#3a2714;border-color:#3a2714} .ad-consent input:checked + .ac-box::after{content:"";position:absolute;left:4.5px;top:1px;width:4.5px;height:9px;border:solid #f4ead4;border-width:0 2px 2px 0;transform:rotate(45deg)} .ad-consent input:focus-visible + .ac-box{outline:2px solid #b8862f;outline-offset:2px} .ad-consent a{color:#7a3b12;text-decoration:underline;text-underline-offset:2px;font-weight:600} .ad-consent .ac-msg{margin:4px 0 0 26px;min-height:0;font-size:12px;color:#a3261a} .ad-consent .ac-msg:empty{display:none} .ad-consent.err{animation:acShake .45s} .ad-consent.err .ac-box{border-color:#a3261a;background:rgba(214,58,40,.12)} @keyframes acShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}} /* กระดาษเอกสาร (ใช้ทั้งด้านหลังกระดาษล็อกอินและหน้าต่างอ่าน) */ .vd-paper{display:flex;flex-direction:column;color:#2c2218;text-align:left;border-radius:3px;overflow:hidden; background:linear-gradient(180deg,#f3ead6,#e7dbc0);box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 24px 50px -12px rgba(0,0,0,.65),0 0 0 1px rgba(150,110,60,.3)} .vd-tabs{display:flex;gap:4px;padding:12px 14px 0;border-bottom:1px solid rgba(90,60,30,.25);flex:none} .vd-tabs button{flex:1;padding:9px 8px;border:0;border-radius:6px 6px 0 0;background:transparent;color:#7a6142;font:600 13.5px/1.2 Prompt,Sarabun,sans-serif;cursor:pointer} .vd-tabs button.on{background:rgba(255,255,255,.55);color:#2c2218;box-shadow:0 -2px 0 #b8862f inset} .vd-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 20px 18px;font:400 14px/1.65 Sarabun,sans-serif} .vd-body:focus{outline:none} .vd-body h4{margin:2px 0 10px;font:600 19px/1.3 Prompt,Sarabun,sans-serif} .vd-body h5{margin:14px 0 4px;font:600 14.5px/1.35 Prompt,Sarabun,sans-serif;color:#4a3216} .vd-body ul{margin:6px 0 0;padding-left:20px} .vd-body li{margin:3px 0} .vd-body .vd-meta{margin:0 0 4px;font:500 11px/1.3 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a6d45} .vd-body mark{background:#ffe08a;color:#5a3a00;padding:0 3px} .vd-body a{color:#7a3b12} .vd-foot{display:flex;gap:10px;justify-content:flex-end;padding:10px 14px 12px;border-top:1px solid rgba(90,60,30,.25);flex:none} .vd-foot button{padding:10px 16px;border-radius:6px;font:600 13.5px/1 Prompt,Sarabun,sans-serif;cursor:pointer;border:1px solid rgba(58,39,20,.5);background:transparent;color:#3a2714} .vd-foot .vd-ok{background:#3a2714;color:#f4ead4;border-color:#3a2714} /* พลิกกระดาษล็อกอิน */ .ad-pose{transition:rotate .38s cubic-bezier(.55,0,.8,.4),opacity .2s .18s} .auth-doc-wrap.vd-flip .ad-pose{rotate:y 90deg;opacity:0;pointer-events:none} .auth-doc-wrap.vd-flip .ad-vidlayer{opacity:0;transition:opacity .15s} .ad-backside{position:absolute;z-index:20;visibility:hidden;rotate:y -90deg;opacity:0;pointer-events:none; transition:rotate .42s cubic-bezier(.2,.6,.3,1),opacity .15s,visibility 0s .6s} .auth-doc-wrap.vd-flip .ad-backside{visibility:visible;rotate:y 0deg;opacity:1;pointer-events:auto;transition:rotate .45s .36s cubic-bezier(.2,.7,.3,1),opacity .15s .36s,visibility 0s} .auth-doc-wrap:not(.vd-flip) .ad-pose{transition:rotate .45s .38s cubic-bezier(.2,.7,.3,1),opacity .15s .38s} /* หน้าต่างอ่านเอกสาร */ .vd-modal{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,6,4,.72)} .vd-modal.on{display:flex;animation:vdIn .3s ease} .vd-modal .vd-paper{width:min(640px,100%);height:min(82vh,760px);animation:vdUp .4s cubic-bezier(.2,.8,.3,1)} html.vd-lock{overflow:hidden} @keyframes vdIn{from{opacity:0}} @keyframes vdUp{from{transform:translateY(24px) rotate(-1deg);opacity:0}} .vc-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer} @media (max-width:767px){ .vd-body{padding:12px 15px 16px;font-size:13.5px} .vd-modal{padding:10px} .vd-modal .vd-paper{height:88vh} .vd-foot button{padding:10px 12px} } @media (prefers-reduced-motion:reduce){.ad-pose,.ad-backside{transition:none !important}.ad-consent.err{animation:none}} /* ลดแล็กหน้าเข้าสู่ระบบ: ตะเกียงกะพริบเป็นขั้น (4 ขั้นต่อช่วง) แทนไล่ทุกเฟรม — แต่ละขั้นทำให้วาดฉากใหม่ครั้งเดียว ไม่ใช่ทุกเฟรม */ html.vc-art .ld-scene,html.vc-art .ld-scene:not([data-lamp]){animation-timing-function:steps(4,end) !important} /* มือถือ: กระดาษเข้าสู่ระบบเล็กลงนิด ให้เห็นลายเซ็นกับมือโดยไม่ต้องเลื่อน */ @media (max-width:767px){html.vc-art .ld-scene .auth-doc-wrap{zoom:.64;padding:160px 74px 60px 84px}} /* ===== แผ่นตัวอย่างสัญญาหน้าแรก: ชื่อประเภท + สี + ปุ่มดูตัวอย่าง (คอม+มือถือ) ===== */ .hx-sheet.is-sample{--k:#8a5a2b;transition:scale .45s cubic-bezier(.2,1.3,.4,1)} .hx-sheet.k-rent{--k:#3f6b5f} .hx-sheet.k-loan{--k:#8a4a3b} .hx-sheet.k-employment{--k:#3e5675} .hx-sheet.is-sample .hx-pg{background:linear-gradient(180deg,var(--k) 0 15%,transparent 15%),linear-gradient(135deg,rgba(255,255,255,.22),transparent 38%,rgba(40,20,0,.2) 100%),linear-gradient(color-mix(in srgb,var(--k) 9%,#efe6d2),color-mix(in srgb,var(--k) 9%,#efe6d2))} .hx-sheet.is-sample .hp-h{display:none} .hx-sheet.is-sample .hp-l{top:22%;height:44%;opacity:.7} .hx-sheet.is-sample .hp-hl{background:color-mix(in srgb,var(--k) 55%,transparent)} .hx-pg .hp-name{position:absolute;left:0;right:0;top:0;height:15%;display:flex;align-items:center;justify-content:center;font:600 max(1.12em,10px)/1 Prompt,Sarabun,sans-serif;font-style:normal;color:#fff;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap} .hx-pg .hp-view{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.45em 1em .5em;border-radius:99px;background:var(--k);color:#fff;font:600 max(.95em,9.5px)/1 Prompt,Sarabun,sans-serif;font-style:normal;white-space:nowrap; box-shadow:0 .3em .8em rgba(0,0,0,.35),0 0 0 .15em rgba(255,255,255,.55);transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s} .hx-sheet.is-sample.hov{scale:1.1} .hx-sheet.is-sample.hov .hx-pg{box-shadow:0 2.2em 3em -.6em rgba(0,0,0,.7),0 0 0 2px var(--k),0 0 1.6em color-mix(in srgb,var(--k) 55%,transparent)} .hx-sheet.is-sample.hov .hp-view{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 .4em 1em rgba(0,0,0,.4),0 0 0 .18em #fff} html.vc-art main > .hero.hx-smp-hov{cursor:pointer} .hx-sheet.is-sample .hx-pg::after{background:rgba(14,9,5,.06)} /* หน้าต่างสัญญาตัวอย่าง */ .sx-modal .vd-paper{width:min(680px,100%)} .sx-t{position:relative} .sx-t.on.k-rent{box-shadow:0 -3px 0 #3f6b5f inset}.sx-t.on.k-loan{box-shadow:0 -3px 0 #8a4a3b inset}.sx-t.on.k-employment{box-shadow:0 -3px 0 #3e5675 inset} .sx-body .sx-free{display:inline-block;margin:0 0 6px;padding:3px 10px;border-radius:99px;background:#2c7a43;color:#fff;font:600 11.5px/1.4 Prompt,Sarabun,sans-serif} .sx-body .sx-sum{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px} .sx-b{display:inline-block;padding:3px 9px;border-radius:99px;font:600 12px/1.3 Prompt,Sarabun,sans-serif;color:#fff;background:#b8321f} .sx-b.c{background:#b97a12} .sx-c{margin:0;padding:9px 0;border-top:1px solid rgba(90,60,30,.16)} .sx-c p{margin:0} .sx-c mark{color:inherit;padding:0 2px;border-radius:2px} .sx-c.f-h mark{background:rgba(214,58,40,.24);color:#7a1a0e} .sx-c.f-c mark{background:rgba(214,150,30,.28);color:#6a4300} .sx-c:not(.f-h):not(.f-c) mark{background:none} .sx-n{margin:7px 0 0;padding:8px 11px;border-radius:6px;background:rgba(255,255,255,.5);border-left:3px solid #b8321f;font-size:13.5px;line-height:1.55;color:#4a3420} .sx-c.f-c .sx-n{border-left-color:#b97a12} .sx-n .sx-b{margin-right:8px;vertical-align:1px;font-size:11px} .sx-body .sx-note{margin:14px 0 2px;font-size:12px;line-height:1.5;color:#7a6142} @media (max-width:767px){.sx-n{font-size:12.5px}} /* ===== แถวแผ่นตัวอย่างใต้ปุ่ม (แทนแผ่นลอยรอบจอ) คอม+มือถือ ===== */ html.vc-art .hero .hx-row{margin:30px auto 0;text-align:center} html.vc-art .hero .hx-row-lab{margin:0 0 12px;font:500 11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;color:rgba(236,226,206,.6)} .hx-cards{display:flex;justify-content:center;gap:22px;perspective:900px} .hx-card{--k:#8a5a2b;position:relative;width:112px;padding:0;border:0;background:none;cursor:pointer;font-size:9.4px;color:inherit; transform:rotate(var(--tz,0deg));transition:scale .4s cubic-bezier(.2,1.3,.4,1),filter .3s;filter:brightness(.9) saturate(.9)} .hx-card:nth-child(1){--tz:-4deg}.hx-card:nth-child(2){--tz:1.5deg}.hx-card:nth-child(3){--tz:4deg} .hx-card.k-rent{--k:#3f6b5f}.hx-card.k-loan{--k:#8a4a3b}.hx-card.k-employment{--k:#3e5675} .hx-card .hx-pg{background:linear-gradient(180deg,var(--k) 0 15%,transparent 15%),linear-gradient(135deg,rgba(255,255,255,.2),transparent 38%,rgba(40,20,0,.2) 100%),#e9dfc9; box-shadow:0 1.4em 2em -.6em rgba(0,0,0,.65),inset 0 0 0 1px rgba(120,90,50,.18)} .hx-card .hp-h,.hx-card .hp-seal{display:none} .hx-card .hp-l{top:22%;height:42%;opacity:.6} .hx-card .hp-hl{background:color-mix(in srgb,var(--k) 55%,transparent)} .hx-card .hp-sig{width:38%} .hx-card:hover,.hx-card:focus-visible{scale:1.08;filter:none} .hx-card:hover .hx-pg,.hx-card:focus-visible .hx-pg{box-shadow:0 1.8em 2.4em -.6em rgba(0,0,0,.7),0 0 0 2px var(--k),0 0 1.4em color-mix(in srgb,var(--k) 45%,transparent)} .hx-card:hover .hp-view{transform:translate(-50%,-50%) scale(1.1)} .hx-card:focus{outline:none} .hx-card:focus-visible{outline:2px solid rgba(232,196,120,.8);outline-offset:6px;border-radius:4px} @media (max-width:767px){ html.vc-art .hero .hx-row{margin-top:24px} .hx-cards{gap:14px} .hx-card{width:96px;font-size:8px} } /* ===== แผ่นตัวอย่างเป็นพัด (คอม+มือถือ) ===== */ .hx-cards{--cw:118px;position:relative;display:block;width:calc(var(--cw) + 200px);height:calc(var(--cw) * 1.414 + 34px);margin:0 auto;perspective:none} .hx-cards .hx-card{position:absolute;left:50%;bottom:6px;width:var(--cw);margin-left:calc(var(--cw) / -2);font-size:calc(var(--cw) / 12); transform-origin:50% 120%;transform:translateX(var(--fx,0)) translateY(var(--ly,0)) rotate(var(--fr,0)); transition:transform .55s cubic-bezier(.2,1.25,.4,1),scale .4s cubic-bezier(.2,1.3,.4,1),filter .3s} .hx-cards .hx-card:nth-child(1){--fx:-30px;--fr:-13deg;z-index:1} .hx-cards .hx-card:nth-child(2){--fx:0px;--fr:-1deg;z-index:2} .hx-cards .hx-card:nth-child(3){--fx:30px;--fr:12deg;z-index:1} .hx-cards:hover .hx-card:nth-child(1),.hx-cards:focus-within .hx-card:nth-child(1){--fx:-104px;--fr:-15deg} .hx-cards:hover .hx-card:nth-child(2),.hx-cards:focus-within .hx-card:nth-child(2){--fr:0deg} .hx-cards:hover .hx-card:nth-child(3),.hx-cards:focus-within .hx-card:nth-child(3){--fx:104px;--fr:15deg} .hx-cards .hx-card:hover,.hx-cards .hx-card:focus-visible{--ly:-18px;z-index:5;scale:1.07} .hx-drop{will-change:transform} html.vc-art .hero .hx-row.side{position:absolute;z-index:2;right:clamp(40px,7vw,150px);top:40%;margin:0;transform:translateY(-50%);width:auto} html.vc-art .hero .hx-row.side .hx-row-lab{position:absolute;left:0;right:0;bottom:-30px;margin:0} @media (max-width:767px){ .hx-cards{--cw:90px;width:calc(var(--cw) + 200px)} .hx-cards .hx-card:nth-child(1){--fx:-96px;--fr:-9deg} .hx-cards .hx-card:nth-child(3){--fx:96px;--fr:9deg} .hx-cards .hx-card:nth-child(2){--fr:0deg;--ly:-6px} } /* ===== ตรวจฟรี 2 ครั้ง ===== */ html.vc-art .hero .hx-free{margin:14px auto 0;font:400 13px/1.5 Sarabun,Prompt,sans-serif;color:rgba(236,226,206,.72);text-align:center} html.vc-art .hero .hx-free b{color:#f0cf8f;font-weight:600} .ad-freetag{position:absolute;right:-6px;top:-11px;padding:3px 8px;border-radius:99px;background:#a3361f;color:#fff3e0;font:600 11px/1.2 Prompt,Sarabun,sans-serif;font-style:normal; transform:rotate(6deg);box-shadow:0 2px 5px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap} @media (max-width:767px){html.vc-art .hero .hx-free{font-size:12.5px;margin-top:12px}} .hero.hx-lens-idle :is(.hx-lens,.hx-pool){opacity:0} /* ===== มือถือ: หน้าแรกไม่ตัดแผ่นตัวอย่าง + จัดให้กระชับ (แถบเมนูล่างไม่บัง) ===== */ @media (max-width:767px){ html.vc-spa[data-view="home"] main > .hero,html.vc-art main > .hero{height:auto !important;min-height:100svh;padding-bottom:calc(92px + env(safe-area-inset-bottom))} html.vc-art .hero-main{padding-top:14px !important} html.vc-art .hero .dx-cta-row[hidden]{flex-wrap:nowrap;justify-content:center;gap:10px;margin-top:22px} html.vc-art .hero .dx-cta-row .dx-cta,html.vc-art .hero .dx-cta-row .dx-cta-ghost{flex:1 1 0;min-width:0;padding:14px 10px;font-size:.95rem;text-align:center;white-space:nowrap} html.vc-art .hero .hx-free{margin-top:12px} html.vc-art .hero .hx-row{margin-top:16px} html.vc-art .hero .hx-row-lab{margin-bottom:4px} .hx-cards{--cw:84px !important;width:calc(var(--cw) + 196px) !important} .hx-cards .hx-card:nth-child(1){--fx:-98px} .hx-cards .hx-card:nth-child(3){--fx:98px} } html.vc-art.hx-on .hero-main :is(.dx-cta,.dx-cta-ghost){text-shadow:none} @media (max-width:767px){html.vc-art .hero .dx-cta-row .dx-cta,html.vc-art .hero .dx-cta-row .dx-cta-ghost{font-size:.9rem;padding:14px 6px;overflow:visible}} @media (max-width:767px){html.vc-art .hero .dx-cta-row .dx-cta::after{margin-left:.3em}html.vc-art .hero .dx-cta-row .dx-cta{flex-grow:1.15}} /* ===== ราคา + คำถามที่พบบ่อย ===== */ html.vc-art .hero .hx-free .hx-price{font-size:12.5px;color:rgba(236,226,206,.58)} html.vc-art .hero .hx-free .hx-price a{color:rgba(240,207,143,.9);text-decoration:underline;text-underline-offset:3px;pointer-events:auto} .px-modal .vd-paper{width:min(640px,100%)} .px-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px} .px-plan{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:14px 10px 12px;border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(120,90,50,.22)} .px-plan.p-free{background:rgba(44,122,67,.1);border-color:rgba(44,122,67,.4)} .px-plan.p-main{background:rgba(58,39,20,.08);border-color:rgba(58,39,20,.45);box-shadow:0 0 0 1px rgba(58,39,20,.25) inset} .px-n{font:600 13px/1.3 Prompt,Sarabun,sans-serif;color:#6b5132} .px-p{font:700 26px/1.15 Prompt,Sarabun,sans-serif;color:#2c2218} .px-plan.p-free .px-p{color:#2c7a43} .px-q{font:600 13.5px/1.3 Prompt,Sarabun,sans-serif} .px-plan small{margin-top:4px;font:400 12px/1.4 Sarabun,sans-serif;color:#7a6142} .px-pts{margin:0 0 4px;padding-left:20px} .px-q1{border-top:1px solid rgba(90,60,30,.18);padding:2px 0} .px-q1 summary{cursor:pointer;padding:10px 4px;font:600 14.5px/1.4 Prompt,Sarabun,sans-serif;list-style:none;display:flex;justify-content:space-between;gap:10px} .px-q1 summary::-webkit-details-marker{display:none} .px-q1 summary::after{content:"+";font-weight:400;color:#8a6d45} .px-q1[open] summary::after{content:"–"} .px-q1 p{margin:0 4px 12px;color:#4a3420} @media (max-width:767px){.px-plans{grid-template-columns:1fr;gap:8px}.px-plan{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:8px;padding:10px}.px-p{font-size:20px}.px-plan small{flex-basis:100%;margin-top:0}} .px-modal .sx-free{display:inline-block;margin:0 0 6px;padding:3px 10px;border-radius:99px;background:#2c7a43;color:#fff;font:600 11.5px/1.4 Prompt,Sarabun,sans-serif} /* ===== หน้าต่างเอกสาร: สวยขึ้น อ่านง่ายขึ้น มีอนิเมชั่น (คอม+มือถือ) ===== */ .vd-modal{background:radial-gradient(120% 90% at 50% 40%,rgba(30,20,10,.55),rgba(6,4,2,.82));-webkit-backdrop-filter:blur(7px) saturate(.9);backdrop-filter:blur(7px) saturate(.9)} .vd-modal.on{animation:vdFade .35s ease both} .vd-modal.on .vd-paper{animation:vdUnfold .65s cubic-bezier(.2,.9,.25,1) both;transform-origin:50% 0} @keyframes vdFade{from{opacity:0}} @keyframes vdUnfold{0%{opacity:0;transform:perspective(1400px) translateY(34px) rotateX(-16deg) scale(.95)}55%{opacity:1}100%{opacity:1;transform:none}} .vd-modal .vd-paper{position:relative;width:min(720px,100%);height:min(86vh,820px);border-radius:6px; background: radial-gradient(140% 60% at 50% -10%,rgba(255,255,255,.55),transparent 60%), linear-gradient(180deg,#f6eedd,#ece0c6); box-shadow:0 0 0 1px rgba(150,110,60,.35),0 2px 0 rgba(255,255,255,.5) inset,0 40px 90px -20px rgba(0,0,0,.8),0 12px 30px -10px rgba(0,0,0,.5)} .vd-modal .vd-paper::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 60px rgba(120,80,30,.16);background:repeating-linear-gradient(0deg,rgba(120,90,50,.018) 0 2px,transparent 2px 4px)} .vd-modal .vd-tabs{position:relative;z-index:2;gap:6px;padding:14px 18px 0;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));border-bottom:1px solid rgba(90,60,30,.22)} .vd-modal .vd-tabs button{position:relative;padding:11px 8px 12px;font-size:14.5px;letter-spacing:.01em;transition:color .25s,background .25s} .vd-modal .vd-tabs button::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:#b8862f;transform:scaleX(0);transition:transform .35s cubic-bezier(.2,1.2,.4,1)} .vd-modal .vd-tabs button.on{box-shadow:none} .vd-modal .vd-tabs button.on::after{transform:scaleX(1)} .vd-modal .sx-t.k-rent::after{background:#3f6b5f}.vd-modal .sx-t.k-loan::after{background:#8a4a3b}.vd-modal .sx-t.k-employment::after{background:#3e5675} .vd-prog{position:relative;z-index:2;display:block;height:2px;flex:none;background:linear-gradient(90deg,#b8862f,#e0b25c);transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear;opacity:.85} .vd-modal .vd-body{position:relative;z-index:1;padding:22px 34px 30px;font-size:15.5px;line-height:1.8;color:#2a1f14;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(120,90,50,.4) transparent} .vd-modal .vd-body h4{font-size:25px;line-height:1.25;margin:4px 0 12px;letter-spacing:-.005em} .vd-modal .vd-body h5{font-size:16px;margin:20px 0 6px} .vd-modal .vd-body p,.vd-modal .vd-body li{max-width:62ch} .vd-modal .vd-foot{position:relative;z-index:2;padding:12px 18px 14px;background:linear-gradient(0deg,rgba(255,255,255,.3),rgba(255,255,255,0))} .vd-modal .vd-foot button{transition:transform .2s,box-shadow .2s,background .2s} .vd-modal .vd-foot .vd-ok{box-shadow:0 6px 16px -6px rgba(58,39,20,.7)} .vd-modal .vd-foot .vd-ok:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(58,39,20,.8)} .vd-modal .vd-foot .vd-close:hover{background:rgba(58,39,20,.07)} /* เปลี่ยนแท็บ: เนื้อหาเลื่อนเข้านุ่มๆ */ .vd-body.fresh{animation:vdSwap .45s cubic-bezier(.2,.8,.3,1)} @keyframes vdSwap{from{opacity:0;transform:translateY(10px)}} /* เนื้อหาค่อยๆ ปรากฏเมื่อเลื่อนถึง */ .vd-body .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease var(--rd,0ms),transform .6s cubic-bezier(.2,.8,.3,1) var(--rd,0ms)} .vd-body .rv.in{opacity:1;transform:none} /* สัญญาตัวอย่าง: แต่ละข้อเป็นการ์ด ไฮไลต์ลากเหมือนปากกาเมื่อเลื่อนถึง */ .sx-body .sx-sum{margin:2px 0 18px} .sx-body .sx-b{padding:4px 11px;font-size:12.5px} .sx-c{margin:0 0 12px;padding:14px 16px 14px 18px;border:1px solid rgba(120,90,50,.16);border-top-color:rgba(120,90,50,.16);border-radius:10px;background:rgba(255,255,255,.38);box-shadow:0 1px 0 rgba(255,255,255,.6) inset} .sx-c.f-h{border-left:4px solid #b8321f} .sx-c.f-c{border-left:4px solid #c08a1e} .sx-c > p{line-height:1.8} .sx-c > p b{display:inline-block;min-width:3.2em;color:#6b5132} .sx-c mark{background:none !important;background-image:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 92%,transparent 92%) !important;background-repeat:no-repeat !important;background-size:0% 100% !important; transition:background-size .8s cubic-bezier(.4,0,.2,1) calc(var(--rd,0ms) + .25s);padding:0 2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone} .sx-c.f-h mark{--hl:rgba(214,58,40,.26)} .sx-c.f-c mark{--hl:rgba(214,150,30,.32)} .sx-c.in mark{background-size:100% 100% !important} .sx-n{margin:10px 0 0;padding:10px 13px;border-left:0 !important;border-radius:8px;background:rgba(255,252,244,.85);box-shadow:0 1px 3px rgba(80,50,20,.12);font-size:14.5px;line-height:1.7; opacity:0;transform:translateX(-8px);transition:opacity .45s ease calc(var(--rd,0ms) + .55s),transform .5s cubic-bezier(.2,.8,.3,1) calc(var(--rd,0ms) + .55s)} .sx-c.in .sx-n{opacity:1;transform:none} .sx-body .sx-note{margin-top:18px;padding-top:12px;border-top:1px dashed rgba(120,90,50,.3)} /* ราคา: การ์ดเด้งขึ้นทีละใบ */ .px-plans .px-plan.rv{transform:translateY(14px) scale(.97)} .px-plans .px-plan.rv.in{transform:none} .px-plan{transition:box-shadow .25s,transform .25s} .px-plan:hover{box-shadow:0 10px 24px -12px rgba(58,39,20,.5)} .px-q1 summary{transition:color .2s} .px-q1 summary:hover{color:#7a3b12} .px-q1[open] p{animation:vdSwap .35s ease} /* ข้อกำหนด/นโยบาย: หัวข้อเด่นขึ้น */ .vd-body section > h5{display:flex;align-items:center;gap:8px} .vd-body section > h5::before{content:"";width:6px;height:6px;border-radius:50%;background:#b8862f;flex:none} @media (max-width:767px){ .vd-modal .vd-paper{height:90vh;border-radius:12px} .vd-modal .vd-body{padding:16px 18px 22px;font-size:15px;line-height:1.75} .vd-modal .vd-body h4{font-size:21px} .vd-modal .vd-tabs{padding:10px 10px 0} .vd-modal .vd-tabs button{font-size:13.5px;padding:10px 4px 11px} .sx-c{padding:12px 13px 12px 14px} .sx-n{font-size:14px} @keyframes vdUnfold{0%{opacity:0;transform:translateY(40px) scale(.97)}100%{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){ .vd-modal.on,.vd-modal.on .vd-paper,.vd-body.fresh{animation:none} .vd-body .rv,.sx-n{opacity:1 !important;transform:none !important;transition:none !important} .sx-c mark{background-size:100% 100% !important;transition:none} } /* ===== หน้าต่างเอกสาร v2: สวยขึ้น อ่านง่ายขึ้น + อนิเมชั่น (ตัวอย่าง / ราคา·คำถาม / ข้อกำหนด) คอม+มือถือ ===== */ .vd-modal{background:rgba(10,7,4,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);perspective:1400px} .vd-modal.on{animation:vd2Fade .35s ease} @keyframes vd2Fade{from{background:rgba(10,7,4,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}} .vd-modal .vd-paper{--k:#8a6a3a;width:min(780px,100%);height:min(86vh,820px);border-radius:14px;color:#2a2118; background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,#f2eadb,#e9dec8); box-shadow:0 40px 90px -20px rgba(0,0,0,.75),0 0 0 1px rgba(120,90,50,.25),inset 0 1px 0 rgba(255,255,255,.7); transform-origin:50% 100%;animation:vd2Rise .6s cubic-bezier(.16,1,.3,1)} @keyframes vd2Rise{0%{opacity:0;transform:translateY(60px) rotateX(14deg) scale(.96)}60%{opacity:1}100%{transform:none}} .vd-modal .vd-paper::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:14px 14px 0 0;background:var(--k);opacity:.9} .vd-modal .vd-paper{position:relative} .sx-paper.k-rent{--k:#3f6b5f}.sx-paper.k-loan{--k:#8a4a3b}.sx-paper.k-employment{--k:#3e5675} /* แท็บ */ .vd-modal .vd-tabs{position:relative;gap:2px;padding:16px 18px 0;background:rgba(255,255,255,.25)} .vd-modal .vd-tabs button{border-radius:9px 9px 0 0;padding:11px 10px;font-size:14.5px;color:#7a6142;transition:color .25s,background .25s} .vd-modal .vd-tabs button:hover{color:#2a2118;background:rgba(255,255,255,.35)} .vd-modal .vd-tabs button.on{background:#f6f0e4;color:#2a2118;box-shadow:0 -3px 0 var(--k) inset} .vd-modal .sx-t.on.k-rent{box-shadow:0 -3px 0 #3f6b5f inset}.vd-modal .sx-t.on.k-loan{box-shadow:0 -3px 0 #8a4a3b inset}.vd-modal .sx-t.on.k-employment{box-shadow:0 -3px 0 #3e5675 inset} .vd-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--k,#8a6a3a);transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear;pointer-events:none} /* เนื้อหา: ตัวใหญ่ขึ้น บรรทัดห่างขึ้น คอลัมน์ไม่กว้างเกินอ่าน */ .vd-modal .vd-body{padding:26px clamp(18px,5vw,48px) 30px;font:400 16px/1.8 Sarabun,sans-serif;color:#2f2519;background:#f6f0e4;scroll-behavior:smooth} .vd-modal .vd-body > *{max-width:640px;margin-left:auto;margin-right:auto} .vd-modal .vd-body h4{font:700 26px/1.3 Prompt,Sarabun,sans-serif;margin:6px auto 16px;letter-spacing:-.01em} .vd-modal .vd-body h5{font:600 16.5px/1.45 Prompt,Sarabun,sans-serif;color:#3d2a14;margin:22px auto 6px} .vd-modal .vd-body li{margin:5px 0} .vd-body.vd-swap > *{animation:vd2Swap .45s cubic-bezier(.2,.8,.3,1) both} @keyframes vd2Swap{from{opacity:0;transform:translateY(10px)}} .vd-rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.3,1)} .vd-rv.in{opacity:1;transform:none} .vd-modal .vd-foot{padding:14px 20px;background:rgba(255,255,255,.3);gap:12px} .vd-modal .vd-foot button{padding:12px 20px;border-radius:10px;font-size:14.5px;transition:transform .2s,box-shadow .2s,background .2s} .vd-modal .vd-foot button:hover{transform:translateY(-1px)} .vd-modal .vd-foot .vd-ok{background:var(--k,#3a2714);border-color:transparent;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)} .vd-modal .vd-foot .vd-ok:hover{box-shadow:0 10px 22px -8px rgba(0,0,0,.55)} /* ===== สัญญาตัวอย่าง ===== */ .sx-body .sx-free{background:var(--k)} .sx-sum{display:grid !important;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto 22px !important} .sx-stat{display:flex;flex-direction:column;align-items:center;padding:12px 8px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 0 0 1px rgba(120,90,50,.14)} .sx-stat b{font:700 30px/1.1 Prompt,Sarabun,sans-serif} .sx-stat span{font:500 13px/1.3 Prompt,Sarabun,sans-serif;color:#7a6142} .sx-stat.h b{color:#b8321f}.sx-stat.c b{color:#b97a12}.sx-stat.n b{color:#3d2a14} .sx-c{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px 0 !important;border-top:1px solid rgba(90,60,30,.13) !important} .sx-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13.5px/1 Prompt,sans-serif;color:#7a6142;background:rgba(120,90,50,.1);margin-top:2px} .sx-c.f-h .sx-no{background:#b8321f;color:#fff}.sx-c.f-c .sx-no{background:#b97a12;color:#fff} .sx-cb p{margin:0} .sx-c mark{padding:1px 3px;border-radius:3px;background-repeat:no-repeat;background-size:0% 100%;transition:background-size .7s cubic-bezier(.3,.1,.3,1) .25s} .sx-c.f-h mark{background-color:transparent !important;background-image:linear-gradient(rgba(214,58,40,.24),rgba(214,58,40,.24));color:#7a1a0e} .sx-c.f-c mark{background-color:transparent !important;background-image:linear-gradient(rgba(214,150,30,.3),rgba(214,150,30,.3));color:#6a4300} .sx-c.in mark{background-size:100% 100%} .sx-n{display:flex !important;flex-direction:column;gap:6px;margin:10px 0 0 !important;padding:12px 14px !important;border-radius:10px !important;background:#fff !important;border-left:4px solid #b8321f !important;font-size:14.5px !important;line-height:1.7 !important; opacity:0;transform:translateX(-8px);transition:opacity .5s ease .45s,transform .5s cubic-bezier(.2,.8,.3,1) .45s} .sx-c.f-c .sx-n{border-left-color:#b97a12 !important} .sx-c.in .sx-n{opacity:1;transform:none} .sx-n .sx-b{align-self:flex-start;margin:0 !important} .sx-ok{margin-top:6px !important;font-size:13.5px;color:#2c7a43} .sx-body .sx-note{margin-top:22px !important;padding:12px 14px;border-radius:10px;background:rgba(120,90,50,.08);font-size:13px !important} /* ===== ราคา / คำถาม ===== */ .px-modal .vd-paper{--k:#3a2714} .px-plan{transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.3,1),box-shadow .25s} .px-plan.in:hover{transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)} .px-p{font-size:30px} .px-q1 summary{font-size:16px;padding:14px 4px} .px-q1 p{font-size:15.5px;line-height:1.8;animation:vd2Swap .35s ease} /* ===== ข้อกำหนด/นโยบาย (หน้าต่าง) ===== */ .vd-modal .vd-body .vd-meta{display:inline-block;padding:3px 10px;border-radius:99px;background:rgba(120,90,50,.1)} .vd-modal .vd-body section{padding-bottom:4px;border-bottom:1px solid rgba(90,60,30,.1)} @media (max-width:767px){ .vd-modal{padding:0;align-items:flex-end} .vd-modal .vd-paper{width:100%;height:92vh;border-radius:18px 18px 0 0;animation:vd2Sheet .5s cubic-bezier(.16,1,.3,1)} .vd-modal .vd-paper::before{border-radius:18px 18px 0 0} @keyframes vd2Sheet{from{transform:translateY(100%)}} .vd-modal .vd-body{padding:20px 18px 26px;font-size:15.5px;line-height:1.75} .vd-modal .vd-body h4{font-size:22px} .vd-modal .vd-tabs{padding:12px 10px 0} .vd-modal .vd-tabs button{font-size:13.5px;padding:10px 4px} .sx-c{grid-template-columns:28px 1fr;gap:10px} .sx-no{width:26px;height:26px;font-size:12px} .sx-stat b{font-size:24px} .vd-modal .vd-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom))} .vd-modal .vd-foot .vd-ok{flex:1} } @media (prefers-reduced-motion:reduce){.vd-modal .vd-paper,.vd-modal.on,.vd-body.vd-swap > *{animation:none}.vd-rv,.sx-n{opacity:1;transform:none;transition:none}.sx-c mark{background-size:100% 100%;transition:none}} .vd-modal .vd-body > :is(.sx-free,.vd-meta){display:table} /* ด้านหลังกระดาษล็อกอิน: ใช้หน้าตาแบบใหม่เหมือนหน้าต่าง (ยังเป็น absolute ทับกระดาษ) */ .ad-backside{border-radius:12px} .ad-backside .vd-body{font:400 15px/1.75 Sarabun,sans-serif;background:#f6f0e4;padding:18px 20px 22px} .ad-backside .vd-tabs{position:relative} .ad-backside .vd-prog{--k:#8a6a3a} /* ===== สัญญาตัวอย่าง v3: มาตรวัด + กรอง + กางออก + เช็กลิสต์ ===== */ .sx-body{position:relative} .sx-top{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin:0 auto 6px} .sx-gauge{position:relative;width:200px} .sx-gauge svg{display:block;width:100%;height:auto;overflow:visible} .sx-arc{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.1,.2,1) .3s} .sx-needle{transform-origin:100px 100px;transform:rotate(-90deg);transition:transform 1.4s cubic-bezier(.34,1.4,.4,1) .35s} .sx-gauge.go .sx-needle{transform:rotate(var(--ang))} .sx-gauge.go .sx-arc{stroke-dashoffset:calc(100 - var(--sc))} .sx-gl{position:absolute;left:0;right:0;bottom:-4px;text-align:center;line-height:1.2} .sx-gl span{display:block;font:500 11.5px/1.3 Prompt,Sarabun,sans-serif;color:#7a6142} .sx-gl b{font:700 22px/1.2 Prompt,Sarabun,sans-serif} .sx-gauge.g-h .sx-gl b{color:#b8321f}.sx-gauge.g-c .sx-gl b{color:#b97a12}.sx-gauge.g-l .sx-gl b{color:#2c7a43} .sx-top .sx-sum{margin:0 !important;gap:8px} button.sx-stat{cursor:pointer;border:0;font:inherit;transition:transform .2s,box-shadow .25s,background .25s} button.sx-stat:hover{transform:translateY(-2px)} button.sx-stat.on{box-shadow:0 0 0 2px currentColor,0 8px 18px -10px rgba(0,0,0,.35)} button.sx-stat.h{color:#b8321f}button.sx-stat.c{color:#b97a12}button.sx-stat.n{color:#3d2a14} button.sx-stat.h.on{background:#fbe9e5}button.sx-stat.c.on{background:#fbf1de} .sx-hint{margin:4px auto 10px !important;font-size:12.5px;color:#9a8466;text-align:center} /* รายการข้อ: แถวเดียว เส้นสีเส้นเดียว กางคำอธิบายได้ */ .sx-list .sx-c{display:block !important;margin:0 0 8px !important;padding:0 !important;border:0 !important;border-radius:12px !important;background:#fff !important;box-shadow:0 0 0 1px rgba(120,90,50,.13) !important;overflow:hidden;position:relative} .sx-list .sx-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent} .sx-list .sx-c.f-h::before{background:#b8321f}.sx-list .sx-c.f-c::before{background:#c08a1e} .sx-list .sx-c.hide{display:none !important} .sx-hd{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:start;width:100%;padding:14px 14px 14px 16px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer} .sx-c.f-ok .sx-hd{cursor:default} .sx-hd .sx-no{margin:0} .sx-tx{line-height:1.75} .sx-tag{grid-column:3;align-self:start;margin-top:2px;padding:3px 9px;border-radius:99px;font:600 11.5px/1.3 Prompt,Sarabun,sans-serif;color:#fff;background:#b8321f;white-space:nowrap} .sx-tag.c{background:#b97a12} .sx-chev{grid-column:3;justify-self:center;width:9px;height:9px;margin-top:4px;border-right:2px solid #9a8466;border-bottom:2px solid #9a8466;transform:rotate(45deg);transition:transform .3s} .sx-c.open .sx-chev{transform:rotate(225deg) translate(-2px,-2px)} .sx-okt{grid-column:3;color:#2c7a43;font-weight:700;margin-top:2px} .sx-det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.3,.1,.3,1)} .sx-c.open .sx-det{grid-template-rows:1fr} .sx-det-in{overflow:hidden} .sx-det .sx-nt{margin:0 14px 14px 58px;padding:10px 13px;border-radius:9px;background:#faf5ec;font-size:14.5px;line-height:1.75;color:#4a3420;opacity:0;transform:translateY(-6px);transition:opacity .35s ease .1s,transform .35s ease .1s} .sx-c.open .sx-nt{opacity:1;transform:none} .sx-c.flash{animation:sxFlash 1.4s ease} @keyframes sxFlash{0%,40%{box-shadow:0 0 0 3px var(--k,#c08a1e),0 10px 24px -10px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 1px rgba(120,90,50,.13)}} /* เช็กลิสต์ */ .sx-todo{margin:20px auto 0 !important;padding:16px 16px 10px;border-radius:14px;background:linear-gradient(180deg,#fff,#fbf6ee);box-shadow:0 0 0 1px rgba(120,90,50,.16)} .sx-todo h5{margin:0 0 8px !important;font:700 17px/1.3 Prompt,Sarabun,sans-serif !important;color:#2a2118 !important} .sx-todo ol{list-style:none;margin:0;padding:0} .sx-todo li{margin:0} .sx-todo button{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;width:100%;padding:10px 4px;border:0;border-top:1px solid rgba(90,60,30,.1);background:none;text-align:left;font:400 15px/1.6 Sarabun,sans-serif;color:#2f2519;cursor:pointer;transition:background .2s} .sx-todo li:first-child button{border-top:0} .sx-todo button:hover{background:rgba(120,90,50,.05)} .sx-ck{width:18px;height:18px;margin-top:3px;border-radius:5px;border:2px solid var(--k,#8a6a3a);position:relative;transition:background .25s} .sx-todo button.done .sx-ck{background:var(--k,#8a6a3a)} .sx-todo button.done .sx-ck::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .sx-todo button.done > span:nth-child(2){color:#8a7a66;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)} .sx-to{font:600 12px/1.6 Prompt,sans-serif;color:var(--k,#8a6a3a);white-space:nowrap} .sx-paper.k-rent .sx-body{--k:#3f6b5f}.sx-paper.k-loan .sx-body{--k:#8a4a3b}.sx-paper.k-employment .sx-body{--k:#3e5675} @media (max-width:767px){ .sx-top{grid-template-columns:1fr;gap:6px;justify-items:center} .sx-gauge{width:170px} .sx-top .sx-sum{width:100%} .sx-hd{grid-template-columns:26px 1fr auto;gap:10px;padding:12px 12px 12px 14px} .sx-det .sx-nt{margin:0 12px 12px 14px;font-size:14px} .sx-todo button{font-size:14.5px} } @media (prefers-reduced-motion:reduce){.sx-needle,.sx-arc,.sx-det,.sx-nt{transition:none}} .sx-gl{position:static;margin-top:2px} .sx-side{grid-column:3;display:flex;flex-direction:column;align-items:center;gap:8px} .sx-side .sx-tag,.sx-side .sx-chev,.sx-side .sx-okt{grid-column:auto;margin-top:2px} .sx-c.open .sx-chev{transform:rotate(225deg)} /* ===== สัญญาตัวอย่าง: การ์ดทีละข้อ ===== */ .vd-modal .sx-deckbody{position:relative;overflow:hidden;padding:0 !important;flex:1;min-height:0} .sx-deck{position:absolute;inset:0;perspective:1200px} .sx-slide{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:22px clamp(18px,5vw,48px) 22px; transition:transform .55s cubic-bezier(.2,.8,.25,1),opacity .4s ease;will-change:transform,opacity} .sx-slide.l{transform:translateX(-60%) rotate(-5deg) scale(.92);opacity:0;pointer-events:none} .sx-slide.r{transform:translateX(60%) rotate(5deg) scale(.92);opacity:0;pointer-events:none} .sx-slide.skip{display:none} .sx-slide.cur{transform:none;opacity:1} .sx-sin{max-width:600px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center} /* หน้าสรุป */ .sx-cover .sx-sin{align-items:center;text-align:center} .sx-cover h4{margin:6px 0 10px !important} .sx-cover .sx-gauge{width:220px;margin:4px auto 10px} .sx-cover .sx-sum{display:grid !important;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin:6px 0 16px !important} .sx-start{padding:13px 26px;border:0;border-radius:99px;background:var(--k,#3a2714);color:#fff;font:600 15px/1 Prompt,Sarabun,sans-serif;cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);transition:transform .2s;animation:sxPulse 2.4s ease-in-out 1.6s infinite} .sx-start:hover{transform:translateY(-2px)} @keyframes sxPulse{0%,100%{box-shadow:0 8px 20px -8px rgba(0,0,0,.5),0 0 0 0 color-mix(in srgb,var(--k,#3a2714) 40%,transparent)}50%{box-shadow:0 8px 20px -8px rgba(0,0,0,.5),0 0 0 10px transparent}} .sx-cover .sx-hint{margin:12px 0 0 !important} /* การ์ดข้อ */ .sx-card .sx-sin{justify-content:flex-start;padding-top:min(4vh,28px)} .sx-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .sx-cn{font:500 14px/1 Prompt,Sarabun,sans-serif;color:#8a7356} .sx-cn b{font-size:30px;font-weight:700;color:#2a2118;margin:0 2px} .sx-card .sx-tag{grid-column:auto;font-size:13px;padding:6px 12px} .sx-tag.ok{background:#2c7a43} .sx-q{position:relative;margin:0;padding:22px 22px 22px 26px;border-radius:16px;background:#fff;font:400 18.5px/1.85 Sarabun,sans-serif;color:#2a2118; box-shadow:0 18px 40px -22px rgba(60,40,20,.45),0 0 0 1px rgba(120,90,50,.12)} .sx-q::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:#d8cdb8} .sx-card.f-h .sx-q::before{background:#b8321f}.sx-card.f-c .sx-q::before{background:#c08a1e}.sx-card.f-ok .sx-q::before{background:#3f8a5a} .sx-q mark{padding:1px 3px;border-radius:3px;color:inherit;background:none;background-repeat:no-repeat;background-size:0% 100%;transition:background-size .8s cubic-bezier(.3,.1,.3,1) .35s} .sx-card.f-h .sx-q mark{background-image:linear-gradient(rgba(214,58,40,.25),rgba(214,58,40,.25));color:#7a1a0e} .sx-card.f-c .sx-q mark{background-image:linear-gradient(rgba(214,150,30,.3),rgba(214,150,30,.3));color:#6a4300} .sx-card.cur .sx-q mark{background-size:100% 100%} .sx-why{margin-top:14px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(120,90,50,.12);opacity:0;transform:translateY(10px);transition:opacity .45s ease .55s,transform .45s cubic-bezier(.2,.8,.3,1) .55s} .sx-card.cur .sx-why{opacity:1;transform:none} .sx-why h6{margin:0 0 4px;font:700 13px/1.3 Prompt,Sarabun,sans-serif;letter-spacing:.02em;color:#8a5a2b} .sx-card.f-h .sx-why h6{color:#b8321f}.sx-card.f-c .sx-why h6{color:#a06a10} .sx-why p{margin:0;font-size:16px;line-height:1.8;color:#3d2c1a} .sx-why.ok p{color:#2c7a43} /* หน้าจบ */ .sx-end .sx-sin{justify-content:flex-start;padding-top:10px} .sx-end .sx-todo{margin:0 !important} .sx-again{align-self:center;margin-top:14px;padding:9px 16px;border:1px solid rgba(90,60,30,.3);border-radius:99px;background:none;font:500 13.5px/1 Prompt,Sarabun,sans-serif;color:#6b5132;cursor:pointer} /* แถบนำทาง */ .sx-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px 4px;background:#f6f0e4;flex:none} .sx-arw{width:40px;height:40px;border-radius:50%;border:1px solid rgba(90,60,30,.25);background:#fff;font:400 24px/1 Prompt,sans-serif;color:#3d2a14;cursor:pointer;transition:transform .2s,opacity .2s} .sx-arw:hover:not(:disabled){transform:scale(1.08)} .sx-arw:disabled{opacity:.3;cursor:default} .sx-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:70%} .sx-dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:#d8cdb8;cursor:pointer;transition:width .3s,background .3s} .sx-dot.d-h{background:#e8b3a8}.sx-dot.d-c{background:#ecd29c}.sx-dot.d-ok{background:#bcd3c2} .sx-dot.seen.d-h,.sx-dot.on.d-h{background:#b8321f}.sx-dot.seen.d-c,.sx-dot.on.d-c{background:#c08a1e}.sx-dot.seen.d-ok,.sx-dot.on.d-ok{background:#3f8a5a} .sx-dot.seen.cv,.sx-dot.on.cv,.sx-dot.seen.en,.sx-dot.on.en{background:#6b5132} .sx-dot.on{width:24px} .vd-modal .sx-deckp .vd-foot{padding-top:8px} .vd-modal .sx-deckp .vd-foot:not(.last) .sx-go{opacity:.92} .vd-modal .sx-deckp .vd-foot.last .sx-go{animation:sxPulse 2.4s ease-in-out infinite} @media (max-width:767px){ .sx-slide{padding:18px 16px} .sx-q{font-size:17px;padding:18px 16px 18px 20px} .sx-why p{font-size:15px} .sx-cover .sx-gauge{width:190px} .sx-cn b{font-size:26px} .sx-arw{width:38px;height:38px} } @media (prefers-reduced-motion:reduce){.sx-slide,.sx-why,.sx-q mark{transition:none}.sx-start,.vd-foot.last .sx-go{animation:none}} .sx-arw{display:grid;place-items:center;padding:0 0 3px;line-height:1} /* ===== คอม: หน้าสรุปตัวอย่างสมส่วน (มาตรวัดซ้าย · ตัวเลข+ปุ่มขวา) ไม่ล้นบนจอโน้ตบุ๊กเตี้ย ===== */ @media (min-width:768px){ .vd-modal .sx-deckp{height:min(88vh,720px)} .sx-cover .sx-sin{display:grid;grid-template-columns:minmax(200px,.9fr) 1.1fr;grid-template-areas:"badge badge" "title title" "gauge side";column-gap:clamp(20px,4vw,44px);row-gap:0;align-content:center;align-items:center;text-align:left;max-width:640px} .sx-cover .sx-free{grid-area:badge;justify-self:center;margin:0 0 6px !important} .sx-cover h4{grid-area:title;justify-self:center;margin:0 0 clamp(10px,2.4vh,22px) !important;font-size:clamp(20px,3.2vh,26px) !important} .sx-cover .sx-gauge{grid-area:gauge;width:100%;max-width:min(240px,30vh);margin:0 auto} .sx-cover .sx-gl b{font-size:clamp(18px,2.8vh,24px)} .sx-cside{grid-area:side;display:flex;flex-direction:column;gap:clamp(10px,1.8vh,16px)} .sx-cover .sx-sum{margin:0 !important;grid-template-columns:repeat(3,1fr);gap:8px} .sx-cover .sx-stat{padding:clamp(8px,1.4vh,12px) 6px} .sx-cover .sx-stat b{font-size:clamp(22px,3.6vh,30px)} .sx-cover .sx-start{align-self:flex-start;padding:clamp(10px,1.6vh,13px) 24px} .sx-cover .sx-hint{margin:0 !important;text-align:left;font-size:12px} .sx-slide{padding-top:clamp(14px,2.6vh,22px);padding-bottom:clamp(14px,2.6vh,22px)} .sx-nav{padding-top:6px} } @media (min-width:768px) and (max-height:700px){ .vd-modal .vd-tabs{padding-top:10px} .vd-modal .vd-tabs button{padding:8px 10px} .vd-modal .vd-foot{padding:10px 18px} .sx-arw{width:34px;height:34px} .sx-q{font-size:17px;padding:16px 18px 16px 22px} .sx-why{padding:12px 14px} .sx-why p{font-size:15px} } @media (min-width:768px){ .vd-modal .sx-deckp{height:min(88vh,620px)} .sx-card .sx-sin{justify-content:center;padding-top:0} } /* ===== คอม: หน้า “บัญชี” ไม่แสดงส่วนตรวจสัญญาและผลตรวจ ===== */ @media (min-width:768px){html.vc-spa[data-view="desk"][data-desk="acct"] :is(#checkCard,#resultCard){display:none !important}} /* ===== คอม: หน้า “ตรวจสัญญา” ซ่อนส่วนบัญชี ===== */ .vc-needlogin{display:none} @media (min-width:768px){ html.vc-spa[data-view="desk"][data-desk="check"] #authCard{display:none !important} html.vc-spa[data-view="desk"][data-desk="check"] body:has(#authLoggedOut:not([hidden])) .vc-needlogin{display:flex} html.vc-spa[data-view="desk"][data-desk="check"] #checkCard{margin-top:clamp(70px,10vh,110px)} } .vc-needlogin{align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border-radius:10px; background:rgba(240,207,143,.1);border:1px solid rgba(240,207,143,.35);color:rgba(236,226,206,.85);font:400 14px/1.5 Sarabun,Prompt,sans-serif} .vc-needlogin b{color:#f0cf8f;font-weight:600} .vc-needlogin a{padding:8px 16px;border-radius:99px;background:#f0e6d2;color:#2a1d10;font:600 13.5px/1 Prompt,Sarabun,sans-serif;text-decoration:none;white-space:nowrap} @media (min-width:1280px){html.vc-art.vc-spa[data-view="desk"][data-desk="check"] main > #checkCard{grid-area:6 / 2 / 7 / 4}html.vc-art.vc-spa[data-view="desk"][data-desk="check"] main > #resultCard{grid-area:6 / 4 / 7 / 5}} /* หน้าตรวจสัญญา: พื้นหินดำ (ภาพเรนเดอร์ขึ้นเองต้นฉบับ) — มาจาก art-media.js เป็น --vc-rock */ html[data-view="desk"][data-desk="check"] #vcBackdrop{background:#0b0b0c} html[data-view="desk"][data-desk="check"] #vcBackdrop .hero-3d{visibility:hidden !important} html[data-view="desk"][data-desk="check"] #vcBackdrop::after, html[data-view="desk"][data-desk="check"] body:has(#authLoggedOut:not([hidden])) #vcBackdrop::after{ background:radial-gradient(ellipse 60% 55% at 50% 48%,rgba(255,255,255,.035),transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55)), var(--vc-rock,none) center/cover no-repeat,#0b0b0c !important; opacity:0;animation:vcRockIn 1.1s ease .05s forwards} html:not(.vc-rock-on)[data-view="desk"][data-desk="check"] #vcBackdrop::after{animation:none;opacity:1} @keyframes vcRockIn{to{opacity:1}} @media (max-width:767px){ html[data-view="desk"][data-desk="check"] #vcBackdrop::after, html[data-view="desk"][data-desk="check"] body:has(#authLoggedOut:not([hidden])) #vcBackdrop::after{ background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 50%,rgba(0,0,0,.6)), var(--vc-rock-m,none) center/cover no-repeat,#0b0b0c !important} } @media (prefers-reduced-motion:reduce){html[data-view="desk"][data-desk="check"] #vcBackdrop::after{animation:none;opacity:1}} /* =================================================================== หน้าตรวจสัญญา v2: มืดสะอาด อ่านง่าย น่าเชื่อถือ (6 พ.ย. 2026) ใช้เฉพาะ data-desk="check" — หน้าแรกและหน้าบัญชีไม่เปลี่ยน =================================================================== */ html.vc-art[data-view="desk"][data-desk="check"] {--k-card:rgba(19,19,21,.94);--k-line:rgba(255,255,255,.09);--k-line2:rgba(255,255,255,.15);--k-tx:#ededef;--k-mu:#a3a3aa;--k-fa:#7a7a82;--k-in:#0d0d0f; --k-ff:Prompt,Sarabun,system-ui,sans-serif} /* พื้นหลัง: หินเหลือจาง ๆ ที่ขอบ ตรงกลางมืดเรียบ */ html.vc-art[data-view="desk"][data-desk="check"] #vcBackdrop::after,html.vc-art[data-view="desk"][data-desk="check"] body:has(#authLoggedOut:not([hidden])) #vcBackdrop::after{ background:radial-gradient(ellipse 58% 62% at 50% 48%,rgba(11,11,12,.9),rgba(11,11,12,.5) 100%), var(--vc-rock,none) center/cover no-repeat,#0b0b0c !important} @media (max-width:767px){html.vc-art[data-view="desk"][data-desk="check"] #vcBackdrop::after,html.vc-art[data-view="desk"][data-desk="check"] body:has(#authLoggedOut:not([hidden])) #vcBackdrop::after{ background:linear-gradient(rgba(11,11,12,.72),rgba(11,11,12,.72)),var(--vc-rock-m,none) center/cover no-repeat,#0b0b0c !important}} /* การ์ด */ html.vc-art[data-view="desk"][data-desk="check"] main > :is(#checkCard,#resultCard){background:var(--k-card) !important;border:1px solid var(--k-line) !important;border-radius:18px !important; box-shadow:0 30px 80px -40px rgba(0,0,0,.9) !important;padding:28px 30px 30px !important;color:var(--k-tx);font-family:var(--k-ff)} @media (min-width:1024px){html.vc-art[data-view="desk"][data-desk="check"] main > #resultCard{margin-left:20px !important;align-self:start;position:sticky;top:76px;margin-top:clamp(70px,10vh,110px) !important}} @media (max-width:1023px){html.vc-art[data-view="desk"][data-desk="check"] main > #resultCard{margin-top:16px !important}} @media (max-width:767px){html.vc-art[data-view="desk"][data-desk="check"] main > :is(#checkCard,#resultCard){margin-left:10px !important;margin-right:10px !important;padding:20px 16px 22px !important;border-radius:16px !important} html.vc-art[data-view="desk"][data-desk="check"] main > #checkCard{margin-top:12px !important}} /* หัวข้อ */ html.vc-art[data-view="desk"][data-desk="check"] :is(#checkCard .step-head h2,#resultCard > h2,#checkCard .step-sub h3){font:600 18px/1.4 var(--k-ff) !important;letter-spacing:0 !important;color:var(--k-tx) !important; border:0 !important;padding:0 !important;margin:0 0 18px !important;text-transform:none !important} html.vc-art[data-view="desk"][data-desk="check"] :is(#checkCard .step-head h2,#resultCard > h2)::before,html.vc-art[data-view="desk"][data-desk="check"] :is(#checkCard .step-head h2,#resultCard > h2)::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head{border:0 !important;padding:0 !important;margin:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head::after,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-sub::after,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-sub::before{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-sub{margin:30px 0 0 !important;padding:26px 0 0 !important;border:0 !important;border-top:1px solid var(--k-line) !important} /* แถบให้เข้าสู่ระบบ: โทนกลาง ไม่ใช้ทอง */ html.vc-art[data-view="desk"][data-desk="check"] .vc-needlogin{background:rgba(255,255,255,.04) !important;border:1px solid var(--k-line2) !important;color:var(--k-mu) !important;border-radius:12px !important;margin:0 0 24px !important;padding:12px 14px 12px 16px !important} html.vc-art[data-view="desk"][data-desk="check"] .vc-needlogin b{color:var(--k-tx) !important} html.vc-art[data-view="desk"][data-desk="check"] .vc-needlogin a{background:#f4f4f5 !important;color:#111 !important;border-radius:10px !important;padding:10px 16px !important} /* ประเภทสัญญา */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .field-label{font:500 13.5px/1.4 var(--k-ff) !important;color:var(--k-mu) !important;letter-spacing:0 !important;text-transform:none !important;margin:0 0 8px !important;display:block} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .select-wrap select{background:var(--k-in) !important;border:1px solid var(--k-line2) !important;border-radius:12px !important;padding:13px 42px 13px 14px !important; font:400 15px/1.4 var(--k-ff) !important;color:var(--k-tx) !important;min-height:50px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .select-wrap select:focus{border-color:rgba(255,255,255,.4) !important;box-shadow:0 0 0 3px rgba(255,255,255,.08) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .select-wrap::after{right:16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ct-trigger{background:var(--k-in) !important;border:1px solid var(--k-line2) !important;border-radius:12px !important;box-shadow:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ct-quick button,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ct-quick > *{background:rgba(255,255,255,.04) !important;border:1px solid var(--k-line2) !important;border-radius:99px !important; color:var(--k-tx) !important;font:500 14px/1.2 var(--k-ff) !important;padding:10px 14px !important;box-shadow:none !important;min-height:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ct-quick :is(button[aria-pressed="true"],.is-on,.on){background:#f4f4f5 !important;color:#111 !important;border-color:#f4f4f5 !important} /* ช่องวางสัญญา: ช่องกรอกมืดเรียบ ตัวหนังสือชัด */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap{margin-top:16px;border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap::before,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #input{background:var(--k-in) !important;background-image:none !important;color:var(--k-tx) !important;border:1px solid var(--k-line2) !important;border-radius:14px !important; box-shadow:none !important;outline:0 !important;padding:18px 20px !important;font:400 16px/1.75 Sarabun,var(--k-ff) !important;min-height:clamp(260px,38vh,440px) !important; transition:border-color .2s,box-shadow .2s} html.vc-art[data-view="desk"][data-desk="check"] #input::placeholder{color:var(--k-fa) !important;font-style:normal !important} html.vc-art[data-view="desk"][data-desk="check"] #input:focus{border-color:rgba(255,255,255,.38) !important;box-shadow:0 0 0 4px rgba(255,255,255,.07) !important} html.vc-art[data-view="desk"][data-desk="check"] #input::selection{background:rgba(255,255,255,.25);color:#fff} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-meta{margin-top:12px !important;align-items:center;gap:10px;flex-wrap:wrap} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-count{font:400 12.5px/1 var(--k-ff) !important;color:var(--k-fa) !important;letter-spacing:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-actions{gap:8px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .sample-btn{border:1px solid var(--k-line2) !important;border-radius:99px !important;background:rgba(255,255,255,.03) !important; padding:9px 15px !important;color:#dcdce0 !important;font:500 13.5px/1 var(--k-ff) !important;text-decoration:none !important;box-shadow:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .sample-btn::before,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .sample-btn::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .sample-btn:hover{background:rgba(255,255,255,.08) !important;color:#fff !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .hint{font:400 13px/1.6 var(--k-ff) !important;color:var(--k-fa) !important;margin:14px 0 0 !important} /* ขั้น 2: เสียง + ปกป้องข้อมูล */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .voice-opt{background:rgba(255,255,255,.03) !important;border:1px solid var(--k-line) !important;border-radius:14px !important;padding:14px 16px !important;margin:0 0 12px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .voice-text{font:500 15px/1.4 var(--k-ff) !important;color:var(--k-tx) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .voice-text small{color:var(--k-mu) !important;font-size:13px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps{background:rgba(255,255,255,.03) !important;border:1px solid var(--k-line) !important;border-radius:14px !important;padding:16px !important;margin:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-title b{font:600 15px/1.3 var(--k-ff) !important;color:var(--k-tx) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-title small{font:500 11px/1.3 var(--k-ff) !important;color:var(--k-fa) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-badge{background:rgba(120,200,150,.1) !important;color:#9fdcb4 !important;border:1px solid rgba(120,200,150,.35) !important;border-radius:99px !important; padding:5px 10px !important;font:500 12px/1 var(--k-ff) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-summary{font:400 14px/1.6 var(--k-ff) !important;color:var(--k-mu) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-actions button{border:1px solid var(--k-line2) !important;border-radius:10px !important;background:transparent !important;color:#dcdce0 !important; font:500 13.5px/1 var(--k-ff) !important;padding:10px 14px !important;box-shadow:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-fine{font:400 12.5px/1.6 var(--k-ff) !important;color:var(--k-fa) !important;border:0 !important} /* ขั้น 3: ปุ่มตรวจ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-cost{font:400 14px/1.5 var(--k-ff) !important;color:var(--k-mu) !important;margin:-6px 0 14px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .btns{gap:10px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn{background:#f4f4f5 !important;color:#111 !important;border:0 !important;border-radius:14px !important;min-height:56px !important; font:600 16.5px/1 var(--k-ff) !important;letter-spacing:0 !important;box-shadow:0 10px 30px -12px rgba(255,255,255,.25) !important;transition:background .2s,transform .15s} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:hover:not(:disabled){background:#fff !important;color:#000 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:active:not(:disabled){transform:translateY(1px)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard :is(#checkBtn,#clearBtn)::before{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:disabled{background:rgba(255,255,255,.08) !important;color:var(--k-fa) !important;box-shadow:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #clearBtn{background:transparent !important;color:#dcdce0 !important;border:1px solid var(--k-line2) !important;border-radius:14px !important; min-height:56px !important;font:500 15px/1 var(--k-ff) !important;box-shadow:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #clearBtn:hover{background:rgba(255,255,255,.06) !important;color:#fff !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .disclaimer{font:400 12.5px/1.6 var(--k-ff) !important;color:var(--k-fa) !important;border:0 !important;margin-top:18px !important;padding:0 !important} /* ช่องผลตรวจ */ html.vc-art[data-view="desk"][data-desk="check"] #resultCard > h2{padding-bottom:16px !important;border-bottom:1px solid var(--k-line) !important} html.vc-art[data-view="desk"][data-desk="check"] #resultCard .empty-art{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #resultCard #result > .empty:only-child{display:none} .rs-guide{display:none} html.vc-art[data-view="desk"][data-desk="check"] #resultCard:not(:has(#result > :not(.empty,.empty-art))) .rs-guide{display:block} .rs-title{margin:4px 0 14px;font:500 15px/1.5 Prompt,Sarabun,sans-serif;color:#a3a3aa} .rs-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .rs-list li{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)} .rs-list li > span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#ededef;font:600 13px/1 Prompt,sans-serif} .rs-list b{display:block;font:600 14.5px/1.4 Prompt,Sarabun,sans-serif;color:#ededef;margin-bottom:2px} .rs-list div{font:400 13.5px/1.55 Prompt,Sarabun,sans-serif;color:#a3a3aa} .rs-sample{margin-top:16px;width:100%;min-height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#ededef; font:500 14.5px/1 Prompt,Sarabun,sans-serif;cursor:pointer;transition:background .2s} .rs-sample:hover{background:rgba(255,255,255,.07)} html.vc-art[data-view="desk"][data-desk="check"] :is(#checkCard .step-head h2,#resultCard > h2,#checkCard .step-sub h3){background:none !important;background-image:none !important} html.vc-art[data-view="desk"][data-desk="check"] #resultCard > h2{border-bottom:1px solid var(--k-line) !important;padding-bottom:16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-title b::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"].vc-specks body::before{opacity:.25 !important} html.vc-art[data-view="desk"][data-desk="check"] #resultCard:not(:has(#result > :not(.empty,.empty-art))) #result > .empty{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .voice-opt input[type="checkbox"]{accent-color:#f4f4f5} @media (min-width:1024px){html.vc-art[data-view="desk"][data-desk="check"] main > #resultCard{margin-top:clamp(70px,10vh,110px) !important}} /* =================================================================== หน้าต่างเลือกประเภทสัญญาใหม่ + บ้าน 3D (7 พ.ย. 2026) — คอมและมือถือ =================================================================== */ html.vcp-on #checkCard :is(.select-wrap,.ct-trigger,.ct-quick,.ct-reset){display:none !important} html.vcp-on .ct-sheet{display:none !important} .vcp-trigger{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:12px 14px 12px 12px;text-align:left;cursor:pointer; background:#0d0d0f;border:1px solid rgba(255,255,255,.15);border-radius:14px;color:#ededef;font-family:Prompt,Sarabun,sans-serif; transition:border-color .2s,background .2s,box-shadow .2s} .vcp-trigger:hover{border-color:rgba(255,255,255,.32);background:#111114} .vcp-trigger:focus-visible{outline:none;border-color:rgba(255,255,255,.45);box-shadow:0 0 0 4px rgba(255,255,255,.08)} .vcp-trigger::before,.vcp-trigger::after{display:none !important} .vcp-ti{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center; background:radial-gradient(circle at 30% 25%,#2c2c32,#17171a);border:1px solid rgba(255,255,255,.08)} .vcp-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .vcp-tt b{font:600 16px/1.3 Prompt,Sarabun,sans-serif;color:#ededef} .vcp-tt small{font:400 13px/1.45 Prompt,Sarabun,sans-serif;color:#a3a3aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vcp-tc{flex:none;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.16);font:500 13px/1 Prompt,sans-serif;color:#dcdce0;transition:background .2s} .vcp-trigger:hover .vcp-tc{background:rgba(255,255,255,.08);color:#fff} .vcp-trigger.is-bump{animation:vcpBump .5s cubic-bezier(.3,1.6,.5,1)} @keyframes vcpBump{40%{transform:scale(1.015);border-color:rgba(255,255,255,.5)}} html.vcp-open,html.vcp-open body{overflow:hidden} .vcp{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;font-family:Prompt,Sarabun,sans-serif;color:#ededef} .vcp[hidden]{display:none} .vcp-bg{position:absolute;inset:0;background:rgba(5,5,6,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s} .vcp.is-open .vcp-bg{opacity:1} .vcp-panel{position:relative;width:min(1040px,94vw);height:min(640px,88vh);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden; background:#131315;border:1px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:0 50px 120px -30px rgba(0,0,0,.95); opacity:0;transform:translateY(16px) scale(.975);transition:opacity .28s ease,transform .38s cubic-bezier(.2,.9,.25,1)} .vcp.is-open .vcp-panel{opacity:1;transform:none} /* เวที 3D */ .vcp-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 42%,#2b2a31 0%,#1a1a1e 55%,#0f0f11 100%);border-right:1px solid rgba(255,255,255,.07)} .vcp-floor{position:absolute;left:12%;right:12%;bottom:22%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transition:opacity .4s} .vcp-stage.is-house .vcp-floor{opacity:0} .vcp-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;opacity:0;transition:opacity .5s} .vcp-cv[data-grab]{cursor:grabbing} .vcp-stage.is-house.house-ready .vcp-cv{opacity:1} .vcp-stage:not(.is-house) .vcp-cv{pointer-events:none} .vcp-big{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))} .vcp-big svg{display:block;width:min(200px,42vw);height:auto} .vcp-big.is-in{animation:vcpIn .55s cubic-bezier(.2,1.3,.4,1) forwards,vcpFloat 4.2s ease-in-out .55s infinite} .vcp-stage.is-house .vcp-big{display:none} @keyframes vcpIn{from{opacity:0;transform:translate(-50%,-40%) scale(.8) rotate(-6deg)}to{opacity:1;transform:translate(-50%,-50%)}} @keyframes vcpFloat{0%,100%{opacity:1;transform:translate(-50%,-50%)}50%{opacity:1;transform:translate(-50%,-54%) rotate(2deg)}} .vcp-load{position:absolute;left:0;right:0;top:46%;margin:0;text-align:center;font-size:14px;color:#a3a3aa} .vcp-cap{position:absolute;left:28px;right:28px;bottom:56px;display:flex;flex-direction:column;gap:6px;pointer-events:none} .vcp-cn{font:600 24px/1.25 Prompt,sans-serif;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.8)} .vcp-cs{font:400 14px/1.5 Prompt,Sarabun,sans-serif;color:#c3c3c9;text-shadow:0 1px 10px rgba(0,0,0,.9)} .vcp-drag{position:absolute;top:18px;left:20px;margin:0;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1); font-size:12px;color:#cfcfd4;opacity:0;transition:opacity .4s;pointer-events:none} .vcp-stage.is-house.house-ready .vcp-drag{opacity:1} .vcp-credit{position:absolute;left:28px;right:28px;bottom:18px;margin:0;font-size:11px;line-height:1.4;color:#77777e;opacity:0;transition:opacity .4s} .vcp-credit a{color:#a3a3aa} .vcp-stage.is-house .vcp-credit{opacity:1} /* รายการ */ .vcp-side{display:flex;flex-direction:column;min-height:0;padding:26px 26px 0} .vcp-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .vcp-head h3{margin:0;font:600 21px/1.3 Prompt,sans-serif;color:#fff} .vcp-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#dcdce0;font-size:15px;cursor:pointer} .vcp-x:hover{background:rgba(255,255,255,.08)} .vcp-sub{margin:6px 0 16px;font-size:13.5px;line-height:1.55;color:#a3a3aa} .vcp-list{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;padding:2px 2px 16px;scrollbar-width:thin} .vcp-opt{position:relative;display:flex;gap:11px;align-items:flex-start;text-align:left;padding:12px;border-radius:14px;cursor:pointer; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#ededef;font-family:inherit; opacity:0;transform:translateY(8px);transition:background .18s,border-color .18s,transform .18s} .vcp.is-open .vcp-opt{animation:vcpOpt .42s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(var(--i) * 28ms + 80ms)} @keyframes vcpOpt{to{opacity:1;transform:none}} .vcp-opt::before,.vcp-opt::after{display:none !important} .vcp-opt:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.18)} .vcp-opt:focus-visible{outline:none;border-color:rgba(255,255,255,.45)} .vcp-opt.is-on{background:rgba(255,255,255,.1);border-color:#f4f4f5;box-shadow:inset 0 0 0 1px #f4f4f5} .vcp-oi{flex:none;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#2c2c32,#17171a)} .vcp-ot{min-width:0;display:flex;flex-direction:column;gap:3px} .vcp-ot b{font:600 14.5px/1.3 Prompt,sans-serif} .vcp-ot small{font:400 12px/1.45 Prompt,Sarabun,sans-serif;color:#9a9aa1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vcp-3d{position:absolute;top:8px;right:8px;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.1);font:600 9.5px/1 Prompt,sans-serif;letter-spacing:.06em;color:#dcdce0;font-style:normal} .vcp-foot{flex:none;padding:14px 0 22px;border-top:1px solid rgba(255,255,255,.07)} .vcp-ok{width:100%;min-height:52px;border:0;border-radius:14px;background:#f4f4f5;color:#111;font:600 16px/1 Prompt,sans-serif;cursor:pointer;transition:background .2s,transform .15s} .vcp-ok:hover{background:#fff} .vcp-ok:active{transform:translateY(1px)} /* มือถือ: แผ่นเต็มจอจากด้านล่าง */ @media (max-width:767px){ .vcp{place-items:end center} .vcp-panel{width:100vw;height:94dvh;height:94vh;grid-template-columns:1fr;grid-template-rows:minmax(200px,36%) 1fr;border-radius:22px 22px 0 0;border-bottom:0; transform:translateY(40px)} .vcp-stage{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)} .vcp-big{top:42%} .vcp-big svg{width:min(130px,34vw)} .vcp-cap{left:18px;right:18px;bottom:34px;gap:3px} .vcp-cn{font-size:19px} .vcp-cs{font-size:12.5px} .vcp-credit{left:18px;bottom:10px;font-size:10px} .vcp-drag{top:12px;left:14px;font-size:11px} .vcp-side{padding:16px 14px 0} .vcp-head h3{font-size:18px} .vcp-sub{font-size:12.5px;margin:4px 0 12px} .vcp-list{gap:8px} .vcp-opt{padding:10px;gap:9px} .vcp-oi{width:36px;height:36px} .vcp-oi svg{width:24px;height:24px} .vcp-ot b{font-size:13.5px} .vcp-ot small{font-size:11.5px} .vcp-foot{padding:12px 0 calc(14px + env(safe-area-inset-bottom))} .vcp-trigger{padding:10px 12px 10px 10px;gap:12px} .vcp-ti{width:46px;height:46px} .vcp-tt b{font-size:15px} .vcp-tt small{font-size:12px} .vcp-tc{padding:7px 11px;font-size:12px} } @media (prefers-reduced-motion:reduce){.vcp-panel,.vcp-opt,.vcp-big{transition:none !important;animation:none !important;opacity:1 !important;transform:none !important}.vcp-big{transform:translate(-50%,-50%) !important}} .vcp-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(transparent,rgba(12,12,14,.82))} .vcp-stage > :is(.vcp-cap,.vcp-credit,.vcp-drag,.vcp-load){z-index:2} .vcp-tags{position:absolute;top:18px;right:18px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:60%;pointer-events:none} .vcp-tags span{padding:6px 11px;border-radius:99px;background:rgba(10,10,12,.55);border:1px solid rgba(255,255,255,.14);font:500 12px/1 Prompt,sans-serif;color:#ededef; opacity:0;transform:translateY(-6px);animation:vcpTag .4s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(var(--i) * 70ms + 250ms)} .vcp-stage[data-ct="sale"] .vcp-tags span:first-child,.vcp-stage[data-ct="rent"] .vcp-tags span:first-child{background:#f4f4f5;color:#111;border-color:#f4f4f5} @keyframes vcpTag{to{opacity:1;transform:none}} @media (max-width:767px){.vcp-tags{top:12px;right:12px;gap:5px}.vcp-tags span{padding:5px 9px;font-size:11px}} /* ถ้าแอนิเมชันถูกปิด (โหมดประหยัด/ลดการเคลื่อนไหว) ป้ายและการ์ดต้องยังมองเห็น */ .vcp-tags span{opacity:1;transform:none;animation:vcpTagIn .4s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i) * 70ms + 250ms)} @keyframes vcpTagIn{from{opacity:0;transform:translateY(-6px)}} .vcp-opt{opacity:1;transform:none} .vcp.is-open .vcp-opt{animation:vcpOptIn .42s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i) * 28ms + 80ms)} @keyframes vcpOptIn{from{opacity:0;transform:translateY(8px)}} /* สัญญาเช่า: สลับ บ้าน / คอนโด */ .vcp-cvx{opacity:0 !important;pointer-events:none !important} .vcp-stage.is-x .vcp-cv:not(.vcp-cvx){opacity:0 !important;pointer-events:none !important} .vcp-stage.is-x.x-ready[data-m="condo"] .vcp-cvx[data-m="condo"],.vcp-stage.is-x.x-ready[data-m="room"] .vcp-cvx[data-m="room"],.vcp-stage.is-x.x-ready[data-m="dutch"] .vcp-cvx[data-m="dutch"],.vcp-stage.is-x.x-ready[data-m="land"] .vcp-cvx[data-m="land"]{opacity:1 !important;pointer-events:auto !important} .vcp-stage.is-x .vcp-floor{opacity:1;bottom:16%;left:8%;right:8%} .vcp-stage.is-x.x-ready .vcp-drag{opacity:1} .vcp-tags .vcp-tg{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:99px; background:rgba(10,10,12,.55);border:1px solid rgba(255,255,255,.3);font:500 12px/1 Prompt,sans-serif;color:#ededef; animation:vcpTagIn .4s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i) * 70ms + 250ms);transition:background .2s,color .2s} .vcp-tags .vcp-tg::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;opacity:.8} .vcp-tags .vcp-tg:hover{background:rgba(255,255,255,.12)} .vcp-tags .vcp-tg.is-m{background:#f4f4f5;color:#111;border-color:#f4f4f5} .vcp-tags .vcp-tg.is-m::before{background:currentColor} .vcp-stage[data-ct] .vcp-tags span:first-child{background:rgba(10,10,12,.55);color:#ededef;border-color:rgba(255,255,255,.14)} .vcp-tags span.is-m{background:#f4f4f5 !important;color:#111 !important;border-color:#f4f4f5 !important} @media (max-width:767px){.vcp-tags .vcp-tg{padding:6px 10px;font-size:11.5px}} @media (max-width:767px){ .vcp-stage[data-ct="sale"] .vcp-tags > :nth-child(n+4),.vcp-stage[data-ct="rent"] .vcp-tags > :nth-child(n+4){display:none} .vcp-credit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px} } .vcp-stage[data-m="land"] .vcp-credit{opacity:0 !important} @media (max-width:767px){.vcp-tags{flex-wrap:nowrap;max-width:72%}.vcp-tags .vcp-tg{padding:6px 8px;font-size:11px;white-space:nowrap;gap:4px}} .vcp-opt .vcp-3d{top:auto;right:auto;bottom:10px;left:12px} @media (max-width:767px){.vcp-opt .vcp-3d{left:14px;bottom:9px}} .vcp-opt:has(.vcp-3d){min-height:96px} @media (max-width:767px){.vcp-opt:has(.vcp-3d){min-height:86px}} /* ===== ห้อง 3D: จุดชี้อธิบาย / กลางคืน ===== */ .vcp-spots{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s} .vcp-stage.house-ready:not(.is-x) .vcp-spots,.vcp-stage.is-x.x-ready .vcp-spots{opacity:1} .vcp-spot{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;will-change:transform} .vcp-spot::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(240,180,60,.95),0 2px 10px rgba(0,0,0,.6)} .vcp-spot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,214,120,.9);animation:vcpPing 1.8s ease-out infinite} .vcp-spot i{position:absolute;left:50%;top:50%;width:8px;height:2px;margin:-1px 0 0 -4px;background:#c47a10;z-index:1} .vcp-spot i::after{content:"";position:absolute;left:3px;top:-3px;width:2px;height:8px;background:#c47a10} .vcp-spot.is-on::before{background:#f0b43c}.vcp-spot.is-on i,.vcp-spot.is-on i::after{background:#fff} @keyframes vcpPing{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.35);opacity:0}} .vcp-tip{position:absolute;z-index:4;padding:10px 12px;border-radius:12px;background:rgba(18,18,22,.94);border:1px solid rgba(240,180,60,.55); color:#f2f2f4;font:500 13px/1.5 Prompt,Sarabun,sans-serif;box-shadow:0 12px 30px -10px rgba(0,0,0,.8);pointer-events:auto} .vcp-tip[hidden]{display:none} .vcp-night{position:absolute;z-index:3;left:20px;top:58px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 8px;border-radius:99px;cursor:pointer; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);color:#e6e6ea;font:500 12px/1 Prompt,sans-serif;opacity:0;transition:opacity .4s,background .2s} .vcp-stage.house-ready:not(.is-x) .vcp-night,.vcp-stage.is-x.x-ready .vcp-night{opacity:1} .vcp-stage:not(.is-house) .vcp-night{display:none} .vcp-nico{width:14px;height:14px;border-radius:50%;box-shadow:inset -4px -2px 0 0 #f2d27a} .vcp-night[aria-pressed="true"] .vcp-nico{background:#f6c64a;box-shadow:0 0 8px #f6c64a} .vcp-night[aria-pressed="true"]{background:rgba(255,255,255,.12)} .vcp-stage.is-night{background:radial-gradient(ellipse 80% 70% at 50% 42%,#1a1d2b 0%,#0f1018 55%,#08080c 100%)} @media (max-width:767px){.vcp-night{left:14px;top:48px;font-size:11px;padding:5px 9px 5px 7px}.vcp-tip{font-size:12px}} @media (prefers-reduced-motion:reduce){.vcp-spot::after{animation:none;opacity:.6}} /* ===== ภาพย่อประเภทสัญญา (จากฉาก 3D) + ขยับ ===== */ .vcp-th{display:grid;place-items:center;width:100%;height:100%;background:none no-repeat;background-size:900% 100%; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));transition:transform .35s cubic-bezier(.3,1.6,.5,1)} .vcp-oi{width:58px !important;height:58px !important;padding:3px;background:radial-gradient(circle at 50% 40%,#34343c,#18181c) !important} .vcp-ti{padding:3px} .vcp-opt:hover .vcp-th,.vcp-opt:focus-visible .vcp-th{transform:translateY(-3px) scale(1.14) rotate(-4deg)} .vcp-opt.is-on .vcp-th{animation:vcpThFloat 2.8s ease-in-out infinite} .vcp-trigger:hover .vcp-th{transform:scale(1.1) rotate(-3deg)} .vcp-trigger.is-bump .vcp-th{animation:vcpThPop .6s cubic-bezier(.3,1.6,.5,1)} @keyframes vcpThFloat{0%,100%{transform:translateY(0) scale(1.08)}50%{transform:translateY(-4px) scale(1.12) rotate(2deg)}} @keyframes vcpThPop{0%{transform:scale(.6) rotate(-10deg)}100%{transform:none}} .vcp-big .vcp-th{width:min(230px,46vw) !important;height:min(230px,46vw) !important} .vcp-opt .vcp-3d{left:16px} @media (max-width:767px){.vcp-oi{width:48px !important;height:48px !important}.vcp-oi .vcp-th{width:100%;height:100%}.vcp-opt .vcp-3d{left:17px} .vcp-big .vcp-th{width:min(150px,40vw) !important;height:min(150px,40vw) !important}} @media (prefers-reduced-motion:reduce){.vcp-th{transition:none;animation:none !important}} .vcp-opt .vcp-3d{bottom:6px} .vcp-th svg{width:60%;height:60%} /* ===== ไอคอนเส้น + กล่องไล่สี (แทนภาพย่อ 3D) ===== */ .vcp-th.vcp-li{display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,var(--a),var(--b)) !important;filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 6px rgba(0,0,0,.18),0 8px 16px -8px var(--b)} .vcp-th.vcp-li svg{width:54% !important;height:54% !important;display:block !important;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))} .vcp-oi:has(.vcp-li),.vcp-ti:has(.vcp-li){background:none !important;border:0 !important;padding:0 !important} .vcp-oi:has(.vcp-li){width:48px !important;height:48px !important} .vcp-big .vcp-li{border-radius:44px} .vcp-big .vcp-li svg{stroke-width:1.5} @media (max-width:767px){.vcp-oi:has(.vcp-li){width:42px !important;height:42px !important}.vcp-th.vcp-li{border-radius:11px}.vcp-big .vcp-li{border-radius:32px}} /* ===== โทนไอคอน: กราไฟต์ + เส้นพาสเทล / ขึ้นสีประจำเบาๆ ตอนชี้หรือเลือก ===== */ .vcp-th.vcp-li{background:linear-gradient(145deg,#2b2b32,#1a1a1f) !important;border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 14px -8px rgba(0,0,0,.8);transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .35s,border-color .35s,box-shadow .35s} .vcp-th.vcp-li svg{stroke:var(--a);stroke:color-mix(in srgb,var(--a) 62%,#fff);stroke-width:1.7;filter:none;opacity:.92;transition:stroke .35s,opacity .35s} .vcp-opt:hover .vcp-li,.vcp-opt:focus-visible .vcp-li,.vcp-opt.is-on .vcp-li,.vcp-trigger .vcp-li,.vcp-big .vcp-li{ background:linear-gradient(145deg,color-mix(in srgb,var(--a) 34%,#1e1e24),color-mix(in srgb,var(--b) 30%,#131317)) !important; border-color:color-mix(in srgb,var(--a) 45%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px -10px color-mix(in srgb,var(--b) 70%,transparent)} .vcp-opt:hover .vcp-li svg,.vcp-opt.is-on .vcp-li svg,.vcp-trigger .vcp-li svg,.vcp-big .vcp-li svg{stroke:#fff;opacity:1} /* ===== "ใช้กับ" + คำแนะนำครั้งแรก ===== */ .vcp-use{font:500 13px/1.45 Prompt,Sarabun,sans-serif;color:#e9d7a8;text-shadow:0 1px 10px rgba(0,0,0,.9)} .vcp-use[hidden]{display:none} .vcp-hint{position:absolute;z-index:4;pointer-events:none;padding:6px 10px;border-radius:99px;background:#f0b43c;color:#1b1406; font:600 12px/1.2 Prompt,sans-serif;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.7);animation:vcpHint 1.6s ease-in-out infinite} .vcp-hint[hidden]{display:none} .vcp-hint-spot{left:0;top:0} .vcp-hint-tag{top:60px;right:18px} .vcp-hint-tag::before{content:"";position:absolute;top:-5px;right:22px;border:5px solid transparent;border-top:0;border-bottom-color:#f0b43c} @keyframes vcpHint{0%,100%{opacity:1}50%{opacity:.72}} .vcp-stage:not(.house-ready):not(.x-ready) .vcp-hint{display:none} @media (max-width:767px){.vcp-use{font-size:11.5px}.vcp-hint{font-size:11px;padding:5px 9px}.vcp-hint-tag{top:46px;right:12px}} @media (prefers-reduced-motion:reduce){.vcp-hint{animation:none}} /* ===== หน้าต่างเชิญสมัคร (วางก่อน สมัครทีหลัง) ===== */ .vag{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;font-family:Prompt,Sarabun,sans-serif;color:#ededef} .vag[hidden]{display:none} .vag-bg{position:absolute;inset:0;background:rgba(5,5,6,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s} .vag-card{position:relative;width:min(400px,92vw);padding:28px 24px 20px;border-radius:20px;background:#151518;border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 90px -30px rgba(0,0,0,.95);text-align:center;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .22s,transform .3s cubic-bezier(.2,.9,.25,1)} .vag.is-open .vag-bg,.vag.is-open .vag-card{opacity:1}.vag.is-open .vag-card{transform:none} .vag-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#cfcfd4;cursor:pointer} .vag-ic{width:60px;height:60px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#1f4d3d,#12261f);border:1px solid rgba(52,211,153,.4)} .vag-ic svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .vag-card h3{margin:0;font:600 21px/1.35 Prompt,sans-serif;color:#fff} .vag-sub{margin:6px 0 16px;font-size:14.5px;color:#b8b8bf}.vag-sub b{color:#9fdcb4} .vag-list{list-style:none;margin:0 0 20px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);text-align:left;display:grid;gap:8px} .vag-list li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:#d6d6db} .vag-list li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2px solid #34d399;border-bottom:2px solid #34d399;transform:rotate(-45deg)} .vag-go{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;background:#f4f4f5;color:#111;font:600 16px/1 Prompt,sans-serif;text-decoration:none} .vag-go:hover{background:#fff} .vag-later{margin-top:8px;width:100%;min-height:42px;border:0;background:transparent;color:#9a9aa1;font:500 14px/1 Prompt,sans-serif;cursor:pointer} .vag-note{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.35);color:#bfeed4;font:500 13.5px/1.5 Prompt,Sarabun,sans-serif} .vag-note[hidden]{display:none} /* ===== หน้าต่างเชิญสมัคร: ฉาก 3D + การ์ดเอียง ===== */ .vag{perspective:1100px} .vag-card{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;transform-style:preserve-3d;padding-top:10px;overflow:hidden} .vag.is-open .vag-card{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:opacity .22s,transform .25s ease-out} .vag-stage{position:relative;height:210px;margin:0 -24px 6px;transform:translateZ(40px); background:radial-gradient(ellipse 60% 70% at 50% 55%,rgba(52,211,153,.16),transparent 70%)} .vag-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .vag-card h3{transform:translateZ(30px)}.vag-sub{transform:translateZ(22px)}.vag-list{transform:translateZ(16px)}.vag-go{transform:translateZ(34px)} .vag-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2; background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.09),transparent 45%);mix-blend-mode:screen} .vag-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .vag-x{display:grid;place-items:center;padding:0;min-height:0 !important;min-width:0;width:36px;height:36px;aspect-ratio:1;line-height:1;font-size:14px;z-index:3;transform:translateZ(50px)} .vag-x::before,.vag-x::after{display:none !important} @media (max-width:767px){.vag-stage{height:196px}} @media (prefers-reduced-motion:reduce){.vag.is-open .vag-card{transform:none}} /* ===== แถบความมั่นใจใต้ปุ่มตรวจ ===== */ .trust-bar{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .trust-bar li{display:flex} .trust-bar li > a{display:flex;flex:1;text-decoration:none;color:inherit} .trust-bar li,.trust-bar li > a{align-items:center;gap:9px} .trust-bar li{padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);font:400 12px/1.4 Prompt,Sarabun,sans-serif;color:#a3a3aa;transition:border-color .2s,background .2s} .trust-bar li:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)} .trust-bar svg{flex:none;width:30px;height:30px;padding:6px;border-radius:9px;background:linear-gradient(145deg,#2b2b32,#1a1a1f);border:1px solid rgba(255,255,255,.08); fill:none;stroke:var(--a);stroke:color-mix(in srgb,var(--a) 65%,#fff);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box} .trust-bar span{display:flex;flex-direction:column;min-width:0} .trust-bar b{font-weight:600;color:#e6e6ea;font-size:12.5px} @media (max-width:767px){.trust-bar{grid-template-columns:1fr;gap:6px}.trust-bar li{padding:9px 11px}.trust-bar span{flex-direction:row;flex-wrap:wrap;gap:0 5px}} /* ===== คลังสัญญาตัวอย่าง ===== */ .vsl{position:fixed;inset:0;z-index:2147483050;display:grid;place-items:center;font-family:Prompt,Sarabun,sans-serif;color:#ededef} .vsl[hidden]{display:none} .vsl-bg{position:absolute;inset:0;background:rgba(5,5,6,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s} .vsl-card{position:relative;width:min(760px,94vw);max-height:86vh;display:flex;flex-direction:column;padding:22px 22px 14px;border-radius:20px;background:#151518;border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 90px -30px rgba(0,0,0,.95);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s,transform .3s cubic-bezier(.2,.9,.25,1)} .vsl.is-open .vsl-bg,.vsl.is-open .vsl-card{opacity:1}.vsl.is-open .vsl-card{transform:none} .vsl-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .vsl-head h3{margin:0;font:600 20px/1.3 Prompt,sans-serif;color:#fff}.vsl-head p{margin:4px 0 0;font-size:13px;color:#a3a3aa} .vsl-x{flex:none;display:grid;place-items:center;padding:0;min-height:0 !important;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#cfcfd4;font-size:14px;cursor:pointer} .vsl-x::before,.vsl-x::after{display:none !important} .vsl-chips{display:flex;gap:6px;overflow-x:auto;margin:16px -22px 12px;padding:0 22px 4px;scrollbar-width:none} .vsl-chips::-webkit-scrollbar{display:none} .vsl-chip{flex:none;padding:8px 13px;min-height:0 !important;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#dcdce0;font:500 13px/1 Prompt,sans-serif;cursor:pointer} .vsl-chip::before,.vsl-chip::after{display:none !important} .vsl-chip small{opacity:.55;margin-left:2px} .vsl-chip.is-on{background:#f4f4f5;color:#111;border-color:#f4f4f5} .vsl-list{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;padding:2px} .vsl-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:13px 14px;min-height:0 !important;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#ededef;font-family:inherit;cursor:pointer;transition:background .18s,border-color .18s} .vsl-item::before,.vsl-item::after{display:none !important} .vsl-item:hover,.vsl-item:focus-visible{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);outline:none} .vsl-tag{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.08);font:600 10.5px/1.2 Prompt,sans-serif;color:#cfcfd4} .vsl-item b{font:600 14.5px/1.35 Prompt,sans-serif} .vsl-item small{font:400 12.5px/1.45 Prompt,Sarabun,sans-serif;color:#f0c46a} .vsl-item em{font:400 11.5px/1.3 Prompt,sans-serif;color:#7d7d85;font-style:normal} .vsl-fine{margin:10px 0 0;font-size:11.5px;color:#77777e;text-align:center} @media (max-width:767px){.vsl{place-items:end center}.vsl-card{width:100vw;max-height:88vh;border-radius:20px 20px 0 0;padding:18px 14px calc(12px + env(safe-area-inset-bottom))} .vsl-chips{margin:14px -14px 10px;padding:0 14px 4px}.vsl-list{grid-template-columns:1fr}} .vsl-chips{flex:none}.vsl-chip{height:auto !important}.vsl-list{grid-auto-rows:min-content}.vsl-item{height:auto !important;max-height:none !important;overflow:visible}.vsl-head,.vsl-fine{flex:none} /* ภาพประกอบในคลังสัญญาตัวอย่าง */ .vsl-item{flex-direction:row !important;align-items:center !important;gap:13px !important} .vsl-txt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} .vsl-art{flex:none;width:72px;height:72px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--a) 24%,#1f1f25),color-mix(in srgb,var(--a) 8%,#141418)); border:1px solid color-mix(in srgb,var(--a) 32%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .3s cubic-bezier(.3,1.6,.5,1)} .vsl-art svg{width:78%;height:78%;overflow:visible} .vsl-art .w{fill:#eef0f3}.vsl-art .d{fill:#24242b}.vsl-art .a{fill:var(--a);fill:color-mix(in srgb,var(--a) 80%,#fff)} .vsl-art .as{stroke:var(--a);stroke:color-mix(in srgb,var(--a) 80%,#fff);fill:none} .vsl-item:hover .vsl-art{transform:translateY(-2px) rotate(-3deg) scale(1.05)} @media (max-width:767px){.vsl-art{width:62px;height:62px;border-radius:14px}} @media (prefers-reduced-motion:reduce){.vsl-art{transition:none}} /* ===== ดูสัญญาตัวอย่างก่อนใช้ ===== */ .vsl.is-view .vsl-chips,.vsl.is-view .vsl-list{display:none} .vsl-view{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:14px} .vsl-view[hidden]{display:none} .vsl-vhead{flex:none;display:flex;align-items:center;gap:13px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.08)} .vsl-vhead .vsl-txt b{font:600 17px/1.35 Prompt,sans-serif;color:#fff} .vsl-vhead .vsl-txt small{font:400 13px/1.5 Prompt,Sarabun,sans-serif;color:#f0c46a} .vsl-doc{flex:1;min-height:120px;overflow:auto;margin:14px 0 0;padding:20px 22px;border-radius:14px;background:#f6f3ec;color:#2a2620; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);font:400 15px/1.75 Sarabun,Prompt,sans-serif;outline:none} .vsl-doc h4{margin:0 0 12px;text-align:center;font:600 17px/1.4 Prompt,Sarabun,sans-serif;color:#1d1a15} .vsl-doc p{margin:0 0 8px} .vsl-doc p b{color:#8a5a10;font-weight:600} .vsl-doc .vsl-plain{color:#5a544a} .vsl-vfoot{flex:none;display:flex;gap:10px;padding-top:12px} .vsl-back,.vsl-use{min-height:50px !important;height:auto !important;border-radius:14px;font:600 15px/1 Prompt,sans-serif;cursor:pointer;padding:0 16px} .vsl-back::before,.vsl-back::after,.vsl-use::before,.vsl-use::after{display:none !important} .vsl-back{flex:none;background:transparent;border:1px solid rgba(255,255,255,.16);color:#dcdce0} .vsl-back:hover{background:rgba(255,255,255,.06)} .vsl-use{flex:1;background:#f4f4f5;border:0;color:#111} .vsl-use:hover{background:#fff} .vsl-item::after{content:"ดูสัญญา ›" !important;display:block !important;position:static;margin-left:auto;align-self:center;flex:none;font:500 12px/1 Prompt,sans-serif;color:#8e8e96;padding-left:6px} .vsl-item:hover::after{color:#fff} .vsl-card{height:min(760px,86vh)} @media (max-width:767px){.vsl-card{height:88vh}.vsl-doc{padding:16px 16px;font-size:14.5px}.vsl-item::after{content:"›" !important;font-size:20px}.vsl-back{padding:0 12px;font-size:14px}} /* ===== หน้าดูสัญญา: หัวกระชับ + กระดาษ A4 + ไฮไลต์จุดเสี่ยง ===== */ .vsl-vhead{gap:11px !important;padding-bottom:12px !important} .vsl-vhead .vsl-art{width:44px;height:44px;border-radius:12px} .vsl-vhead .vsl-txt{flex:1;gap:2px} .vsl-vhead .vsl-txt b{font-size:16px !important} .vsl-vhead .vsl-txt small{color:#a3a3aa !important;font-size:12.5px !important} .vsl-hl{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;min-height:0 !important;border-radius:99px;border:1px solid rgba(240,196,106,.45);background:rgba(240,196,106,.1); color:#f0d08a;font:500 12.5px/1 Prompt,sans-serif;cursor:pointer} .vsl-hl::before,.vsl-hl::after{display:none !important} .vsl-hl i{width:12px;height:12px;border-radius:3px;background:#f6d860;box-shadow:0 0 0 2px rgba(0,0,0,.25) inset} .vsl-hl[aria-pressed="false"]{border-color:rgba(255,255,255,.16);background:transparent;color:#a3a3aa} .vsl-hl[aria-pressed="false"] i{background:transparent;border:1.5px solid #8e8e96} .vsl-paper{position:relative;flex:1;min-height:120px;margin:16px 10px 6px 0;display:flex} .vsl-paper::before,.vsl-paper::after{content:"";position:absolute;inset:0;border-radius:6px;background:#ece8df;transform:rotate(1.6deg) translate(6px,5px);box-shadow:0 10px 24px -14px rgba(0,0,0,.8)} .vsl-paper::after{background:#e2ddd2;transform:rotate(-1.2deg) translate(4px,8px);z-index:-1} .vsl-paper::before{z-index:0} .vsl-doc{position:relative;z-index:1;flex:1;margin:0 !important;border-radius:6px !important;background:#fdfcf8 !important; padding:30px 32px 34px !important;box-shadow:0 18px 40px -18px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.05) !important; font:400 15.5px/1.85 Taviraj,Sarabun,serif !important;color:#2a2620 !important} .vsl-doc h4{font:600 18px/1.4 Taviraj,Prompt,serif !important;letter-spacing:.01em;padding-bottom:12px;margin:0 0 16px !important;border-bottom:1px solid #d9d2c4;position:relative} .vsl-doc h4::after{content:"";position:absolute;left:50%;bottom:-4px;width:46px;margin-left:-23px;border-bottom:1px solid #d9d2c4} .vsl-doc p{margin:0 0 10px !important;text-indent:0} .vsl-doc p b{font-family:Prompt,Sarabun,sans-serif;font-size:14px;color:#7a5418 !important} .vsl-doc mark{background:none;color:inherit;transition:background-size .5s ease} .vsl.hl-on .vsl-doc mark{background:linear-gradient(transparent 52%,rgba(250,214,80,.62) 52%,rgba(250,214,80,.62) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone} .vsl-note{display:none} .vsl.hl-on .vsl-note{display:inline-block;margin:4px 0 2px;padding:3px 9px;border-radius:6px;background:#fff1c9;border:1px solid #f0d17a;color:#8a5a00;font:500 12px/1.4 Prompt,Sarabun,sans-serif;text-indent:0} .vsl.hl-on .vsl-doc p.is-risk{position:relative} .vsl.hl-on .vsl-doc p.is-risk::before{content:"";position:absolute;left:-18px;top:.55em;width:7px;height:7px;border-radius:50%;background:#e2a21c} @media (max-width:767px){.vsl-doc{padding:22px 20px 26px 24px !important;font-size:14.5px !important}.vsl-paper{margin:12px 6px 4px 0}.vsl.hl-on .vsl-doc p.is-risk::before{left:-14px}.vsl-hl{padding:7px 10px;font-size:12px}} .vsl.hl-on .vsl-note{display:table;margin-top:5px} /* ===== มือถือ: หัวเว็บบรรทัดเดียว + กล่องวางสัญญาแบบกระดาษ + ปกป้องข้อมูลแบบพับ (7 พ.ย. 2026) — เฉพาะ ≤767px ไม่แตะคอม ===== */ @media (max-width:767px){ /* 1) หัวเว็บ: หน้าตรวจสัญญาเหลือบรรทัดเดียว (เมนู วิธีอ่าน/คลิป ไปทางโลโก้ → หน้าแรก) */ html.vc-art[data-view="desk"]{--art-head:58px} html.vc-art[data-view="desk"] .site-header .dx-nav[hidden]{display:none !important} html.vc-art[data-view="desk"] .site-header .topbar{flex-wrap:nowrap;align-items:center;min-height:58px} html.vc-art .site-header .brand-name{letter-spacing:.14em} /* หน้าอื่นที่ยังมีแถบเมนู: ตัดปุ่ม "ตรวจสัญญา" ออกเมื่อมีแถบเมนูล่างแล้ว */ body.has-nav .site-header .dx-nav a[href="#checkCard"]{display:none} /* ปุ่มบัญชี: ล็อกอินแล้วเป็นไอคอนกลม */ body.has-nav #authToggle{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;font-size:0;display:inline-grid;place-items:center; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05)} body.has-nav #authToggle .auth-toggle-in{display:none !important} body.has-nav #authToggle::before{content:"";width:20px;height:20px;background:#ededef; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20c.8-3.8 3.8-6 7.5-6s6.7 2.2 7.5 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20c.8-3.8 3.8-6 7.5-6s6.7 2.2 7.5 6'/%3E%3C/svg%3E") center/contain no-repeat} /* 3) กล่องวางสัญญาแบบกระดาษ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap{position:relative;margin-top:14px} html.vc-art[data-view="desk"][data-desk="check"] #input{ font:400 16px/1.64 var(--k-ff) !important;padding:20px 18px 40px !important;min-height:300px !important;max-height:58vh; border-radius:16px !important;background:var(--k-in) !important; background-image:repeating-linear-gradient(180deg,transparent 0 25.25px,rgba(255,255,255,.035) 25.25px 26.25px) !important; background-attachment:local !important;background-position:0 19px !important;scroll-padding:20px 0 40px} html.vc-art[data-view="desk"][data-desk="check"] #input::placeholder{font-size:16px} /* ขอบบน-ล่างจางลง ให้รู้ว่าเลื่อนอ่านต่อได้ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap::before, html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap::after{content:"" !important;display:block !important;position:absolute;left:1px;right:1px;height:22px;pointer-events:none;z-index:1} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap::before{top:1px;border-radius:15px 15px 0 0;background:linear-gradient(var(--k-in),rgba(13,13,15,0))} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap::after{bottom:1px;height:44px;border-radius:0 0 15px 15px;background:linear-gradient(rgba(13,13,15,0),var(--k-in) 70%)} /* ปุ่ม ✕ ชัดขึ้นและไม่ทับตัวหนังสือ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-clear{z-index:2;top:10px;right:10px;width:32px;height:32px;border-radius:50%; background:rgba(40,40,44,.92) !important;border:1px solid rgba(255,255,255,.16);color:#ededef !important;font-size:13px;line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.5)} html.vc-art[data-view="desk"][data-desk="check"] #input{padding-right:50px !important} /* ตัวนับอักษรอยู่มุมล่างในกล่อง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap > .ta-count{position:absolute;right:12px;bottom:10px;z-index:2;margin:0; font:500 11.5px/1 var(--k-ff) !important;color:var(--k-fa) !important;background:rgba(28,28,31,.9);border:1px solid var(--k-line); padding:5px 9px;border-radius:99px;pointer-events:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap > .ta-count.is-over{color:#fca5a5 !important;border-color:rgba(252,165,165,.4)} /* ปุ่มอัปโหลด / ตัวอย่าง เป็นชิปมีไอคอน แบ่งครึ่ง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-meta{margin-top:10px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important;flex:1 1 100%;width:100%} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-actions .sample-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:0 10px !important;border-radius:14px !important;font:500 14px/1.2 var(--k-ff) !important;color:#e4e4e7 !important;white-space:nowrap} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-actions .sample-btn::before{content:"" !important;display:block !important;position:static !important; flex:0 0 18px;width:18px;height:18px;background:currentColor !important;opacity:.85;border:0 !important;transform:none !important; -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .file-pick{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5 12 4l4.5 4.5'/%3E%3Cpath d='M4.5 14.5v3a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E")} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #sampleBtn{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8h5M8.5 12.5h7M8.5 16h4.5'/%3E%3C/svg%3E")} /* 4) ปกป้องข้อมูลแบบพับ: บรรทัดเดียว กดแล้วกาง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold{padding:0 !important;overflow:hidden} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-head{cursor:pointer;padding:12px 14px;margin:0 !important;gap:12px;align-items:center;-webkit-tap-highlight-color:transparent;user-select:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-ico{width:38px;height:38px;flex:0 0 38px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-ico svg{width:22px;height:22px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-title{flex:1 1 auto;min-width:0} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-title small{display:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-state{display:block;font:400 12.5px/1.35 var(--k-ff);color:var(--k-mu);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps-state.is-hit{color:#9fdcb4} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-badge{font-size:12px !important;padding:4px 10px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold .ps-chev{display:block;flex:0 0 20px;width:20px;height:20px;color:var(--k-mu);transition:transform .25s ease} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-open .ps-chev{transform:rotate(180deg)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold:not(.ps-open) > :not(.ps-head){display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold.ps-open > :not(.ps-head){margin-left:14px !important;margin-right:14px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold.ps-open{padding-bottom:14px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps.ps-fold.ps-open .ps-head{border-bottom:1px solid var(--k-line);margin-bottom:12px !important} } .ps-state,.ps-chev{display:none} /* ===== มือถือ: ป้ายเครดิตมน + การ์ดใช้สิทธิ์ครบ + แถบความปลอดภัยแถวเดียว + ปุ่มกลับขึ้นบน (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-zc{display:none} @media (max-width:767px){ /* 1) หัวขั้นที่ 1 อยู่บรรทัดเดียวกับป้ายเครดิตมน */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head{display:flex !important;align-items:center;justify-content:space-between;gap:10px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head h2{flex:1 1 auto;min-width:0;font-size:17px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin:0 !important; min-height:34px;padding:0 10px 0 9px !important;border-radius:99px !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.16) !important; font:500 13px/1 var(--k-ff) !important;color:#ededef !important;white-space:nowrap;box-shadow:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip[hidden]{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip .credit-chip-label{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip b{font:600 13px/1 var(--k-ff) !important;color:inherit !important;letter-spacing:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip:not(.is-zero) b::after{content:" เครดิต";font-weight:400;color:var(--k-mu)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip::before{content:"";width:16px;height:16px;background:#9fdcb4; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10a2 2 0 0 0 0 4v3a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-3a2 2 0 0 0 0-4V7A1.5 1.5 0 0 0 19 5.5H5A1.5 1.5 0 0 0 3.5 7z'/%3E%3Cpath d='M14.5 5.5v13' stroke-dasharray='2 2.2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10a2 2 0 0 0 0 4v3a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-3a2 2 0 0 0 0-4V7A1.5 1.5 0 0 0 19 5.5H5A1.5 1.5 0 0 0 3.5 7z'/%3E%3Cpath d='M14.5 5.5v13' stroke-dasharray='2 2.2'/%3E%3C/svg%3E") center/contain no-repeat} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip.is-zero::before{background:#fbbf24} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip::after{content:"›";font-size:16px;line-height:1;color:var(--k-mu);margin-left:1px;position:static !important;display:inline !important;background:none !important;border:0 !important;width:auto;height:auto;transform:none !important} /* 3) ใช้สิทธิ์ครบ: การ์ดชัดๆ แทนปุ่มเทาที่ดูเหมือนกดไม่ได้ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-zero :is(#stepCost,.btns #checkBtn){display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-zero .vc-zc{display:grid;grid-template-columns:44px 1fr;gap:12px 12px;align-items:center; padding:16px;border-radius:16px;margin:2px 0 12px; background:linear-gradient(150deg,rgba(251,191,36,.10),rgba(255,255,255,.025) 60%);border:1px solid rgba(251,191,36,.28)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-zc-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fbbf24; background:linear-gradient(145deg,#2b2b32,#1a1a1f);border:1px solid rgba(255,255,255,.1)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-zc-txt{display:flex;flex-direction:column;gap:3px;min-width:0} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-zc-txt b{font:600 15.5px/1.35 var(--k-ff);color:#f4f4f5} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-zc-txt small{font:400 13px/1.5 var(--k-ff);color:var(--k-mu)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-zc-btn{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:6px; min-height:52px;border-radius:14px;border:0;background:#f4f4f5;color:#111;font:600 16px/1 var(--k-ff);cursor:pointer;padding:0 16px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-zc-btn:active{transform:translateY(1px);background:#fff} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-zero .check-note{text-align:center;margin-top:0 !important} /* 4) แถบความปลอดภัย: แถวเดียว 3 ช่อง ไอคอนบน ข้อความล่าง */ .trust-bar{grid-template-columns:repeat(3,1fr) !important;gap:8px !important} .trust-bar li{padding:12px 6px 11px !important;justify-content:center;text-align:center} .trust-bar li,.trust-bar li > a{flex-direction:column;gap:7px !important;justify-content:flex-start} .trust-bar li > a{align-items:center} .trust-bar svg{width:32px !important;height:32px !important} .trust-bar span{flex-direction:column !important;align-items:center;gap:1px !important;font-size:11px !important;line-height:1.35 !important} .trust-bar b{font-size:12px !important;line-height:1.3} /* 6) ปุ่มกลับขึ้นบน: ไอคอนเคยถูกบีบเหลือ 2px จนเห็นแต่วงกลมว่าง */ .to-top{padding:0 !important;min-height:0 !important;width:44px !important;height:44px !important;border-radius:50% !important; background:rgba(28,28,31,.92) !important;border:1px solid rgba(255,255,255,.18) !important;color:#ededef !important; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.5) !important} .to-top::before,.to-top::after{display:none !important} .to-top svg{flex:0 0 20px;width:20px !important;height:20px !important;display:block} } .trust-bar .tb-x{font-style:normal} @media (max-width:767px){.trust-bar .tb-x{display:none}} /* ===== มือถือ: กล่องว่าง + วงกลมเลขขั้นตอน + เก็บรายละเอียด (8 พ.ย. 2026 รอบ 3) — เฉพาะ ≤767px ===== */ .vc-empty{display:none} @media (max-width:767px){ /* 1) กล่องว่าง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:20px;text-align:center;font-family:var(--k-ff);cursor:text} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:is(.vc-has,.vc-focus) .vc-empty{display:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) #input::placeholder{color:transparent !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has) > .ta-count{display:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#d4d4d8; background:linear-gradient(145deg,#26262c,#18181c);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 24px -10px rgba(0,0,0,.8)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty b{font:600 16px/1.4 var(--k-ff);color:#ededef} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;margin-top:4px; border-radius:99px;border:0;background:#f4f4f5;color:#111;font:600 15px/1 var(--k-ff);cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste:active{transform:translateY(1px);background:#fff} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste::before,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty small{font:400 13px/1.5 var(--k-ff);color:var(--k-fa)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty small label{color:#d4d4d8;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3);cursor:pointer} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste-msg{display:none;margin:2px 0 0;font:500 12.5px/1.45 var(--k-ff);color:#fcd34d;max-width:260px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste-msg.on{display:block} /* 2) วงกลมเลขขั้นตอน ขั้นที่เสร็จเป็นติ๊กเขียว */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sh{display:flex !important;align-items:center;gap:10px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center; font-size:0;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);transition:background .3s,border-color .3s} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn::before{content:attr(data-n);font:600 13.5px/1 var(--k-ff);color:#ededef} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn.is-done{background:#34d399;border-color:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.14)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn.is-done::before{content:"";width:14px;height:14px;background:#0b2b1f; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; animation:vcSnPop .35s cubic-bezier(.3,1.6,.5,1)} @keyframes vcSnPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}} /* 5) เก็บรายละเอียด: หัวขั้น 1 ตรงกับป้าย, ระยะขั้นเท่ากัน, การ์ดสิทธิ์ไม่มีคำตกบรรทัด */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head h2{margin:0 !important;padding:0 !important;line-height:1.35 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head{min-height:36px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head + .field-wrap{margin-top:16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-sub{margin:26px 0 0 !important;padding:24px 0 0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-sub h3{margin:0 0 16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps{margin-bottom:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ps + .step-sub{margin-top:26px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard :is(.vc-zc-txt small,.vc-zc-txt b){text-wrap:balance} } @media (max-width:767px){ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head{flex-wrap:nowrap !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .step-head h2{flex:1 1 0 !important;font-size:16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn{display:inline-flex !important;align-items:center;justify-content:center;line-height:0} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn::before{display:block;line-height:1 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .credit-chip{padding:0 9px 0 8px !important;gap:5px} } /* บนคอม: span เลขไม่สร้างกล่องของตัวเอง หัวข้อจึงแสดงเหมือนเดิมทุกอย่าง (มือถือใช้ inline-flex แทน) */ .vc-sn{display:contents} /* iPhone ซูมหน้าเองเมื่อแตะช่องกรอกที่ตัวอักษรเล็กกว่า 16px — บังคับทุกช่องบนมือถือเป็น 16px ขึ้นไป */ @media (max-width:767px){ html.vc-art :is(input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input:not([type]),textarea,select){font-size:max(16px,1em) !important} } /* ===== มือถือ: หน้าผลตรวจแบบสรุป + แท็บ (8 พ.ย. 2026) — เฉพาะ ≤767px; art.js ใส่ .vc-m ให้ article.rpt เฉพาะบนมือถือ ===== */ @media (max-width:767px){ html.vc-art #resultCard:has(article.rpt.vc-m) > h2{display:none !important} html.vc-art #resultCard:has(article.rpt.vc-m){padding-top:16px !important} html.vc-art article.rpt.vc-m{display:flex;flex-direction:column} /* หัวรายงาน: เหลือบรรทัดประเภทเอกสาร ไม่ค้างบนจอ */ html.vc-art article.rpt.vc-m > .rpt-head{position:static !important;background:none !important;border:0 !important;padding:0 2px !important;margin:0 0 12px !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} html.vc-art article.rpt.vc-m > .rpt-head :is(.rpt-kicker,.rpt-title){display:none !important} html.vc-art article.rpt.vc-m > .rpt-head .rpt-meta{font:400 12.5px/1.5 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important;margin:0 !important} /* ซ่อนส่วนที่ซ้ำกัน: หัว Contract Brief และรายการ "ควรจัดการก่อน" (มีครบในรายการประเด็นแล้ว) */ html.vc-art article.rpt.vc-m #commandCenter :is(.cb-head,.cb-h,.cb-list,.cb-more){display:none !important} html.vc-art article.rpt.vc-m #commandCenter{order:5;margin-top:14px !important} /* การ์ดสรุป */ html.vc-art .vc-sum{order:1;border-radius:18px;padding:16px;margin:0 0 14px;font-family:Prompt,Sarabun,sans-serif; background:linear-gradient(155deg,var(--sg,rgba(255,255,255,.05)),rgba(255,255,255,.02) 65%);border:1px solid var(--sb,rgba(255,255,255,.1))} html.vc-art .vc-sum.lv-hi{--sg:rgba(248,113,113,.12);--sb:rgba(248,113,113,.3);--st:#fca5a5} html.vc-art .vc-sum.lv-mid{--sg:rgba(251,191,36,.11);--sb:rgba(251,191,36,.3);--st:#fcd34d} html.vc-art .vc-sum.lv-lo{--sg:rgba(52,211,153,.1);--sb:rgba(52,211,153,.28);--st:#6ee7b7} html.vc-art .vc-sum-top{display:flex;align-items:center;gap:16px} html.vc-art .vc-donut{position:relative;flex:0 0 84px;width:84px;height:84px} html.vc-art .vc-donut svg{display:block} html.vc-art .vc-donut span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1} html.vc-art .vc-donut b{font:700 26px/1 Prompt,Sarabun,sans-serif;color:#f4f4f5} html.vc-art .vc-donut small{font:400 11px/1.2 Prompt,Sarabun,sans-serif;color:#a3a3aa;margin-top:3px} html.vc-art .vc-sum-tx{min-width:0} html.vc-art .vc-sum-k{margin:0;font:500 12px/1.3 Prompt,Sarabun,sans-serif;color:#8b8b94} html.vc-art .vc-sum-tx h3{margin:2px 0 4px;font:700 21px/1.25 Prompt,Sarabun,sans-serif !important;color:var(--st,#f4f4f5) !important;letter-spacing:0 !important;background:none !important} html.vc-art .vc-sum-tx h3::before,html.vc-art .vc-sum-tx h3::after{display:none !important} html.vc-art .vc-sum-tx > p:last-child{margin:0;font:400 13px/1.5 Prompt,Sarabun,sans-serif;color:#c4c4ca;text-wrap:balance} html.vc-art .vc-sum-leg{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font:400 12.5px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa} html.vc-art .vc-sum-leg li{display:flex;align-items:center;gap:6px} html.vc-art .vc-sum-leg i{width:9px;height:9px;border-radius:50%;background:var(--c)} html.vc-art .vc-sum-leg b{color:#ededef;font-weight:600} /* ตัวเลข 3 ช่องเดิมซ่อนบนมือถือ (คำอธิบายสีด้านบนแทนแล้ว) แต่ยังอยู่ในหน้าให้โค้ดเดิมใช้ได้ */ html.vc-art .vc-sum .cb-tiles{display:none !important} /* แถบแชร์: ปุ่มไอคอนแถวเดียวในการ์ดสรุป */ html.vc-art .vc-sum .share-bar{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px !important;margin:14px 0 0 !important;padding:14px 0 0 !important;border-top:1px solid rgba(255,255,255,.08) !important;border-bottom:0 !important;background:none !important} html.vc-art .vc-sum .share-bar button{display:flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:6px !important;min-height:40px !important;height:40px;padding:0 6px !important; border-radius:12px !important;border:1px solid rgba(255,255,255,.12) !important;background:rgba(255,255,255,.04) !important;color:#e4e4e7 !important;font:500 12.5px/1 Prompt,Sarabun,sans-serif !important;white-space:nowrap} html.vc-art .vc-sum .share-bar button svg{width:16px !important;height:16px !important;flex:0 0 16px} html.vc-art .vc-sum .share-bar button::before,html.vc-art .vc-sum .share-bar button::after{display:none !important} /* แท็บ ติดใต้หัวเว็บตอนเลื่อน */ html.vc-art .vc-tabs{order:2;position:sticky;top:calc(var(--art-head,58px) + 4px);z-index:20;display:flex;gap:4px;padding:4px;margin:0 0 14px;border-radius:14px; background:rgba(22,22,25,.94);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 24px -14px rgba(0,0,0,.9)} html.vc-art .vc-tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 6px;border:0;border-radius:10px;background:transparent; color:#a3a3aa;font:500 14px/1 Prompt,Sarabun,sans-serif;cursor:pointer;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent} html.vc-art .vc-tab::before,html.vc-art .vc-tab::after{display:none !important} html.vc-art .vc-tab em{font-style:normal;font-size:11.5px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:rgba(255,255,255,.08);color:#d4d4d8} html.vc-art .vc-tab.on{background:#f4f4f5;color:#111} html.vc-art .vc-tab.on em{background:rgba(0,0,0,.1);color:#111} /* เนื้อหาแต่ละแท็บ */ html.vc-art article.rpt.vc-m > [data-vt]{order:4} html.vc-art article.rpt.vc-m > .brief{order:3} html.vc-art article.rpt.vc-m > #issueIndex{order:4} html.vc-art article.rpt.vc-m > .gloss{order:6} html.vc-art article.rpt.vc-m > .fu{order:7} html.vc-art article.rpt.vc-m > .disclaimer{order:9;margin-top:18px !important} html.vc-art article.rpt.vc-m:not([data-vtab="iss"]) > [data-vt="iss"], html.vc-art article.rpt.vc-m:not([data-vtab="gl"]) > [data-vt="gl"], html.vc-art article.rpt.vc-m:not([data-vtab="fu"]) > [data-vt="fu"]{display:none !important} html.vc-art article.rpt.vc-m > .gloss{margin-top:0 !important} html.vc-art article.rpt.vc-m > .gloss .gl-head{position:static !important} html.vc-art article.rpt.vc-m > .fu{margin-top:0 !important} html.vc-art article.rpt.vc-m > #issueIndex .ix-head{display:none !important} html.vc-art article.rpt.vc-m > #issueIndex{margin-top:0 !important;padding-top:0 !important;border-top:0 !important} } @media (max-width:767px){ html.vc-art article.rpt.vc-m :is(details.item,#issueIndex,.gloss,.fu,.miss){scroll-margin-top:calc(var(--art-head,58px) + 62px)} } /* ===== แผงแอดมิน (admin.js) — แสดงเฉพาะบัญชีแอดมิน (8 พ.ย. 2026) ===== */ .adm{margin:16px 0 0;padding:16px;border-radius:16px;font-family:Prompt,Sarabun,sans-serif;color:#ededef; background:linear-gradient(155deg,rgba(96,165,250,.10),rgba(255,255,255,.02) 60%);border:1px solid rgba(96,165,250,.3)} .adm[hidden]{display:none !important} .adm-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .adm-ico{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;color:#93c5fd;background:linear-gradient(145deg,#26262c,#18181c);border:1px solid rgba(255,255,255,.1)} .adm-head h3{margin:0;font:600 16px/1.3 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important;letter-spacing:0 !important} .adm-head p{margin:2px 0 0;font:400 12.5px/1.4 Prompt,Sarabun,sans-serif;color:#a3a3aa} .adm-f{display:flex;flex-direction:column;gap:6px;font:500 12.5px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa;margin:0 0 10px;min-width:0} .adm-f input{width:100%;box-sizing:border-box;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0d0d0f;color:#f4f4f5;font:400 16px/1.2 Prompt,Sarabun,sans-serif} .adm-f input:focus{outline:none;border-color:rgba(147,197,253,.6);box-shadow:0 0 0 3px rgba(96,165,250,.15)} .adm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .adm-quick{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap} .adm-quick button{flex:1 1 0;min-height:36px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e4e4e7;font:600 13px/1 Prompt,Sarabun,sans-serif;cursor:pointer} .adm-quick button::before,.adm-quick button::after,.adm-go::before,.adm-go::after{display:none !important} .adm-go{width:100%;min-height:50px;border:0;border-radius:14px;background:#93c5fd;color:#0b1b33;font:600 16px/1 Prompt,Sarabun,sans-serif;cursor:pointer} .adm-go:disabled{opacity:.6} .adm-msg{margin:10px 0 0;font:500 13px/1.5 Prompt,Sarabun,sans-serif;min-height:0} .adm-msg:empty{display:none} .adm-msg.is-ok{color:#6ee7b7} .adm-msg.is-err{color:#fca5a5} .adm-fine{margin:8px 0 0;font:400 11.5px/1.5 Prompt,Sarabun,sans-serif;color:#7a7a82} .adm-head,.adm-head > div{background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important} /* ===== มือถือ: แท็บประเด็นกระชับ (8 พ.ย. 2026 รอบ 2) — เฉพาะ ≤767px ===== */ @media (max-width:767px){ /* 1) แสดงครบ ไม่ต้องกด "ดูทั้งหมด", รายการสั้นไม่ต้องมีช่องค้นหา/ปุ่มกรอง, มีบรรทัดเหตุผลใต้หัวข้อ */ html.vc-art article.rpt.vc-allrows .ix-more{display:none !important} html.vc-art article.rpt.vc-few :is(.ix-search-w,.ix-seg,.ix-sub){display:none !important} html.vc-art article.rpt.vc-m .ix-list{margin-top:0 !important} html.vc-art article.rpt.vc-m .ix-row .ix-tx > p{display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; margin:4px 0 0 !important;font:400 13px/1.5 Prompt,Sarabun,sans-serif !important;color:#a3a3aa !important} html.vc-art article.rpt.vc-m .ix-row .ix-tx > b{display:block} /* 3) สิ่งที่ยังไม่ระบุ: การ์ดเรียบ พับเหลือ 2 ข้อ */ html.vc-art article.rpt.vc-m > .miss{border:1px solid rgba(255,255,255,.09) !important;border-style:solid !important;background:rgba(255,255,255,.025) !important;border-radius:16px !important;padding:14px 16px !important;margin:14px 0 0 !important} html.vc-art article.rpt.vc-m > .miss[hidden]{display:none !important} html.vc-art article.rpt.vc-m > .miss h3{display:flex;align-items:center;gap:8px;margin:0 0 4px !important;font:600 15px/1.35 Prompt,Sarabun,sans-serif !important;color:#ededef !important;letter-spacing:0 !important} html.vc-art article.rpt.vc-m > .miss h3 em{font-style:normal;font-size:11.5px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:rgba(251,191,36,.14);color:#fcd34d} html.vc-art article.rpt.vc-m > .miss .miss-note{margin:0 0 8px !important;font:400 12.5px/1.5 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important} html.vc-art article.rpt.vc-m > .miss ul{margin:0 !important;padding:0 0 0 18px !important} html.vc-art article.rpt.vc-m > .miss li{font:400 14px/1.55 Prompt,Sarabun,sans-serif !important;color:#d4d4d8 !important;margin:0 0 4px !important} html.vc-art article.rpt.vc-m > .miss.vc-fold:not(.vc-open) li:nth-child(n+3){display:none} html.vc-art .vc-miss-more{margin:6px 0 0;padding:0;border:0;background:none;color:#e4e4e7;font:600 13.5px/1.4 Prompt,Sarabun,sans-serif;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3);cursor:pointer} html.vc-art .vc-miss-more::before,html.vc-art .vc-miss-more::after{display:none !important} /* 4) ความคืบหน้าในการ์ดสรุป */ html.vc-art .vc-sum .ix-prog{margin:14px 0 0 !important;padding:0 !important;background:none !important;border:0 !important} html.vc-art .vc-sum .ix-prog-row{display:flex !important;align-items:center;gap:12px} html.vc-art .vc-sum .ix-prog-l{flex:0 0 auto;font:500 12.5px/1 Prompt,Sarabun,sans-serif !important;color:#a3a3aa !important;white-space:nowrap} html.vc-art .vc-sum .ix-prog-n{color:#ededef !important;font-weight:600 !important;font-size:12.5px !important;margin-left:2px} html.vc-art .vc-sum .ix-bar{flex:1 1 auto;height:6px !important;border-radius:99px !important;background:rgba(255,255,255,.08) !important;overflow:hidden} html.vc-art .vc-sum .ix-bar > i{display:block;height:100%;border-radius:99px;background:#34d399 !important;transition:width .4s ease} html.vc-art .vc-sum .ix-prog-note{margin:6px 0 0 !important;font:400 12px/1.5 Prompt,Sarabun,sans-serif !important;color:#6ee7b7 !important} /* การ์ดเดิมด้านล่าง: เหลือแถว "ที่มาของผลตรวจสอบ" กับหมายเหตุ AI */ html.vc-art article.rpt.vc-m #commandCenter{background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important} html.vc-art article.rpt.vc-m #commandCenter::before,html.vc-art article.rpt.vc-m #commandCenter::after{display:none !important} html.vc-art article.rpt.vc-m #commandCenter .cc-status{display:none !important} html.vc-art article.rpt.vc-m #commandCenter .cb-src{margin:0 !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:16px !important;background:rgba(255,255,255,.025) !important;padding:0 !important} html.vc-art article.rpt.vc-m #commandCenter .cb-src > summary{padding:12px 14px !important;border:0 !important} html.vc-art article.rpt.vc-m #commandCenter .cb-src > :not(summary){padding:0 14px 12px !important} html.vc-art article.rpt.vc-m #commandCenter .cc-note{margin:10px 2px 0 !important;padding:0 !important;border:0 !important;font:400 12px/1.6 Prompt,Sarabun,sans-serif !important;color:#7a7a82 !important} /* วิธีอ่านสี ย้ายมาท้ายแท็บ */ html.vc-art article.rpt.vc-m > .vc-leg{order:6;margin:14px 0 0 !important;border:1px solid rgba(255,255,255,.07) !important;border-radius:14px !important;padding:0 14px !important;background:rgba(255,255,255,.015) !important} html.vc-art article.rpt.vc-m > .vc-leg > summary{padding:12px 0 !important;font:500 13.5px/1.4 Prompt,Sarabun,sans-serif !important;color:#a3a3aa !important} html.vc-art article.rpt.vc-m > .vc-leg[open]{padding-bottom:12px !important} } @media (max-width:767px){ html.vc-art .vc-sum .ix-prog-l{display:inline-flex !important;flex-direction:row !important;align-items:baseline;gap:4px} html.vc-art .vc-sum .ix-prog-n{display:inline !important;margin:0 !important} } /* ===== มือถือ: เก็บรายละเอียดหน้าผลตรวจ (8 พ.ย. 2026 รอบ 3) — เฉพาะ ≤767px ===== */ @media (max-width:767px){ /* 1) ป้ายประเภท + วันที่ บนการ์ดสรุป; ซ่อนแถบเดิม */ html.vc-art #result > .detect-banner.vc-moved{display:none !important} html.vc-art article.rpt.vc-nohead > .rpt-head{display:none !important} html.vc-art .vc-sum-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.08)} html.vc-art .vc-type{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 9px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); font:600 12.5px/1 Prompt,Sarabun,sans-serif;color:#ededef;white-space:nowrap} html.vc-art .vc-type i{width:14px;height:14px;background:#d4d4d8; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8h5M8.5 12.5h7M8.5 16h4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8h5M8.5 12.5h7M8.5 16h4.5'/%3E%3C/svg%3E") center/contain no-repeat} html.vc-art .vc-sum-meta .vc-type-chg{display:inline-flex !important;align-items:center;min-height:28px !important;height:28px;padding:0 10px !important;margin:0 !important;border-radius:99px !important; background:transparent !important;border:1px dashed rgba(255,255,255,.25) !important;color:#d4d4d8 !important;font:500 12.5px/1 Prompt,Sarabun,sans-serif !important;box-shadow:none !important} html.vc-art .vc-sum-meta .vc-type-chg::after{content:"›";margin-left:4px;font-size:14px;position:static !important;display:inline !important;background:none !important;border:0 !important;transform:none !important;width:auto;height:auto} html.vc-art .vc-sum-meta .vc-type-chg::before{display:none !important} html.vc-art .vc-date{margin-left:auto;font:400 12px/1 Prompt,Sarabun,sans-serif;color:#8b8b94;white-space:nowrap} /* 3) บรรทัดเหตุผล 2 บรรทัดพร้อม … */ html.vc-art article.rpt.vc-m .ix-row .ix-tx > p{white-space:normal !important;text-overflow:ellipsis !important;word-break:break-word} /* 6) ประเด็นแบบการ์ด */ html.vc-art article.rpt.vc-m3 .ix-list{display:flex !important;flex-direction:column;gap:10px;border:0 !important} html.vc-art article.rpt.vc-m3 .ix-row{position:relative;display:flex !important;align-items:center;gap:10px;width:100%;margin:0 !important;padding:14px 14px 14px 16px !important; border-radius:16px !important;border:1px solid rgba(255,255,255,.09) !important;background:rgba(255,255,255,.03) !important;box-shadow:none !important;text-align:left} html.vc-art article.rpt.vc-m3 .ix-row[hidden]{display:none !important} html.vc-art article.rpt.vc-m3 .ix-row::before{content:"" !important;position:absolute !important;left:0 !important;top:16px !important;bottom:16px !important;width:3px !important;border-radius:0 3px 3px 0;background:var(--lc,#8b8b94) !important;display:block !important;transform:none !important} html.vc-art article.rpt.vc-m3 .ix-row.lv-check_detail{--lc:#f87171} html.vc-art article.rpt.vc-m3 .ix-row.lv-caution{--lc:#fbbf24} html.vc-art article.rpt.vc-m3 .ix-row.lv-low{--lc:#8b8b94} html.vc-art article.rpt.vc-m3 .ix-row:active{background:rgba(255,255,255,.06) !important} html.vc-art article.rpt.vc-m3 .ix-row .ix-tx{flex:1 1 auto;min-width:0;border:0 !important;padding:0 !important} html.vc-art article.rpt.vc-m3 .ix-row .ix-tx > small{display:flex !important;align-items:center;gap:8px;margin:0 0 6px !important;font:500 12px/1 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important} html.vc-art .vc-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;font:600 11.5px/1 Prompt,Sarabun,sans-serif;white-space:nowrap} html.vc-art .vc-pill.lv-check_detail{background:rgba(248,113,113,.15);color:#fca5a5;border:1px solid rgba(248,113,113,.35)} html.vc-art .vc-pill.lv-caution{background:rgba(251,191,36,.13);color:#fcd34d;border:1px solid rgba(251,191,36,.32)} html.vc-art .vc-pill.lv-low{background:rgba(255,255,255,.06);color:#c4c4ca;border:1px solid rgba(255,255,255,.14)} html.vc-art .vc-no{color:#8b8b94} html.vc-art article.rpt.vc-m3 .ix-row .ix-tx > b{font:600 15.5px/1.4 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important} html.vc-art article.rpt.vc-m3 .ix-row .ix-clause{display:inline-flex !important;align-items:center;gap:5px;margin-top:8px !important;font:400 12px/1 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important} html.vc-art article.rpt.vc-m3 .ix-row .ix-clause svg{width:13px;height:13px} html.vc-art article.rpt.vc-m3 .ix-row .ix-arrow{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid !important;place-items:center;background:rgba(255,255,255,.06);color:#d4d4d8 !important;font-size:14px !important} html.vc-art article.rpt.vc-m3 .ix-row .ix-ico{display:none !important} /* อ่านแล้ว: ✓ เขียวที่มุม */ html.vc-art article.rpt.vc-m3 .ix-row .ix-done-chip{display:none !important} html.vc-art article.rpt.vc-m3 .ix-row.is-done{border-color:rgba(52,211,153,.3) !important} html.vc-art article.rpt.vc-m3 .ix-row.is-done .ix-arrow{background:#34d399;color:transparent !important;position:relative} html.vc-art article.rpt.vc-m3 .ix-row.is-done .ix-arrow::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;background:#0b2b1f; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat} /* 5) การ์ดข้อมูลสัญญา */ html.vc-art article.rpt.vc-m3 > .brief.vc-moved{display:none !important} html.vc-art .vc-brief{order:3;margin:0 0 14px;padding:14px 16px 6px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);font-family:Prompt,Sarabun,sans-serif} html.vc-art .vc-brief h4{margin:0 0 4px;font:600 13px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa;letter-spacing:0} html.vc-art .vc-br-row{display:flex;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)} html.vc-art .vc-br-row:first-of-type{border-top:0} html.vc-art .vc-br-ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#d4d4d8;background:linear-gradient(145deg,#26262c,#18181c);border:1px solid rgba(255,255,255,.09)} html.vc-art .vc-br-row small{display:block;font:500 11.5px/1.3 Prompt,Sarabun,sans-serif;color:#8b8b94;margin:1px 0 2px} html.vc-art .vc-br-row p{margin:0;font:400 14.5px/1.55 Prompt,Sarabun,sans-serif;color:#e4e4e7} html.vc-art .vc-br-row .vc-num{font-weight:600;color:#fff} /* 4) ระยะห่างเท่ากันทั้งแท็บ */ html.vc-art article.rpt.vc-m3 > #issueIndex{padding-bottom:0 !important;margin-bottom:0 !important;border-bottom:0 !important} html.vc-art article.rpt.vc-m3 > #issueIndex > :last-child{margin-bottom:0 !important} html.vc-art article.rpt.vc-m3 > :is(.miss,#commandCenter,.vc-leg){margin-top:14px !important;margin-bottom:0 !important} html.vc-art article.rpt.vc-m3 #commandCenter > :last-child{margin-bottom:0 !important} html.vc-art article.rpt.vc-m3 > .disclaimer{margin-top:16px !important;padding-top:14px !important} html.vc-art article.rpt.vc-m3 > [data-vt]{padding-bottom:0 !important} } @media (max-width:767px){html.vc-art article.rpt.vc-m > .vc-brief{order:3 !important}} /* ===== มือถือ: รายละเอียดประเด็นเป็นแผ่นเลื่อนขึ้น (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-sheet-back,.vc-sh-nav,.vc-sh-x{display:none} @media (max-width:767px){ /* ให้แผ่น position:fixed อิงหน้าจอได้ (การ์ดผลตรวจมี transform อยู่) */ html.vc-sheet-open #resultCard,html.vc-sheet-open #resultCard *:has(details.item.is-picked){transform:none !important;filter:none !important;will-change:auto !important;contain:none !important;z-index:auto !important} html.vc-sheet-open body{overflow:hidden} html.vc-sheet-open .to-top,html.vc-sheet-open .ix-back{display:none !important} .vc-sheet-back{display:block;position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease} html.vc-sheet-open .vc-sheet-back{opacity:1;pointer-events:auto} html.vc-art article.rpt.vc-m details.item.is-picked[open]{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;z-index:9991 !important; margin:0 !important;width:auto !important;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:0 16px calc(16px + env(safe-area-inset-bottom,0px)) !important;border-radius:22px 22px 0 0 !important; background:#17171a !important;border:1px solid rgba(255,255,255,.1) !important;border-bottom:0 !important;box-shadow:0 -20px 60px rgba(0,0,0,.6) !important; animation:vcSheetUp .32s cubic-bezier(.2,.9,.3,1);transition:transform .2s ease;outline:0} @keyframes vcSheetUp{from{transform:translateY(100%)}to{transform:none}} html.vc-art article.rpt.vc-m details.item.is-picked[open]::before,html.vc-art article.rpt.vc-m details.item.is-picked[open]::after{display:none !important} /* หัวแผ่น: ติดด้านบน มีขีดจับ + ปุ่มปิด */ html.vc-art article.rpt.vc-m details.item.is-picked[open] > summary{position:sticky !important;top:0;z-index:3;margin:0 -16px 12px !important;padding:22px 56px 14px 16px !important; background:#17171a !important;border-bottom:1px solid rgba(255,255,255,.07) !important;border-radius:22px 22px 0 0;list-style:none;cursor:grab} html.vc-art article.rpt.vc-m details.item.is-picked[open] > summary::-webkit-details-marker{display:none} html.vc-art article.rpt.vc-m details.item.is-picked[open] > summary::before{content:"" !important;position:absolute !important;top:8px !important;left:50% !important;width:40px !important;height:4px !important;margin-left:-20px;border-radius:99px;background:rgba(255,255,255,.22) !important;display:block !important;transform:none !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .pick-banner{display:none !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-x{display:grid;place-items:center;position:absolute;top:18px;right:12px;width:36px;height:36px;padding:0;border-radius:50%; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e4e4e7;cursor:pointer} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-x::before,html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-x::after{display:none !important} /* 3) ปุ่มตรวจแล้ว: ปุ่มเต็ม เห็นชัด */ html.vc-art article.rpt.vc-m details.item.is-picked[open] .rv-row{margin:16px 0 0 !important;padding:0 !important;border:0 !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .rv-btn{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border-radius:14px !important; border:1px solid rgba(52,211,153,.45) !important;border-style:solid !important;background:rgba(52,211,153,.1) !important;color:#6ee7b7 !important;font:600 15px/1 Prompt,Sarabun,sans-serif !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .rv-btn.is-on{background:#34d399 !important;border-color:#34d399 !important;color:#06281b !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .rv-btn svg{width:18px;height:18px} html.vc-art article.rpt.vc-m details.item.is-picked[open] .rv-btn::before,html.vc-art article.rpt.vc-m details.item.is-picked[open] .rv-btn::after{display:none !important} /* 2) ก่อนหน้า / ถัดไป แทนปุ่ม ภาพรวม · กลับหน้าสรุป */ html.vc-art article.rpt.vc-m details.item.is-picked[open] .pk-row{display:none !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-nav{display:flex;align-items:center;gap:8px;margin:10px 0 0} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-nav button{flex:1 1 0;min-height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04); color:#ededef;font:600 14.5px/1 Prompt,Sarabun,sans-serif;cursor:pointer} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-nav button::before,html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-nav button::after{display:none !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-nav button:disabled{opacity:.35} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-n{flex:0 0 auto;min-width:48px;text-align:center;font:600 13px/1 Prompt,Sarabun,sans-serif;color:#a3a3aa} } @media (max-width:767px){ /* การ์ดผลตรวจมีแอนิเมชัน fadeUp (transform) ทำให้ position:fixed ข้างในอิงการ์ดแทนหน้าจอ — ปิดเมื่อแสดงผลแล้ว */ html.vc-art #resultCard:has(article.rpt.vc-m){animation:none !important} } /* ===== มือถือ: ฉากเปิดผลตรวจ + ตราประทับ + แผนที่สัญญา + ฉลองอ่านครบ (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-stamp,.vc-map,.vc-cele{display:none} @media (max-width:767px){ /* 1) ฉากเปิด */ html.vc-art .vc-sum{position:relative;overflow:visible} html.vc-art article.rpt.vc-reveal .vc-sum{animation:vcSumIn .55s cubic-bezier(.2,.8,.3,1) both} html.vc-art article.rpt.vc-reveal .vc-sum-tx > *{animation:vcFadeUp .5s ease both} html.vc-art article.rpt.vc-reveal .vc-sum-tx .vc-sum-k{animation-delay:.35s} html.vc-art article.rpt.vc-reveal .vc-sum-tx h3{animation-delay:.55s} html.vc-art article.rpt.vc-reveal .vc-sum-tx > p:last-child{animation-delay:.75s} html.vc-art article.rpt.vc-reveal :is(.vc-sum-leg,.vc-map,.vc-sum .ix-prog,.vc-sum .share-bar){animation:vcFadeUp .5s ease both;animation-delay:.9s} html.vc-art article.rpt.vc-reveal .vc-tabs{animation:vcFadeUp .5s ease both;animation-delay:1s} html.vc-art article.rpt.vc-reveal .vc-brief{animation:vcFadeUp .5s ease both;animation-delay:1.05s} html.vc-art article.rpt.vc-reveal .ix-row{animation:vcCardIn .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(1.1s + var(--i,0) * 90ms)} html.vc-art article.rpt.vc-reveal .vc-sum-tx h3{text-shadow:0 0 0 transparent} @keyframes vcSumIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} @keyframes vcFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes vcCardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} html.vc-art .vc-sum .vc-donut svg{filter:drop-shadow(0 0 10px var(--glow,rgba(255,255,255,.08)))} html.vc-art .vc-sum.lv-hi{--glow:rgba(248,113,113,.35)} html.vc-art .vc-sum.lv-mid{--glow:rgba(251,191,36,.3)} html.vc-art .vc-sum.lv-lo{--glow:rgba(52,211,153,.3)} /* 2) ตราประทับ */ html.vc-art .vc-stamp{display:block;position:absolute;top:-16px;right:-8px;z-index:4;width:96px;height:96px;pointer-events:none;opacity:0;transform:scale(2.4) rotate(-4deg)} html.vc-art .vc-stamp svg{display:block;width:100%;height:100%;mix-blend-mode:screen} html.vc-art .vc-stamp.lv-hi{color:#f87171} html.vc-art .vc-stamp.lv-mid{color:#fbbf24} html.vc-art .vc-stamp.lv-lo{color:#34d399} html.vc-art .vc-stamp.is-hit{animation:vcStampHit .42s cubic-bezier(.5,0,.75,0) forwards} html.vc-art .vc-stamp.is-set{opacity:.9;transform:rotate(-14deg) scale(1);animation:none} @keyframes vcStampHit{0%{opacity:0;transform:scale(2.4) rotate(-4deg)}55%{opacity:1;transform:scale(.9) rotate(-15deg)}75%{transform:scale(1.04) rotate(-14deg)}100%{opacity:.9;transform:scale(1) rotate(-14deg)}} html.vc-art .vc-sum.vc-thud{animation:vcThud .36s ease} @keyframes vcThud{0%{transform:none}30%{transform:translateY(3px) scale(.995)}60%{transform:translateY(-1px)}100%{transform:none}} html.vc-art .vc-sum .vc-date.vc-date-in-stamp{visibility:hidden} /* เผื่อพื้นที่ให้ตราไม่ทับข้อความ */ html.vc-art .vc-sum:has(.vc-stamp) .vc-sum-meta{padding-right:70px} html.vc-art .vc-sum:has(.vc-stamp) .vc-sum-tx{padding-right:6px} /* 4) แผนที่สัญญา */ html.vc-art .vc-map{display:block;margin:14px 0 0} html.vc-art .vc-map-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px} html.vc-art .vc-map-h span{font:600 12.5px/1.2 Prompt,Sarabun,sans-serif;color:#d4d4d8} html.vc-art .vc-map-h small{font:400 11px/1.2 Prompt,Sarabun,sans-serif;color:#7a7a82;text-align:right} html.vc-art .vc-map-bar{display:flex;gap:3px;align-items:flex-end;height:30px} html.vc-art .vc-map-c{position:relative;flex:1 1 0;min-width:0;height:10px;border-radius:3px;background:rgba(255,255,255,.08);border:0;padding:0;margin:0;display:block} html.vc-art .vc-map-c.is-hit{height:26px;background:var(--c);box-shadow:0 0 12px -2px var(--c);cursor:pointer;-webkit-tap-highlight-color:transparent} html.vc-art .vc-map-c.is-hit::before,html.vc-art .vc-map-c.is-hit::after{display:none !important} html.vc-art .vc-map-c.is-hit:active{transform:scaleY(.85)} html.vc-art .vc-map-c i{position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);font:600 9.5px/1 Prompt,Sarabun,sans-serif;font-style:normal;color:var(--c);white-space:nowrap} html.vc-art .vc-map-bar:has(.vc-map-c:nth-child(25)) .vc-map-c i{display:none} html.vc-art .vc-map{padding-top:2px} html.vc-art .vc-map:has(.vc-map-c i) .vc-map-bar{margin-top:12px} html.vc-art article.rpt.vc-reveal .vc-map-c{animation:vcBarUp .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(1s + var(--d,0ms))} @keyframes vcBarUp{from{transform:scaleY(0);transform-origin:bottom;opacity:0}to{transform:none;opacity:1}} /* 5) ฉลองอ่านครบ */ .vc-cele{display:grid;place-items:center;position:fixed;inset:0;z-index:10050;padding:24px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:vcFadeIn .25s ease both} .vc-cele.out{animation:vcFadeOut .25s ease both} @keyframes vcFadeIn{from{opacity:0}to{opacity:1}} @keyframes vcFadeOut{to{opacity:0}} .vc-cele-card{width:100%;max-width:320px;padding:26px 22px 20px;border-radius:24px;text-align:center;font-family:Prompt,Sarabun,sans-serif; background:linear-gradient(160deg,rgba(52,211,153,.14),#17171a 55%);border:1px solid rgba(52,211,153,.35);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:vcPop .5s cubic-bezier(.3,1.5,.5,1) both} @keyframes vcPop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}} .vc-cele-art{position:relative;width:88px;height:88px;margin:0 auto 12px} .vc-cele-art svg{position:relative;display:block;filter:drop-shadow(0 0 16px rgba(52,211,153,.45))} .vc-cele-sh{stroke-dasharray:1;stroke-dashoffset:1;animation:vcDraw .7s ease .15s forwards} .vc-cele-ck{stroke-dasharray:1;stroke-dashoffset:1;animation:vcDraw .4s ease .7s forwards} @keyframes vcDraw{to{stroke-dashoffset:0}} .vc-cele-sp{position:absolute;left:50%;top:50%} .vc-cele-sp i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#6ee7b7;opacity:0; animation:vcSpark .8s ease-out var(--dl) forwards} .vc-cele-sp i:nth-child(3n){background:#fcd34d;width:5px;height:5px} .vc-cele-sp i:nth-child(4n){background:#93c5fd} @keyframes vcSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1)}} .vc-cele-card b{display:block;font:700 18px/1.35 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-cele-card p{margin:6px 0 16px;font:400 13.5px/1.6 Prompt,Sarabun,sans-serif;color:#a3a3aa} .vc-cele-card button{width:100%;min-height:48px;border:0;border-radius:14px;background:#34d399;color:#06281b;font:600 15px/1 Prompt,Sarabun,sans-serif;cursor:pointer} .vc-cele-card button::before,.vc-cele-card button::after{display:none !important} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art .vc-stamp{opacity:.9;transform:rotate(-14deg)} .vc-cele *,.vc-cele{animation:none !important} .vc-cele-sh,.vc-cele-ck{stroke-dashoffset:0} } /* ===== มือถือ: ลดแสงให้สบายตา (8 พ.ย. 2026) ===== */ @media (max-width:767px){ /* แผนที่สัญญา: สีหม่นลง ไม่มีแสงฟุ้ง แท่งเตี้ยลง */ html.vc-art .vc-map-bar{height:24px} html.vc-art .vc-map-c.is-hit{height:18px;box-shadow:none !important;background:color-mix(in srgb,var(--c) 42%,#1c1c20) !important;border:1px solid color-mix(in srgb,var(--c) 55%,transparent) !important} html.vc-art .vc-map-c{height:8px;background:rgba(255,255,255,.06)} html.vc-art .vc-map-c i{color:color-mix(in srgb,var(--c) 70%,#a3a3aa) !important;font-weight:500} /* วงกลม: แสงเรืองเบาลงมาก สีเส้นหม่นลงนิด */ html.vc-art .vc-sum .vc-donut svg{filter:none !important;opacity:.88} /* ตราประทับ: จางลงเหมือนหมึกซึม */ html.vc-art .vc-stamp.is-set{opacity:.5 !important} @keyframes vcStampHit{0%{opacity:0;transform:scale(2.4) rotate(-4deg)}55%{opacity:.6;transform:scale(.9) rotate(-15deg)}75%{transform:scale(1.04) rotate(-14deg)}100%{opacity:.5;transform:scale(1) rotate(-14deg)}} html.vc-art .vc-stamp svg{mix-blend-mode:normal} /* พื้นการ์ดสรุป: สีอ่อนลง */ html.vc-art .vc-sum.lv-hi{--sg:rgba(248,113,113,.07);--sb:rgba(248,113,113,.2);--st:#f2a3a3} html.vc-art .vc-sum.lv-mid{--sg:rgba(251,191,36,.06);--sb:rgba(251,191,36,.2);--st:#ecc76a} html.vc-art .vc-sum.lv-lo{--sg:rgba(52,211,153,.06);--sb:rgba(52,211,153,.2);--st:#7fd8b4} /* แถบอ่านแล้ว + ป้ายประเด็น สีอ่อนลง */ html.vc-art .vc-sum .ix-bar > i{background:#3fb98d !important} html.vc-art .vc-sum .ix-prog-note{color:#8fcfb4 !important} html.vc-art article.rpt.vc-m3 .ix-row.lv-check_detail{--lc:#c96b6b} html.vc-art article.rpt.vc-m3 .ix-row.lv-caution{--lc:#c9a24a} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art .vc-stamp{opacity:.5} } /* ===== มือถือ: ใช้ผลตรวจต่อ — ร่างข้อความ · เช็กลิสต์ · รูปสรุป (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-next,.vc-tool,.vc-tt{display:none} @media (max-width:767px){ html.vc-art .vc-next{display:block;margin:14px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.08)} html.vc-art .vc-next-h{margin:0 0 8px;font:600 12.5px/1.2 Prompt,Sarabun,sans-serif;color:#d4d4d8} html.vc-art .vc-next-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} html.vc-art .vc-next-b{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);color:#ededef;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:0} html.vc-art .vc-next-b::before,html.vc-art .vc-next-b::after{display:none !important} html.vc-art .vc-next-b:active{background:rgba(255,255,255,.08);transform:scale(.98)} html.vc-art .vc-next-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:3px;color:#d4d4d8;background:linear-gradient(145deg,#2a2a30,#1a1a1f);border:1px solid rgba(255,255,255,.09)} html.vc-art .vc-next-b b{font:600 13.5px/1.2 Prompt,Sarabun,sans-serif} html.vc-art .vc-next-b small{font:400 11.5px/1.2 Prompt,Sarabun,sans-serif;color:#8b8b94} html.vc-art .vc-next-b small em{font-style:normal;color:#8fcfb4;font-weight:600;margin-left:2px} /* แผ่นเครื่องมือ */ .vc-tool{display:block;position:fixed;inset:0;z-index:10020} html.vc-tool-open body{overflow:hidden} .vc-tool-back{position:absolute;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:vcFadeIn .25s ease both} .vc-tool-sh{position:absolute;left:0;right:0;bottom:0;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;border-radius:22px 22px 0 0;background:#17171a; border:1px solid rgba(255,255,255,.1);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6);font-family:Prompt,Sarabun,sans-serif;color:#ededef; animation:vcSheetUp .32s cubic-bezier(.2,.9,.3,1) both;transition:transform .2s ease} .vc-tool.out .vc-tool-sh{transform:translateY(100%);transition:transform .25s ease} .vc-tool.out .vc-tool-back{animation:vcFadeOut .25s ease both} .vc-tool-hd{position:relative;flex:0 0 auto;display:flex;align-items:flex-start;gap:12px;padding:24px 60px 14px 18px;border-bottom:1px solid rgba(255,255,255,.07)} .vc-tool-grab{position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:99px;background:rgba(255,255,255,.22)} .vc-tool-hd h3{margin:0;font:700 17px/1.3 Prompt,Sarabun,sans-serif;color:#f4f4f5;letter-spacing:0} .vc-tool-hd p{margin:3px 0 0;font:400 12.5px/1.45 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-tool-x{position:absolute;top:18px;right:12px;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e4e4e7} .vc-tool-x::before,.vc-tool-x::after,.vc-tool button::before,.vc-tool button::after{display:none !important} .vc-tool-bd{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px))} .vc-lbl{margin:14px 0 8px;font:600 12.5px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa} .vc-lbl:first-child{margin-top:4px} .vc-fine{margin:12px 0 0;font:400 11.5px/1.5 Prompt,Sarabun,sans-serif;color:#7a7a82;text-align:center} .vc-acts{display:flex;gap:8px;margin-top:14px} .vc-acts > *{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05); color:#ededef;font:600 15px/1 Prompt,Sarabun,sans-serif;text-decoration:none;cursor:pointer} .vc-acts > :first-child{background:#f4f4f5;color:#111;border-color:#f4f4f5} .vc-acts .vc-a-line{background:#06c755;border-color:#06c755;color:#fff} /* ร่างข้อความ */ .vc-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .vc-seg button{min-height:34px;padding:0 18px;border:0;border-radius:9px;background:transparent;color:#a3a3aa;font:600 13.5px/1 Prompt,Sarabun,sans-serif} .vc-seg button.on{background:#f4f4f5;color:#111} .vc-picks{display:flex;flex-direction:column;gap:6px} .vc-pick{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);cursor:pointer} .vc-pick input{flex:0 0 18px;width:18px;height:18px;accent-color:#34d399;margin:0} .vc-pick b{flex:1 1 auto;min-width:0;font:500 13.5px/1.4 Prompt,Sarabun,sans-serif;color:#e4e4e7} .vc-pick .vc-pill{flex:0 0 auto} .vc-pick:has(input:not(:checked)){opacity:.55} .vc-draft-ta{width:100%;box-sizing:border-box;min-height:220px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#0d0d0f;color:#ededef; font:400 16px/1.6 Prompt,Sarabun,sans-serif;resize:vertical} .vc-draft-ta:focus{outline:none;border-color:rgba(255,255,255,.35)} /* เช็กลิสต์ */ .vc-ck-prog{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.2)} .vc-ck-n{flex:0 0 auto;font:600 13.5px/1 Prompt,Sarabun,sans-serif;color:#8fcfb4} .vc-ck-bar{flex:1 1 auto;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .vc-ck-bar i{display:block;height:100%;width:0;background:#3fb98d;border-radius:99px;transition:width .3s ease} .vc-ck ul{list-style:none;margin:0;padding:0;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);overflow:hidden} .vc-ck li + li{border-top:1px solid rgba(255,255,255,.06)} .vc-ck label{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer} .vc-ck input{position:absolute;opacity:0;pointer-events:none} .vc-ck-box{flex:0 0 22px;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(255,255,255,.3);margin-top:1px;display:grid;place-items:center;transition:background .2s,border-color .2s} .vc-ck input:checked + .vc-ck-box{background:#3fb98d;border-color:#3fb98d} .vc-ck input:checked + .vc-ck-box::after{content:"";width:12px;height:12px;background:#06281b; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat} .vc-ck input:focus-visible + .vc-ck-box{outline:2px solid rgba(255,255,255,.5);outline-offset:2px} .vc-ck-t{flex:1 1 auto;font:400 14px/1.5 Prompt,Sarabun,sans-serif;color:#e4e4e7} .vc-ck input:checked ~ .vc-ck-t{color:#7a7a82;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)} .vc-ck-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 7px 1px 0;vertical-align:middle} /* รูปสรุป */ .vc-img-pv{display:grid;place-items:center;min-height:320px;border-radius:16px;background:#0d0d0f;border:1px solid rgba(255,255,255,.08);overflow:hidden} .vc-img-pv img{display:block;width:100%;max-width:300px;height:auto;border-radius:12px;margin:14px auto;box-shadow:0 14px 40px rgba(0,0,0,.6)} .vc-img-ld{font:400 13px/1 Prompt,Sarabun,sans-serif;color:#8b8b94} /* แจ้งเตือนสั้น */ .vc-tt{display:block;position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:10060;transform:translateX(-50%);padding:10px 16px;border-radius:99px; background:rgba(40,40,44,.96);border:1px solid rgba(255,255,255,.14);color:#ededef;font:500 13.5px/1 Prompt,Sarabun,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:vcFadeIn .2s ease both} .vc-tt.out{animation:vcFadeOut .25s ease both} } /* ===== มือถือ: เช็กลิสต์รุ่น 2 (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ @media (max-width:767px){ .vc-ck2 .vc-ck-top{position:sticky;top:-14px;z-index:2;margin:-14px -18px 0;padding:14px 18px 10px;background:#17171a} .vc-ck-warn{margin:8px 0 0;padding:9px 12px;border-radius:12px;background:rgba(217,178,90,.1);border:1px solid rgba(217,178,90,.28);color:#e3c67f;font:500 13px/1.45 Prompt,Sarabun,sans-serif} .vc-ck-warn[hidden]{display:none} /* หัวกลุ่ม: กดพับได้ + ตัวนับ */ .vc-ck-g{margin-top:16px} .vc-ck-gh{display:flex;align-items:center;gap:8px;width:100%;padding:0 2px;margin:0 0 8px;border:0;background:none;color:#a3a3aa;font:600 13px/1.3 Prompt,Sarabun,sans-serif;text-align:left;cursor:pointer} .vc-ck-gh span{flex:1 1 auto} .vc-ck-gn{font-style:normal;font-weight:600;font-size:12px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.06);color:#c4c4ca} .vc-ck-g.is-done .vc-ck-gn{background:rgba(63,185,141,.16);color:#8fcfb4} .vc-ck-g.is-done .vc-ck-gn::before{content:"✓ "} .vc-ck-chev{width:14px;height:14px;transition:transform .25s ease; background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat} .vc-ck-g.is-folded .vc-ck-chev{transform:rotate(-90deg)} .vc-ck-g.is-folded > ul{display:none} /* ข้อที่เสร็จ: จางลง ไม่ขีดฆ่า */ .vc-ck2 input:checked ~ .vc-ck-t{text-decoration:none !important;color:#8b8b94} /* ข้อที่ต้องคุย: คำถาม + สิ่งที่ควรขอ + ปุ่ม 3 สถานะ */ .vc-ck-tri{padding:12px 14px} .vc-ck-q b{display:block;margin:6px 0 2px;font:600 14.5px/1.45 Prompt,Sarabun,sans-serif;color:#ededef} .vc-ck-q small{display:block;font:400 12.5px/1.5 Prompt,Sarabun,sans-serif;color:#9a9aa2} .vc-ck-meta{display:flex;align-items:center;gap:8px;font:500 12px/1 Prompt,Sarabun,sans-serif} .vc-ck-meta .vc-no{color:#8b8b94} .vc-ck-seg{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:4px;margin-top:10px;padding:3px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} .vc-ck-seg button{min-height:36px;padding:0 4px;border:0;border-radius:9px;background:transparent;color:#a3a3aa;font:500 12.5px/1.1 Prompt,Sarabun,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent} .vc-ck-seg button.on{background:rgba(255,255,255,.12);color:#ededef;font-weight:600} .vc-ck-seg button.ok.on{background:rgba(63,185,141,.22);color:#9fe0c4} .vc-ck-seg button.no.on{background:rgba(224,133,133,.2);color:#f0aaaa} .vc-ck-tri[data-v="1"] .vc-ck-q b,.vc-ck-tri[data-v="1"] .vc-ck-q small{color:#8b8b94} .vc-ck-tri[data-v="2"]{background:rgba(224,133,133,.05)} /* สรุปท้าย */ .vc-ck-end{margin:16px 0 0;padding:16px;border-radius:16px;font-family:Prompt,Sarabun,sans-serif;animation:vcPop .45s cubic-bezier(.3,1.4,.5,1) both} .vc-ck-end[hidden]{display:none} .vc-ck-end.is-ok{background:rgba(63,185,141,.1);border:1px solid rgba(63,185,141,.3)} .vc-ck-end.is-warn{background:rgba(217,178,90,.09);border:1px solid rgba(217,178,90,.3)} .vc-ck-end b{display:block;font:700 16px/1.35 Prompt,Sarabun,sans-serif} .vc-ck-end.is-ok b{color:#9fe0c4} .vc-ck-end.is-warn b{color:#e3c67f} .vc-ck-end p{margin:4px 0 0;font:400 13px/1.55 Prompt,Sarabun,sans-serif;color:#b4b4bb} .vc-ck-end ul{margin:8px 0 0;padding:0 0 0 18px;border:0;background:none;border-radius:0} .vc-ck-end li{font:500 13.5px/1.5 Prompt,Sarabun,sans-serif;color:#e4e4e7;border:0 !important} .vc-acts .vc-a-line2{background:#06c755;border-color:#06c755;color:#fff} html.vc-art .vc-next-b small em.warn{color:#e3c67f} } /* ===== มือถือ: หน้าระหว่างรอตรวจ + ป้ายเดาประเภทสัญญา (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-ld,.vc-guess{display:none} @media (max-width:767px){ .vc-ld{display:grid;place-items:center;position:fixed;inset:0;z-index:10040;padding:24px;background:rgba(8,8,10,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:vcFadeIn .3s ease both} .vc-ld.out{animation:vcFadeOut .3s ease both} html.vc-ld-open body{overflow:hidden} .vc-ld-card{width:100%;max-width:330px;text-align:center;font-family:Prompt,Sarabun,sans-serif;color:#ededef} /* กระดาษจำลอง + เส้นสแกน */ .vc-ld-paper{position:relative;width:200px;height:250px;margin:0 auto 22px;padding:22px 18px;border-radius:6px;overflow:hidden;text-align:left; background:#efe9dd;box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);transform:rotate(-1.5deg)} .vc-ld-paper::before,.vc-ld-paper::after{content:"";position:absolute;inset:0;border-radius:6px;background:#e4ddcf;z-index:-1} .vc-ld-txt p{margin:0 0 7px;font:400 8.5px/1.45 Taviraj,Sarabun,serif;color:#3a3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85} .vc-ld-txt p:first-child{font-weight:600;font-size:10px;text-align:center;margin-bottom:10px} .vc-ld-scan{position:absolute;left:0;right:0;top:0;height:46px; background:linear-gradient(180deg,rgba(96,165,250,0),rgba(96,165,250,.28) 70%,rgba(147,197,253,.9) 96%,rgba(96,165,250,0)); border-bottom:1.5px solid rgba(147,197,253,.95);animation:vcScan 2.4s cubic-bezier(.45,0,.55,1) infinite} @keyframes vcScan{0%{transform:translateY(-50px)}50%{transform:translateY(250px)}100%{transform:translateY(-50px)}} .vc-ld-h{display:block;font:700 18px/1.3 Prompt,Sarabun,sans-serif;margin-bottom:14px} /* ขั้นตอน */ .vc-ld-steps{list-style:none;margin:0 auto;padding:0;display:inline-flex;flex-direction:column;gap:10px;text-align:left} .vc-ld-steps li{position:relative;padding-left:30px;font:400 14px/22px Prompt,Sarabun,sans-serif;color:#6f6f77;transition:color .3s} .vc-ld-steps li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-sizing:border-box;transition:all .3s} .vc-ld-steps li.on{color:#ededef;font-weight:500} .vc-ld-steps li.on::before{border-color:rgba(147,197,253,.3);border-top-color:#93c5fd;animation:vcSpin .8s linear infinite} .vc-ld-steps li.done{color:#a3a3aa} .vc-ld-steps li.done::before{background:#3fb98d;border-color:#3fb98d} .vc-ld-steps li.done::after{content:"";position:absolute;left:4px;top:6px;width:10px;height:10px;background:#06281b; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat} @keyframes vcSpin{to{transform:rotate(360deg)}} .vc-ld-note{margin:18px 0 0;font:400 12.5px/1.5 Prompt,Sarabun,sans-serif;color:#7a7a82} /* ป้ายเดาประเภทสัญญา */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-guess{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:10px 0 0;padding:9px 10px 9px 12px;border-radius:14px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);font:400 13px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa;animation:vcFadeUp .3s ease both} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-guess[hidden]{display:none} html.vc-art .vc-g-n{padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.07);color:#d4d4d8;font-weight:500} html.vc-art .vc-g-t b{color:#ededef;font-weight:600;margin-left:4px} html.vc-art .vc-g-ok{color:#8fcfb4} html.vc-art .vc-g-use{margin-left:auto;min-height:32px;padding:0 12px;border-radius:99px;border:0;background:#f4f4f5;color:#111;font:600 13px/1 Prompt,Sarabun,sans-serif;cursor:pointer} html.vc-art .vc-g-x{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:transparent;color:#8b8b94;font-size:12px;cursor:pointer} html.vc-art :is(.vc-g-use,.vc-g-x)::before,html.vc-art :is(.vc-g-use,.vc-g-x)::after{display:none !important} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .vc-ld-scan{animation:none;top:40%} .vc-ld-steps li.on::before{animation:none} } @media (max-width:767px){ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-guess{flex-wrap:nowrap;gap:6px;padding:7px 7px 7px 10px} html.vc-art .vc-g-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.vc-art .vc-g-n{flex:0 0 auto;padding:3px 7px;font-size:12px} html.vc-art .vc-g-use{flex:0 0 auto;margin-left:0;padding:0 10px;font-size:12.5px} html.vc-art .vc-g-x{flex:0 0 28px;width:28px;height:28px} html.vc-art .vc-g-ok{flex:1 1 auto} } /* ===== มือถือ: หน้ารอตรวจแบบ 3D (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ @media (max-width:767px){ html.vc-art article.rpt.vc-hold .vc-sum{opacity:0} .vc-ld3 .vc-ld-paper{background:#efe9dd} .vc-ld3 .vc-ld-stage{position:relative;width:230px;height:290px;margin:0 auto 26px;perspective:900px;transition:transform .5s cubic-bezier(.5,0,.2,1),opacity .5s ease} .vc-ld3 .vc-ld-cam{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.45,0,.2,1)} .vc-ld3 .vc-ld-stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-14deg) rotateZ(2deg) translateY(60px) scale(.7);opacity:0; transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s ease} .vc-ld3.in .vc-ld-stack{opacity:1;transform:rotateX(10deg) rotateY(-10deg) rotateZ(1.5deg);animation:vcFloat 4.5s ease-in-out .9s infinite} @keyframes vcFloat{0%,100%{transform:rotateX(10deg) rotateY(-10deg) rotateZ(1.5deg) translateY(0)}50%{transform:rotateX(6deg) rotateY(-4deg) rotateZ(.5deg) translateY(-8px)}} .vc-ld3.fin .vc-ld-stack{animation:none;transform:rotateX(0) rotateY(0) rotateZ(-1deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)} /* แผ่นกระดาษ */ .vc-ld3 .vc-ld-sheet,.vc-ld3 .vc-ld-paper,.vc-ld3 .vc-ld-flip{position:absolute;inset:0;border-radius:6px} .vc-ld3 .vc-ld-sheet{background:#ddd5c6;box-shadow:0 10px 30px rgba(0,0,0,.4)} .vc-ld3 .vc-ld-sheet.s1{transform:translateZ(-14px) rotateZ(-3deg) translateX(-6px)} .vc-ld3 .vc-ld-sheet.s2{transform:translateZ(-28px) rotateZ(4deg) translateX(8px);background:#d2c9b8} .vc-ld3 .vc-ld-paper{overflow:hidden;padding:20px 16px;transform:translateZ(0);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.04); background:linear-gradient(180deg,#f3eee4,#e9e2d4)} .vc-ld3 .vc-ld-paper::before,.vc-ld3 .vc-ld-paper::after{display:none} .vc-ld3 .vc-ld-paper h5{position:relative;z-index:1;margin:0 0 10px;font:600 10.5px/1.3 Taviraj,Sarabun,serif;color:#2c2824;text-align:center} .vc-ld3 .vc-ld-paper p{position:relative;z-index:1;margin:0 0 6px;padding:1px 3px;border-radius:2px;font:400 8.6px/1.45 Taviraj,Sarabun,serif;color:#4a443d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s,background .35s,opacity .3s} .vc-ld3 .vc-ld-paper p.is-read{opacity:.55} .vc-ld3 .vc-ld-paper p.is-reading{color:#1c2a3d;font-weight:600} /* ไฮไลต์บรรทัดที่กำลังอ่าน (สีฟ้า ไม่บอกผล) */ .vc-ld3 .vc-ld-hl{position:absolute;left:12px;right:12px;top:0;height:16px;border-radius:3px;background:rgba(96,165,250,.22);box-shadow:0 0 0 1px rgba(96,165,250,.35);opacity:0; transition:transform .9s cubic-bezier(.45,0,.2,1),height .3s,opacity .3s;z-index:0} /* ระนาบแสงสแกน 3D */ .vc-ld3 .vc-ld-plane{position:absolute;left:-10%;right:-10%;top:0;height:2px;background:rgba(147,197,253,.95);box-shadow:0 0 14px 4px rgba(96,165,250,.45),0 -30px 40px rgba(96,165,250,.15); z-index:2;animation:vcPlane 3s cubic-bezier(.45,0,.55,1) infinite} @keyframes vcPlane{0%{transform:translateY(-10px)}50%{transform:translateY(300px)}100%{transform:translateY(-10px)}} .vc-ld3.fin .vc-ld-plane{opacity:0;transition:opacity .3s} .vc-ld3 .vc-ld-scan{display:none} /* พลิกหน้า */ .vc-ld3 .vc-ld-flip{background:linear-gradient(90deg,#e4dccd,#f3eee4 60%,#d8cfbf);transform-origin:0 50%;opacity:0;backface-visibility:hidden;pointer-events:none} .vc-ld3 .vc-ld-flip.go{animation:vcFlip 1.1s cubic-bezier(.45,0,.2,1) both} @keyframes vcFlip{0%{opacity:1;transform:translateZ(2px) rotateY(0)}60%{opacity:1}100%{opacity:0;transform:translateZ(2px) rotateY(-165deg)}} /* ตอนจบ: เฉลยจุดเสี่ยงจริง */ .vc-ld3 .vc-ld-paper p.is-hit{color:#1a1714;font-weight:600} .vc-ld3 .vc-ld-paper p.is-hit.lv-check_detail{background:rgba(224,110,110,.38);box-shadow:inset 3px 0 0 #c94f4f} .vc-ld3 .vc-ld-paper p.is-hit.lv-caution{background:rgba(222,180,70,.42);box-shadow:inset 3px 0 0 #b98a1c} .vc-ld3 .vc-ld-paper p.is-hit.lv-low{background:rgba(140,140,150,.25);box-shadow:inset 3px 0 0 #77777f} .vc-ld3 .vc-ld-paper p.is-hit{animation:vcMark .45s ease both} @keyframes vcMark{from{background-size:0 100%;transform:scale(1.04)}to{transform:none}} .vc-ld-stamp{position:absolute;right:10px;bottom:22px;z-index:3;padding:6px 12px;border:2.5px solid currentColor;border-radius:6px;font:700 15px/1 Prompt,Sarabun,sans-serif; opacity:0;transform:scale(2.6) rotate(-6deg);mix-blend-mode:multiply} .vc-ld-stamp span{display:block;padding:2px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor} .vc-ld-stamp.lv-hi{color:#b83b3b} .vc-ld-stamp.lv-mid{color:#a87a12} .vc-ld-stamp.lv-lo{color:#2c8a63} .vc-ld-stamp.hit{animation:vcLdStamp .4s cubic-bezier(.5,0,.75,0) forwards} @keyframes vcLdStamp{0%{opacity:0;transform:scale(2.6) rotate(-6deg)}60%{opacity:.85;transform:scale(.92) rotate(-13deg)}100%{opacity:.8;transform:scale(1) rotate(-12deg)}} .vc-ld3 .vc-ld-paper.thud{animation:vcThud .36s ease .28s} /* บินเข้าการ์ดสรุป */ .vc-ld3.fly{background:rgba(8,8,10,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .5s ease,backdrop-filter .5s ease} .vc-ld3.fly .vc-ld-stage{opacity:0} .vc-ld3.fly :is(.vc-ld-h,.vc-ld-now,.vc-ld-steps,.vc-ld-note){opacity:0;transition:opacity .25s ease} .vc-ld-now{margin:-8px 0 14px;font:500 13px/1.4 Prompt,Sarabun,sans-serif;color:#93c5fd;min-height:18px} .vc-ld3.fin .vc-ld-now{color:#d4d4d8} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .vc-ld3 .vc-ld-stack{opacity:1;transform:rotateX(6deg) rotateY(-6deg);animation:none;transition:none} .vc-ld3 .vc-ld-plane{animation:none;top:45%} } @media (max-width:767px){ /* หน้าต่างกล้อง: ซูมแล้วไม่ล้นทับข้อความด้านล่าง ขอบบน-ล่างจางลง */ .vc-ld3 .vc-ld-stage{width:min(330px,88vw);height:300px;overflow:hidden;border-radius:18px; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)} .vc-ld3 .vc-ld-cam{inset:auto;left:50%;top:50%;width:220px;height:270px;margin:-135px 0 0 -110px} .vc-ld3.fin .vc-ld-stage,.vc-ld3.fly .vc-ld-stage{overflow:visible;-webkit-mask-image:none;mask-image:none} } /* ===== มือถือ: หน้ารอตรวจแบบแบ่งฉาก + ปากกาไฮไลต์ (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-ld-shield,.vc-ld-book,.vc-ld-links{display:none} @media (max-width:767px){ .vc-ld3 .vc-ld-stage{perspective:900px} .vc-ld3 .vc-ld-cam{transition:transform .9s cubic-bezier(.45,0,.2,1),filter .6s ease,opacity .6s ease} /* ปากกาไฮไลต์: ระบายจากซ้ายไปขวา */ .vc-ld3 .vc-ld-paper p .mk{background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;border-radius:2px;padding:0 2px;margin:0 -2px; background-image:linear-gradient(100deg,rgba(110,231,183,.0) 0,rgba(110,231,183,.55) 4%,rgba(110,231,183,.45) 96%,rgba(110,231,183,0) 100%); transition:background-size .6s cubic-bezier(.3,.6,.3,1);-webkit-box-decoration-break:clone;box-decoration-break:clone} .vc-ld3 .vc-ld-paper p.marked .mk{background-size:100% 100%} .vc-ld3 .vc-ld-paper p.marked{opacity:.92} /* จบ: สีจริงตามระดับ (ลากใหม่จาก 0) */ .vc-ld3 .vc-ld-paper p.is-hit{background:none !important;box-shadow:none !important;animation:none} .vc-ld3 .vc-ld-paper p.is-hit .mk{background-size:100% 100%;transition:background-size .55s cubic-bezier(.3,.6,.3,1)} .vc-ld3 .vc-ld-paper p.is-hit.lv-check_detail .mk{background-image:linear-gradient(100deg,rgba(230,90,90,0) 0,rgba(230,90,90,.55) 4%,rgba(230,90,90,.45) 96%,rgba(230,90,90,0) 100%)} .vc-ld3 .vc-ld-paper p.is-hit.lv-caution .mk{background-image:linear-gradient(100deg,rgba(240,190,60,0) 0,rgba(240,190,60,.62) 4%,rgba(240,190,60,.5) 96%,rgba(240,190,60,0) 100%)} .vc-ld3 .vc-ld-paper p.is-hit.lv-low .mk{background-image:linear-gradient(100deg,rgba(150,150,160,0) 0,rgba(150,150,160,.45) 4%,rgba(150,150,160,.38) 96%,rgba(150,150,160,0) 100%)} .vc-ld3[data-scene="end"] .vc-ld-paper p:not(.is-hit){opacity:.55} /* ฉาก 1: ปกปิดข้อมูล */ .vc-ld3 .vc-ld-shield{display:grid;place-items:center;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s ease} .vc-ld3 .vc-ld-shield svg{filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))} .vc-ld3 .vc-ld-shield .sh{fill:rgba(23,23,26,.82);stroke:#6fcaa5;stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1} .vc-ld3 .vc-ld-shield .ck{fill:none;stroke:#6fcaa5;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1} .vc-ld3[data-scene="privacy"] .vc-ld-shield{opacity:1} .vc-ld3[data-scene="privacy"] .vc-ld-shield .sh{animation:vcDraw .7s ease .35s forwards} .vc-ld3[data-scene="privacy"] .vc-ld-shield .ck{animation:vcDraw .35s ease 1s forwards} .vc-ld3[data-scene="privacy"] .vc-ld-cam{filter:blur(2.5px) brightness(.55)} .vc-ld3[data-scene="privacy"] .vc-ld-plane{opacity:0} /* ฉาก 3: เทียบกฎหมาย — กระดาษเลื่อนซ้าย หนังสือ 3D ทางขวา */ .vc-ld3[data-scene="law"] .vc-ld-cam{transform:translateX(-68px) scale(.62) !important} .vc-ld3[data-scene="law"] .vc-ld-plane{opacity:0} .vc-ld3 .vc-ld-book{display:block;position:absolute;right:6px;top:50%;width:140px;height:150px;margin-top:-75px;z-index:3;opacity:0;transform:translateX(60px); transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);perspective:700px;pointer-events:none} .vc-ld3[data-scene="law"] .vc-ld-book{opacity:1;transform:none} .vc-ld3 .bk{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(28deg) rotateY(-14deg) rotateZ(-4deg)} .vc-ld3 .bk-l,.vc-ld3 .bk-r,.vc-ld3 .bk-p{position:absolute;top:0;width:50%;height:100%;box-sizing:border-box;padding:16px 9px} .vc-ld3 .bk-l{left:0;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#e9e2d3,#f4efe5);box-shadow:-6px 10px 24px rgba(0,0,0,.45),inset -8px 0 12px -8px rgba(0,0,0,.25)} .vc-ld3 .bk-r{right:0;border-radius:0 6px 6px 0;background:linear-gradient(90deg,#f4efe5,#e6dfcf);box-shadow:6px 10px 24px rgba(0,0,0,.45),inset 8px 0 12px -8px rgba(0,0,0,.25)} .vc-ld3 .bk-l::before{content:"";position:absolute;inset:-6px auto -6px -6px;width:calc(100% + 6px);border-radius:7px 0 0 7px;background:#4a3326;z-index:-1;transform:translateZ(-2px)} .vc-ld3 .bk-r::before{content:"";position:absolute;inset:-6px -6px -6px auto;width:calc(100% + 6px);border-radius:0 7px 7px 0;background:#4a3326;z-index:-1;transform:translateZ(-2px)} .vc-ld3 .bk-l b{display:block;margin:0 0 8px;font:700 8px/1 Taviraj,Sarabun,serif;color:#4a3326;text-align:center;letter-spacing:.06em} .vc-ld3 .bk-l i,.vc-ld3 .bk-r i{display:block;height:3px;margin:0 0 7px;border-radius:2px;background:rgba(74,51,38,.28)} .vc-ld3 .bk-l i:nth-child(odd),.vc-ld3 .bk-r i:nth-child(even){width:78%} .vc-ld3 .bk-p{right:0;border-radius:0 6px 6px 0;background:linear-gradient(90deg,#efe8db,#faf6ee);transform-origin:0 50%;backface-visibility:visible; box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.2)} .vc-ld3[data-scene="law"] .bk-p{animation:vcPage 2.4s cubic-bezier(.45,0,.25,1) infinite} .vc-ld3[data-scene="law"] .bk-p.p2{animation-delay:.8s} .vc-ld3[data-scene="law"] .bk-p.p3{animation-delay:1.6s} @keyframes vcPage{0%{transform:rotateY(0);filter:brightness(1)}45%{filter:brightness(.82)}70%,100%{transform:rotateY(-178deg);filter:brightness(.95)}} /* จุดแสงวิ่งเชื่อมสัญญา → หนังสือ */ .vc-ld3 .vc-ld-links{display:block;position:absolute;left:96px;right:120px;top:50%;height:60px;margin-top:-30px;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s ease} .vc-ld3[data-scene="law"] .vc-ld-links{opacity:1} .vc-ld3 .vc-ld-links i{position:absolute;left:0;width:7px;height:7px;border-radius:50%;background:#93c5fd;box-shadow:0 0 10px 2px rgba(96,165,250,.6)} .vc-ld3 .vc-ld-links i:nth-child(1){top:6px;animation:vcLink 1.3s ease-in-out infinite} .vc-ld3 .vc-ld-links i:nth-child(2){top:27px;animation:vcLink 1.3s ease-in-out .43s infinite} .vc-ld3 .vc-ld-links i:nth-child(3){top:48px;animation:vcLink 1.3s ease-in-out .86s infinite} @keyframes vcLink{0%{transform:translateX(0) scale(.6);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(150px) scale(1);opacity:0}} /* ฉากจบ: หนังสือ/โล่หายไป */ .vc-ld3[data-scene="end"] :is(.vc-ld-book,.vc-ld-links,.vc-ld-shield){opacity:0} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .vc-ld3 .bk-p,.vc-ld3 .vc-ld-links i{animation:none !important} } /* ===== มือถือ: สีประจำประเภท · เส้นทางขั้นตอน · เน้นคำในกล่อง · ปุ่มตรวจแบบเด่น (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-rail,.vc-mirror{display:none} @media (max-width:767px){ html.vc-art{--vc-acc:#94a3b8;--vc-accs:color-mix(in srgb,var(--vc-acc) 70%,#c8c8cc)} /* 4) สีประจำประเภท: วงกลมขั้นที่เสร็จ, ขอบกล่องตอนพิมพ์, ป้าย "ตรงกับเนื้อหา" */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-sn.is-done{background:var(--vc-accs) !important;border-color:var(--vc-accs) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--vc-acc) 16%,transparent) !important} html.vc-art[data-view="desk"][data-desk="check"] #input:focus{border-color:color-mix(in srgb,var(--vc-acc) 55%,transparent) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--vc-acc) 12%,transparent) !important} html.vc-art .vc-g-ok{color:var(--vc-accs) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vcp-trigger{transition:border-color .4s ease} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vcp-trigger:not(:hover){border-color:color-mix(in srgb,var(--vc-acc) 22%,rgba(255,255,255,.12)) !important} /* 1) เส้นทางขั้นตอน: ราวซ้ายของการ์ด */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard{position:relative} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-rail{display:block;position:absolute;left:6px;width:3px;z-index:0;pointer-events:none} html.vc-art .vc-rail-bg,html.vc-art .vc-rail-fill{position:absolute;left:0;top:0;width:3px;border-radius:3px} html.vc-art .vc-rail-bg{height:100%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 4px,transparent 4px 9px)} html.vc-art .vc-rail-fill{height:0;background:linear-gradient(180deg,var(--vc-accs),color-mix(in srgb,var(--vc-acc) 50%,transparent));box-shadow:0 0 8px color-mix(in srgb,var(--vc-acc) 35%,transparent);transition:height .9s cubic-bezier(.4,0,.2,1)} html.vc-art .vc-rail b{position:absolute;left:-3.5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#26262b;border:2px solid rgba(255,255,255,.18);box-sizing:border-box;transition:background .4s,border-color .4s,transform .4s} html.vc-art .vc-rail b.on{background:var(--vc-accs);border-color:var(--vc-accs);transform:scale(1.1)} /* 2) เน้นคำในกล่องสัญญา: ชั้นเงาวาดสี ส่วนกล่องข้อความจริงโปร่ง (ยังพิมพ์/เลือกข้อความได้) */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on .vc-mirror{display:block;position:absolute;left:0;top:0;right:0;bottom:0;z-index:0;overflow:hidden;box-sizing:border-box; background:var(--k-in,#0d0d0f);color:#ededef;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;pointer-events:none} html.vc-art .vc-mirror-in{white-space:pre-wrap;overflow-wrap:break-word;will-change:transform} html.vc-art .vc-mirror .hk{color:#9cc8f5;background:rgba(96,165,250,.12);border-radius:3px;box-shadow:0 0 0 2px rgba(96,165,250,.12)} html.vc-art .vc-mirror .hn{color:#f0d9a8} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on #input{position:relative;z-index:1;background-color:transparent !important;color:transparent !important;-webkit-text-fill-color:transparent;caret-color:#ededef} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on #input::placeholder{-webkit-text-fill-color:var(--k-fa,#7a7a82)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on #input::selection{background:rgba(147,197,253,.35);-webkit-text-fill-color:transparent} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on::before,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on::after{z-index:2} /* 3) ปุ่มตรวจแบบเด่น: ไอคอนโล่ + แสงวิ่งผ่าน + เรืองแสงเมื่อพร้อม */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn{position:relative;overflow:hidden;display:flex !important;align-items:center;justify-content:center;gap:10px; box-shadow:0 10px 30px -10px color-mix(in srgb,var(--vc-acc) 55%,transparent),0 0 0 1px rgba(255,255,255,.6) inset !important;transition:transform .15s ease,box-shadow .3s ease} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:not(:disabled)::before{content:"" !important;display:block !important;position:static !important;flex:0 0 20px;width:20px;height:20px;background:#111 !important;border:0 !important;transform:none !important;opacity:1 !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6.2v5.3c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6.2z'/%3E%3Cpath d='m9 12 2.2 2.2L15.3 10'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6.2v5.3c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6.2z'/%3E%3Cpath d='m9 12 2.2 2.2L15.3 10'/%3E%3C/svg%3E") center/contain no-repeat} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:not(:disabled)::after{content:"" !important;display:block !important;position:absolute !important;top:0;bottom:0;left:-40%;width:35%; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--vc-acc) 35%,rgba(255,255,255,.9)),transparent) !important;transform:skewX(-20deg);opacity:.55;animation:vcShine 3.6s ease-in-out 1s infinite;pointer-events:none} @keyframes vcShine{0%{left:-40%}45%,100%{left:120%}} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:active:not(:disabled){transform:scale(.98) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn.vc-ready{animation:vcReady 1.1s ease} @keyframes vcReady{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--vc-acc) 60%,transparent)}60%{box-shadow:0 0 0 12px color-mix(in srgb,var(--vc-acc) 0%,transparent)}100%{box-shadow:0 10px 30px -10px color-mix(in srgb,var(--vc-acc) 55%,transparent)}} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art #checkCard #checkBtn::after{animation:none !important;display:none !important} } @media (max-width:767px){ html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:not(:disabled)::before{clip-path:none !important;-webkit-clip-path:none !important;z-index:auto !important;transition:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard #checkBtn:not(:disabled)::after{clip-path:none !important;-webkit-clip-path:none !important} } /* ===== มือถือ: แก้ 3 จุด + การ์ดลอยแยกขั้น + แสงออโรรา (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-aurora{display:none} @media (max-width:767px){ /* แก้ 1: placeholder ซ้อนกับข้อความกลางกล่อง — แสดงเฉพาะตอนกำลังพิมพ์ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on #input::placeholder{-webkit-text-fill-color:transparent !important;color:transparent !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on.vc-focus #input::placeholder{-webkit-text-fill-color:var(--k-fa,#7a7a82) !important} /* แก้ 2: เส้นขั้นตอนบางและจาง เด่นเฉพาะช่วงที่เติมสี */ html.vc-art .vc-rail-bg{width:2px;left:.5px;background:rgba(255,255,255,.07) !important} html.vc-art .vc-rail-fill{width:2px;left:.5px;box-shadow:0 0 6px color-mix(in srgb,var(--vc-acc) 30%,transparent)} html.vc-art .vc-rail b{left:-2px;width:7px;height:7px;margin-top:-3.5px;border-width:1.5px;background:#1e1e22;border-color:rgba(255,255,255,.14)} html.vc-art .vc-rail b.on{background:var(--vc-accs);border-color:var(--vc-accs);transform:none} /* แก้ 3: แถบ "พบข้อความที่ยังไม่ได้ตรวจ" เป็นการ์ดเตี้ย */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar:not([hidden]){display:grid !important;grid-template-columns:34px 1fr;grid-template-areas:"i t" "b b";gap:10px 12px;align-items:center; margin:12px 0 0 !important;padding:12px !important;border-radius:16px !important;border:1px solid rgba(255,255,255,.1) !important;border-left:1px solid rgba(255,255,255,.1) !important;background:rgba(255,255,255,.035) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar::before{content:"";grid-area:i;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#2a2a30,#1a1a1f);border:1px solid rgba(255,255,255,.09); -webkit-mask:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar::after{content:"";grid-area:i;justify-self:center;width:18px;height:18px;background:#d4d4d8; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3'/%3E%3Cpath d='M4.5 4.5v3.7h3.7'/%3E%3Cpath d='M12 8.5V12l2.5 1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3'/%3E%3Cpath d='M4.5 4.5v3.7h3.7'/%3E%3Cpath d='M12 8.5V12l2.5 1.5'/%3E%3C/svg%3E") center/contain no-repeat} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar > span{grid-area:t;font:400 13px/1.45 Prompt,Sarabun,sans-serif !important;color:#c4c4ca !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar > button{grid-row:2;min-height:40px !important;margin:0 !important;border-radius:12px !important;font:600 14px/1 Prompt,Sarabun,sans-serif !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar > button[data-draft="restore"]{grid-column:1 / 2;grid-column:1 / span 2;justify-self:stretch;margin-right:84px !important;background:#f4f4f5 !important;color:#111 !important;border:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar > button[data-draft="delete"]{grid-column:2;justify-self:end;width:76px;background:transparent !important;color:#c4c4ca !important;border:1px solid rgba(255,255,255,.14) !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar > button::before,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .draft-bar > button::after{display:none !important} /* 1) แสงออโรราหลังการ์ด (สีตามประเภท) */ html.vc-art[data-view="desk"][data-desk="check"] .vc-aurora{display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden} html.vc-art .vc-aurora i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.22;background:var(--vc-acc);transition:background 1.2s ease} html.vc-art .vc-aurora i:nth-child(1){width:70vw;height:70vw;left:-20vw;top:8vh;animation:vcAu1 22s ease-in-out infinite alternate} html.vc-art .vc-aurora i:nth-child(2){width:60vw;height:60vw;right:-25vw;top:42vh;opacity:.16;background:color-mix(in srgb,var(--vc-acc) 55%,#6d6dff);animation:vcAu2 26s ease-in-out infinite alternate} html.vc-art .vc-aurora i:nth-child(3){width:55vw;height:55vw;left:15vw;bottom:-18vh;opacity:.12;animation:vcAu3 30s ease-in-out infinite alternate} @keyframes vcAu1{to{transform:translate(18vw,12vh) scale(1.15)}} @keyframes vcAu2{to{transform:translate(-20vw,-10vh) scale(.9)}} @keyframes vcAu3{to{transform:translate(-12vw,-14vh) scale(1.2)}} html.vc-art[data-view="desk"][data-desk="check"] #vcBackdrop::after{background:rgba(10,10,12,.86) !important} /* 3) การ์ดลอยแยกขั้น: การ์ดหลักโปร่ง แต่ละขั้นเป็นกระจกฝ้า */ html.vc-art[data-view="desk"][data-desk="check"] main > #checkCard.vc-boxed{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 0 0 0 !important;margin-left:10px !important;margin-right:10px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box{position:relative;z-index:1;margin:0 0 14px 14px;padding:20px 16px 20px;border-radius:20px; background:rgba(22,22,26,.62);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); box-shadow:0 18px 40px -24px rgba(0,0,0,.9);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease,border-color .45s ease,box-shadow .45s ease} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box.is-active{border-color:color-mix(in srgb,var(--vc-acc) 32%,rgba(255,255,255,.1));transform:translateY(-2px); box-shadow:0 24px 50px -24px rgba(0,0,0,.95),0 0 0 4px color-mix(in srgb,var(--vc-acc) 7%,transparent)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box.is-next{opacity:.62} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box > .step-sub{margin:0 !important;padding:0 !important;border-top:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box > .step-sub h3{margin:0 0 16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box > :last-child{margin-bottom:0 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-needlogin{margin:0 0 14px 14px !important} /* ราวขั้นตอนอยู่ในร่องซ้ายของการ์ด */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .vc-rail{left:3px} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art .vc-aurora i{animation:none} } @media (max-width:767px){ html.vc-art[data-view="desk"][data-desk="check"] main > #checkCard.vc-boxed{margin-left:8px !important;margin-right:8px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box{margin-left:10px;padding:18px 14px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-needlogin{margin-left:10px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .vc-rail{left:2px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .step-head h2{font-size:15px !important;white-space:nowrap} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .step-head .credit-chip{padding:0 8px 0 7px !important;gap:4px;font-size:12.5px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .step-head .credit-chip b{font-size:12.5px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .ps.ps-fold .ps-head{padding:12px 10px 12px 12px;gap:10px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .ps.ps-fold .ps-title b{font-size:14.5px !important;white-space:nowrap} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .ps.ps-fold .ps-badge{padding:3px 8px !important;font-size:11.5px !important} } /* ===== มือถือ: แผ่นคำศัพท์ (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-gl-in,.vc-gl-rel,.vc-gl-srch{display:none} @media (max-width:767px){ /* 2) ในสัญญาของคุณ */ .gl-sheet .vc-gl-in{display:block;margin:16px 0 4px;padding:14px;border-radius:16px;background:rgba(240,217,168,.06);border:1px solid rgba(240,217,168,.18);font-family:Prompt,Sarabun,sans-serif} .gl-sheet .vc-gl-in h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 13px/1.3 Prompt,Sarabun,sans-serif;color:#e8d3a6} .gl-sheet .vc-gl-in h4 i{width:16px;height:16px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8h5M8.5 12.5h7M8.5 16h4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8h5M8.5 12.5h7M8.5 16h4.5'/%3E%3C/svg%3E") center/contain no-repeat} .gl-sheet .vc-gl-in p{margin:0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.06);font:400 14px/1.65 Taviraj,Sarabun,serif;color:#e4e4e7} .gl-sheet .vc-gl-in p:first-of-type{border-top:0;padding-top:0} .gl-sheet .vc-gl-in p + p{margin-top:10px} .gl-sheet .vc-gl-in q{quotes:"“" "”"} .gl-sheet .vc-gl-cl{display:inline-block;margin:0 8px 0 0;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.08);font:600 11.5px/1.4 Prompt,Sarabun,sans-serif;color:#d4d4d8;vertical-align:1px} .gl-sheet .vc-gl-in mark{color:#1a1714;background:linear-gradient(100deg,rgba(240,200,110,0),rgba(240,200,110,.85) 6%,rgba(240,200,110,.75) 94%,rgba(240,200,110,0));border-radius:3px;padding:0 3px; font-weight:600;animation:vcGlMark .6s cubic-bezier(.3,.6,.3,1) .25s both;background-size:0 100%;background-repeat:no-repeat} @keyframes vcGlMark{to{background-size:100% 100%}} /* 3) ประเด็นที่เกี่ยวข้อง */ .gl-sheet .vc-gl-rel{display:block;margin:18px 0 6px} .gl-sheet .vc-gl-rel h4,.gl-sheet .vc-gl-srch{display:block;margin:0 0 8px;font:600 13px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa} .gl-sheet .vc-gl-srch{margin-top:18px} .gl-sheet .vc-gl-rel button{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:12px 12px 12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035);color:#ededef;text-align:left;cursor:pointer;font-family:Prompt,Sarabun,sans-serif} .gl-sheet .vc-gl-rel button::before,.gl-sheet .vc-gl-rel button::after{display:none !important} .gl-sheet .vc-gl-rel button:active{background:rgba(255,255,255,.07)} .gl-sheet .vc-gl-rt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .gl-sheet .vc-gl-rt small{font:500 11.5px/1.2 Prompt,Sarabun,sans-serif;color:#8b8b94} .gl-sheet .vc-gl-rt b{font:600 14px/1.4 Prompt,Sarabun,sans-serif;color:#f4f4f5} .gl-sheet .vc-gl-rel button > i{flex:0 0 auto;font-style:normal;font-size:20px;color:#8b8b94} /* 4) การ์ดแหล่งอ้างอิง */ .gl-sheet .gl-srcbtn.vc-src{display:flex !important;align-items:center;gap:12px;padding:12px 12px 12px 12px !important;margin:0 0 8px !important;border-radius:16px !important; border:1px solid color-mix(in srgb,var(--sc) 30%,rgba(255,255,255,.08)) !important;background:color-mix(in srgb,var(--sc) 6%,rgba(255,255,255,.02)) !important;text-decoration:none} .gl-sheet .vc-src-ab{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font:700 12px/1 Prompt,Sarabun,sans-serif;letter-spacing:-.01em; color:#111;background:linear-gradient(145deg,color-mix(in srgb,var(--sc) 85%,#fff),var(--sc));box-shadow:0 6px 16px -8px var(--sc)} .gl-sheet .vc-src-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .gl-sheet .vc-src-tx b{font:600 14px/1.35 Prompt,Sarabun,sans-serif;color:#f4f4f5} .gl-sheet .vc-src-tx em{font:400 12.5px/1.45 Prompt,Sarabun,sans-serif;font-style:normal;color:#c4c4ca} .gl-sheet .vc-src-tx small{font:400 11.5px/1.3 Prompt,Sarabun,sans-serif;color:color-mix(in srgb,var(--sc) 70%,#a3a3aa)} .gl-sheet .gl-srcbtn.vc-src > i{flex:0 0 auto;font-style:normal;font-size:20px;color:#8b8b94} .gl-sheet .gl-law[hidden]{display:none !important} } /* ===== มือถือ: หน้าบัญชีแบบใหม่ (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-wcard,.vc-mi,.vc-mchev,.vc-mg,.vc-adm-chev,.vc-avpop{display:none} @media (max-width:767px){ /* B) หัวแผ่นเป็นโปรไฟล์ (เฉพาะโหมดบัญชีของแถบล่าง) */ #authCard .sheet-head > .acct-row{display:none} body[data-sheet="acct"] #authCard .sheet-head.vc-prof{position:relative;display:flex !important;align-items:center;gap:12px;padding:20px 16px 14px !important;background:#151518 !important;border-bottom:1px solid rgba(255,255,255,.07) !important} body[data-sheet="acct"] #authCard .sheet-head.vc-prof > h2{display:none !important} body[data-sheet="acct"] #authCard .sheet-head.vc-prof::before,body[data-sheet="acct"] #authCard .sheet-head.vc-prof::after{display:none !important} body[data-sheet="acct"]:has(#authLoggedIn:not([hidden])) #authCard .sheet-head > .acct-row{display:flex !important;flex:1 1 auto;min-width:0;align-items:center;gap:12px;margin:0 !important;padding:0 !important;border:0 !important;background:none !important} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar{flex:0 0 52px;width:52px !important;height:52px !important;border-radius:50% !important;font:600 20px/1 Prompt,Sarabun,sans-serif !important; background:linear-gradient(145deg,color-mix(in srgb,var(--vc-acc,#94a3b8) 45%,#3a3a42),#24242a) !important;color:#f4f4f5 !important;border:2px solid rgba(255,255,255,.14) !important;box-shadow:0 8px 20px -10px rgba(0,0,0,.8) !important;overflow:visible;position:relative} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar img{border-radius:50%} body[data-sheet="acct"] #authCard .sheet-head .acct-sticker{display:none !important} body[data-sheet="acct"] #authCard .sheet-head .acct-cam{right:-3px !important;bottom:-3px !important;width:20px !important;height:20px !important;background:#f4f4f5 !important;color:#111 !important;border:2px solid #151518 !important} body[data-sheet="acct"] #authCard .sheet-head .acct-info{min-width:0;display:flex;flex-direction:column;gap:3px} body[data-sheet="acct"] #authCard .sheet-head .acct-label{order:2;display:inline-flex !important;align-items:center;gap:5px;font:500 12px/1 Prompt,Sarabun,sans-serif !important;color:#8fcfb4 !important;letter-spacing:0 !important;text-transform:none !important;font-size:0 !important} body[data-sheet="acct"] #authCard .sheet-head .acct-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#3fb98d;box-shadow:0 0 0 3px rgba(63,185,141,.18)} body[data-sheet="acct"] #authCard .sheet-head .acct-label::after{content:"เข้าสู่ระบบแล้ว";font:500 12px/1 Prompt,Sarabun,sans-serif;color:#8fcfb4} body[data-sheet="acct"] #authCard .sheet-head .acct-mail{order:1;font:600 15.5px/1.3 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-sheet="acct"] #authCard .sheet-head .acct-check{display:none !important} body[data-sheet="acct"] #authCard .sheet-head .sheet-close{position:static !important;flex:0 0 38px;width:38px;height:38px;margin:0 !important} body[data-sheet="acct"] #authLoggedIn .cred-head,body[data-sheet="acct"] #authLoggedIn .acct-photo-del{display:none !important} .vc-avpop{display:block;position:absolute;left:16px;top:78px;z-index:30;min-width:170px;padding:6px;border-radius:14px;background:#232328;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.6);animation:vcFadeUp .2s ease both} .vc-avpop button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:none;color:#ededef;font:500 14px/1 Prompt,Sarabun,sans-serif;text-align:left} .vc-avpop button:active{background:rgba(255,255,255,.07)} .vc-avpop button.rm{color:#f0aaaa} .vc-avpop button::before,.vc-avpop button::after{display:none !important} /* A) การ์ดกระเป๋าเครดิต */ body[data-sheet="acct"] #authLoggedIn .cred-card{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 0 14px !important} body[data-sheet="acct"] #authLoggedIn .wallet-total{display:none !important} body[data-sheet="acct"] #authLoggedIn .vc-wcard{display:block;position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:22px;font-family:Prompt,Sarabun,sans-serif;color:#f4f4f5; background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--vc-acc,#94a3b8) 30%,transparent),transparent 60%),linear-gradient(150deg,#2a2a31,#17171b 70%); border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)} .vc-wc-sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 45%,transparent 55%);transform:translateX(-60%);animation:vcWcSheen 6s ease-in-out 1s infinite;pointer-events:none} @keyframes vcWcSheen{0%{transform:translateX(-60%)}40%,100%{transform:translateX(60%)}} .vc-wc-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px} .vc-wc-lab,.vc-wc-voice{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 Prompt,Sarabun,sans-serif;color:#c4c4ca} .vc-wc-lab svg,.vc-wc-voice svg{width:16px;height:16px} .vc-wc-voice{padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)} .vc-wc-voice b{color:#f4f4f5;font-weight:600} .vc-wc-num{position:relative;display:flex;align-items:baseline;gap:8px;margin:16px 0 2px} .vc-wc-num b{font:700 52px/1 Prompt,Sarabun,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .vc-wc-num small{font:500 15px/1 Prompt,Sarabun,sans-serif;color:#a3a3aa} .vc-wc-sub{position:relative;margin:0 0 14px;font:400 12.5px/1.5 Prompt,Sarabun,sans-serif;color:#9a9aa2} .vc-wcard.is-zero .vc-wc-sub{color:#e3c67f} .vc-wc-top-up{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:14px;background:#f4f4f5;color:#111;font:600 15px/1 Prompt,Sarabun,sans-serif} .vc-wc-top-up:active{transform:scale(.98)} .vc-wc-top-up::before,.vc-wc-top-up::after{display:none !important} .vc-wc-top-up svg{width:18px;height:18px} /* C) เมนูตั้งค่า */ body[data-sheet="acct"] #authLoggedIn .acct-menu{display:flex !important;flex-direction:column;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;overflow:visible !important} body[data-sheet="acct"] #authLoggedIn .acct-menu::before{display:none !important} body[data-sheet="acct"] #authLoggedIn .acct-menu .vc-mg{display:block;margin:16px 4px 8px;font:600 12.5px/1.2 Prompt,Sarabun,sans-serif;color:#8b8b94} body[data-sheet="acct"] #authLoggedIn .acct-menu .g1{order:1;margin-top:4px} body[data-sheet="acct"] #authLoggedIn #acctInfoBtn{order:2} body[data-sheet="acct"] #authLoggedIn #acctDetail{order:3} body[data-sheet="acct"] #authLoggedIn #dispBtn{order:4} body[data-sheet="acct"] #authLoggedIn #dispPanel{order:5} body[data-sheet="acct"] #authLoggedIn .acct-menu .g2{order:6} body[data-sheet="acct"] #authLoggedIn #privBtn{order:7} body[data-sheet="acct"] #authLoggedIn #privPanel{order:8} body[data-sheet="acct"] #authLoggedIn #helpPrivacy{order:9} body[data-sheet="acct"] #authLoggedIn #helpTerms{order:10} body[data-sheet="acct"] #authLoggedIn #helpContact{order:11} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-item{display:flex !important;align-items:center;gap:12px;min-height:60px;margin:0 !important;padding:10px 14px !important;border-radius:0 !important; background:rgba(255,255,255,.035) !important;border:1px solid rgba(255,255,255,.08) !important;border-top-width:0 !important;box-shadow:none !important} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-item[hidden]{display:none !important} body[data-sheet="acct"] #authLoggedIn #acctInfoBtn,body[data-sheet="acct"] #authLoggedIn #privBtn{border-top-width:1px !important;border-radius:16px 16px 0 0 !important} body[data-sheet="acct"] #authLoggedIn #dispBtn[aria-expanded="false"],body[data-sheet="acct"] #authLoggedIn #helpContact{border-radius:0 0 16px 16px !important} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-ico{display:none !important} body[data-sheet="acct"] #authLoggedIn .acct-menu .vc-mi{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;color:#d4d4d8;background:linear-gradient(145deg,#2a2a30,#1a1a1f);border:1px solid rgba(255,255,255,.09)} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-txt{flex:1 1 auto;min-width:0} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-txt b{display:block;font:600 14.5px/1.35 Prompt,Sarabun,sans-serif !important;color:#ededef !important} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-txt small{display:block;font:400 12px/1.4 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-item::after{display:none !important} body[data-sheet="acct"] #authLoggedIn .acct-menu .vc-mchev{display:block;flex:0 0 16px;width:16px;height:16px;background:#6f6f77;transition:transform .25s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat} body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-item[aria-expanded="true"] .vc-mchev{transform:rotate(90deg)} body[data-sheet="acct"] #authLoggedIn .acct-menu :is(#acctDetail,#dispPanel,#privPanel):not([hidden]){margin:0 !important;padding:12px 14px !important;background:rgba(255,255,255,.02) !important;border:1px solid rgba(255,255,255,.08) !important;border-top:0 !important} body[data-sheet="acct"] #authLoggedIn #dispPanel:not([hidden]){border-radius:0 0 16px 16px !important} /* ออกจากระบบ: แถวสีแดงแยกท้าย */ body[data-sheet="acct"] #authLoggedIn .acct-out{display:flex !important;align-items:center;gap:12px;width:100%;min-height:56px;margin:16px 0 8px !important;padding:10px 14px !important;border-radius:16px !important; background:rgba(224,110,110,.06) !important;border:1px solid rgba(224,110,110,.22) !important;color:#f0aaaa !important;font:600 14.5px/1 Prompt,Sarabun,sans-serif !important} /* D) แผงแอดมินแบบพับ */ body[data-sheet="acct"] #adminPanel.vc-fold{padding:0 !important;overflow:hidden} body[data-sheet="acct"] #adminPanel.vc-fold .adm-head{margin:0 !important;padding:12px 14px !important;cursor:pointer;-webkit-tap-highlight-color:transparent} body[data-sheet="acct"] #adminPanel.vc-fold .adm-head > div{flex:1 1 auto} body[data-sheet="acct"] #adminPanel.vc-fold .adm-ico{width:36px !important;height:36px !important;flex-basis:36px !important} body[data-sheet="acct"] #adminPanel.vc-fold .vc-adm-chev{display:block;flex:0 0 18px;width:18px;height:18px;background:#93c5fd;transition:transform .25s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat} body[data-sheet="acct"] #adminPanel.vc-fold.vc-open .vc-adm-chev{transform:rotate(180deg)} body[data-sheet="acct"] #adminPanel.vc-fold:not(.vc-open) > :not(.adm-head){display:none !important} body[data-sheet="acct"] #adminPanel.vc-fold.vc-open{padding-bottom:14px !important} body[data-sheet="acct"] #adminPanel.vc-fold.vc-open > :not(.adm-head){margin-left:14px !important;margin-right:14px !important} body[data-sheet="acct"] #adminPanel.vc-fold.vc-open > .adm-row{width:auto} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .vc-wc-sheen{animation:none;display:none} } @media (max-width:767px){ body[data-sheet="acct"] #authLoggedIn :is(.wallet,.pane[data-pane="acct"]){background:none !important;border:0 !important;box-shadow:none !important} body[data-sheet="acct"] #authLoggedIn .wallet::before,body[data-sheet="acct"] #authLoggedIn .wallet::after{display:none !important} } @media (max-width:767px){ body[data-sheet="hist"] #adminPanel{display:none !important} body[data-sheet="acct"] #adminPanel.vc-fold.vc-open > .adm-go{width:calc(100% - 28px) !important;display:block} } /* ===== มือถือ: หน้าบัญชี — แก้รูปโปรไฟล์ · เส้นคั่น · ท้ายหน้า · สถิติ · เตือนเครดิต (8 พ.ย. 2026) ===== */ .vc-stat,.vc-wc-warn,.vc-acct-foot{display:none} @media (max-width:767px){ /* แก้: รูปโปรไฟล์วงเดียว */ body[data-sheet="acct"] #authCard .sheet-head .acct-avatar{padding:0 !important;display:grid !important;place-items:center} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar #acctInitial{display:grid !important;place-items:center;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:50% !important; background:none !important;box-shadow:none !important;font:600 21px/1 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar #acctInitial[hidden]{display:none !important} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar #acctPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar .av-seal{display:none !important} body[data-sheet="acct"] #authCard .sheet-head .acct-cam{display:grid !important;place-items:center;position:absolute !important;right:-2px !important;bottom:-2px !important;width:20px !important;height:20px !important;padding:0 !important; border-radius:50% !important;background:#f4f4f5 !important;color:#111 !important;border:2px solid #151518 !important;box-shadow:none !important} body[data-sheet="acct"] #authCard .sheet-head .acct-cam svg{width:11px !important;height:11px !important} /* แก้: เส้นคั่นที่หลงเหลือ */ body[data-sheet="acct"] #authLoggedIn :is(.wallet,.pane,.acct-menu,.cred-card)::before,body[data-sheet="acct"] #authLoggedIn :is(.wallet,.pane,.cred-card)::after{display:none !important} body[data-sheet="acct"] #authLoggedIn :is(.pane,.wallet,.acct-menu,.acct-out){border-top:0 !important;border-bottom-color:transparent !important} body[data-sheet="acct"] #authLoggedIn .acct-out{border-bottom-color:rgba(224,110,110,.22) !important;border-top:1px solid rgba(224,110,110,.22) !important} body[data-sheet="acct"] #authLoggedIn hr,body[data-sheet="acct"] #authCard #authMsg:empty{display:none !important} body[data-sheet="acct"] #authLoggedIn .pane[data-pane="acct"]{padding-bottom:0 !important;margin-bottom:0 !important} /* ท้ายหน้า */ body[data-sheet="acct"] #authLoggedIn .vc-acct-foot{display:block;margin:18px 0 24px;text-align:center;font:400 11.5px/1.7 Prompt,Sarabun,sans-serif;color:#5f5f67} body[data-sheet="acct"] #authLoggedIn .vc-acct-foot b{color:#8b8b94;font-weight:600} /* 1) สถิติการใช้งาน */ body[data-sheet="acct"] #authLoggedIn .vc-stat:not([hidden]){display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 0;padding:12px 14px;border-radius:16px; border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#ededef;text-align:left;font-family:Prompt,Sarabun,sans-serif;animation:vcFadeUp .35s ease both} body[data-sheet="acct"] #authLoggedIn .vc-stat::before,body[data-sheet="acct"] #authLoggedIn .vc-stat::after{display:none !important} body[data-sheet="acct"] #authLoggedIn .vc-stat:active{background:rgba(255,255,255,.06)} .vc-stat-ic{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#d4d4d8;background:linear-gradient(145deg,#2a2a30,#1a1a1f);border:1px solid rgba(255,255,255,.09)} .vc-stat-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .vc-stat-tx b{font:600 14.5px/1.3 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-stat-tx small{font:400 12px/1.35 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-stat > i{font-style:normal;font-size:20px;color:#6f6f77} /* 2) เตือนเครดิตใกล้หมด */ body[data-sheet="acct"] #authLoggedIn .vc-wc-warn:not([hidden]){position:relative;display:flex;align-items:center;gap:8px;margin:-4px 0 12px;padding:9px 12px;border-radius:12px; background:rgba(217,178,90,.12);border:1px solid rgba(217,178,90,.3);font:500 12.5px/1.45 Prompt,Sarabun,sans-serif;color:#e8cf8c} .vc-wc-warn i{flex:0 0 16px;width:16px;height:16px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E") center/contain no-repeat} body[data-sheet="acct"] #authLoggedIn .vc-wcard.is-low{border-color:rgba(217,178,90,.32)} body[data-sheet="acct"] #authLoggedIn .vc-wcard.is-low .vc-wc-sub{display:none} } /* ===== มือถือ: แก้กรอบเหลี่ยม/เส้นขั้นตอน + กล่องว่างเตี้ยลง + ขั้นที่ยังไม่ถึง + กล่องว่างเคลื่อนไหว (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-empty-dash{display:none} @media (max-width:767px){ /* แก้ 1: textarea เป็น block (เดิมมีช่องว่างใต้ 7px ทำให้ชั้นสีล้นเป็นแถบเหลี่ยม) + ชั้นสีมุมมนตามกล่อง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard #input{display:block !important;vertical-align:top} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap .vc-mirror{border-radius:16px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap{border-radius:16px} /* แก้ 2: เส้นขั้นตอนวิ่งผ่านแนววงกลมเลข อยู่หลังการ์ด เห็นเป็นเส้นเชื่อมในช่องระหว่างการ์ด */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .vc-rail{z-index:0} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .vc-rail b{display:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .vc-rail-bg{background:rgba(255,255,255,.12) !important;width:2px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed .vc-rail-fill{width:2px} /* 1) กล่องว่างเตี้ยลง ไม่มีเส้นบรรทัด — มีข้อความแล้วค่อยขยาย */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) #input{min-height:220px !important;height:220px !important;background-image:none !important;resize:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) .vc-mirror{background-image:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) .vc-empty{gap:8px;padding:14px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus)::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) #input{border-color:transparent !important} /* 3) กล่องว่างเคลื่อนไหว: ไอคอนลอย + เส้นประวิ่งรอบกล่อง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-dash{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} html.vc-art .vc-empty-dash rect{fill:none;stroke:color-mix(in srgb,var(--vc-acc,#94a3b8) 45%,rgba(255,255,255,.35));stroke-width:1.5;stroke-dasharray:7 7;animation:vcDash 1.4s linear infinite} @keyframes vcDash{to{stroke-dashoffset:-28}} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-ico{animation:vcBob 3s ease-in-out infinite} @keyframes vcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} /* 2) ขั้นที่ยังไม่ถึง: ไม่จางทั้งการ์ด แค่วงกลมเลขจาง + ปุ่มตรวจบอก "วางสัญญาก่อน" */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box.is-next{opacity:1} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box.is-next .vc-sn{opacity:.55} html.vc-art[data-view="desk"][data-desk="check"] #checkCard:has(.ta-wrap:not(.vc-has)) #checkBtn:disabled{position:relative;color:transparent !important;background:transparent !important; border:1.5px dashed rgba(255,255,255,.18) !important;box-shadow:none !important;opacity:1 !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard:has(.ta-wrap:not(.vc-has)) #checkBtn:disabled::after{content:"วางสัญญาด้านบนก่อน แล้วกดตรวจได้เลย" !important;display:flex !important;align-items:center;justify-content:center;gap:8px; position:absolute !important;inset:0;color:#a3a3aa;font:500 14.5px/1 Prompt,Sarabun,sans-serif;background:none !important;transform:none !important;opacity:1 !important;animation:none !important;width:auto;left:0;clip-path:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard:has(.ta-wrap:not(.vc-has)) #checkBtn:disabled::before{display:none !important} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art .vc-empty-dash rect,html.vc-art .vc-empty-ico{animation:none !important} } /* ===== มือถือ: แก้กล่องสัญญา/กรอบซ้อน + ผลตรวจการ์ดกระจก + พับฟอร์ม + แท็บตัวเลื่อน (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-done{display:none} @media (max-width:767px){ /* แก้ 1: ไม่มีเส้นบรรทัดตอนมีข้อความ + ป้าย "ข้อ N" บางลง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-has #input, html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-hl-on #input{background-image:none !important} html.vc-art .vc-mirror .hk{background:linear-gradient(transparent 18%,rgba(96,165,250,.14) 18%,rgba(96,165,250,.14) 86%,transparent 86%) !important;box-shadow:none !important;border-radius:0 !important;font-weight:inherit} /* แก้ 2: ตัวนับอยู่ในแถบทึบท้ายกล่อง ไม่ทับข้อความ */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-has #input{padding-bottom:58px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-has::after{height:56px !important;background:linear-gradient(rgba(13,13,15,0),var(--k-in,#0d0d0f) 42%) !important;border-radius:0 0 15px 15px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap > .ta-count{z-index:3 !important} /* แก้ 3: ไม่มีกรอบนอกซ้อนการ์ดผลตรวจ */ html.vc-art main > #resultCard:has(article.rpt.vc-m){background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin-left:8px !important;margin-right:8px !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important} html.vc-art main > #resultCard:has(article.rpt.vc-m)::before,html.vc-art main > #resultCard:has(article.rpt.vc-m)::after{display:none !important} /* 1) ผลตรวจเป็นการ์ดกระจกลอย (ชุดเดียวกับขั้นตรวจ) */ html.vc-art article.rpt.vc-m :is(.vc-brief,.ix-row,.miss,.cb-src,.vc-leg,.gloss,.fu){background:rgba(22,22,26,.62) !important;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)} html.vc-art .vc-sum{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 24px 50px -26px rgba(0,0,0,.95)} html.vc-art .vc-sum::after{display:none} html.vc-art article.rpt.vc-m > .vc-tabs{background:rgba(22,22,26,.78) !important} html.vc-art main > #resultCard:has(article.rpt.vc-m) ~ * .vc-aurora{display:block} html.vc-art[data-view="desk"] .vc-aurora{display:block} /* 2) พับฟอร์มตรวจหลังผลออก */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-collapsed > .vc-box, html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-collapsed > .vc-rail, html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-collapsed > .vc-needlogin{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-collapsed > .vc-done:not([hidden]){display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 12px 12px 14px;border-radius:18px; background:rgba(22,22,26,.62);border:1px solid color-mix(in srgb,var(--vc-acc,#94a3b8) 25%,rgba(255,255,255,.09));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); font-family:Prompt,Sarabun,sans-serif;animation:vcFadeUp .35s ease both} html.vc-art .vc-done-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#f4f4f5; background:linear-gradient(145deg,color-mix(in srgb,var(--vc-acc,#94a3b8) 45%,#2a2a30),color-mix(in srgb,var(--vc-acc,#94a3b8) 18%,#18181c));border:1px solid rgba(255,255,255,.1)} html.vc-art .vc-done-ic svg{width:22px;height:22px} html.vc-art .vc-done-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} html.vc-art .vc-done-tx b{font:600 15px/1.3 Prompt,Sarabun,sans-serif;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.vc-art .vc-done-tx small{font:400 12px/1.35 Prompt,Sarabun,sans-serif;color:#8b8b94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.vc-art .vc-done-tx em{font-style:normal;color:var(--vc-accs,#8fcfb4)} html.vc-art .vc-done-edit{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#ededef;font:600 13px/1 Prompt,Sarabun,sans-serif} html.vc-art .vc-done-edit i{font-style:normal;font-size:16px} html.vc-art .vc-done-edit::before,html.vc-art .vc-done-edit::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] main > #checkCard.vc-collapsed{margin-bottom:0 !important} /* 3) แท็บมีตัวเลื่อน + เนื้อหาเลื่อนเข้า */ html.vc-art .vc-tabs.vc-has-ind{position:sticky} html.vc-art .vc-tabs.vc-has-ind .vc-tab{position:relative;z-index:1} html.vc-art .vc-tabs.vc-has-ind .vc-tab.on{background:transparent !important} html.vc-art .vc-tab-ind{position:absolute;left:0;top:4px;bottom:4px;z-index:0;border-radius:10px;background:#f4f4f5;box-shadow:0 4px 14px -6px rgba(0,0,0,.6); transition:transform .38s cubic-bezier(.3,1.2,.4,1),width .38s cubic-bezier(.3,1.2,.4,1)} html.vc-art .vc-tab{transition:color .3s ease} html.vc-art article.rpt.vc-m.vc-slide > [data-vt]:not(.vc-leg){animation:vcTabIn .38s cubic-bezier(.2,.8,.2,1) both} @keyframes vcTabIn{from{opacity:0;transform:translateX(calc(var(--vc-dir,1) * 28px))}to{opacity:1;transform:none}} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art .vc-tab-ind{transition:none} html.vc-art article.rpt.vc-m.vc-slide > [data-vt]{animation:none} } /* ===== มือถือ: แก้ตราขาด/ความกว้าง + ปัดอ่านแล้ว + สรุปย่อติดหัว + เลขลายน้ำ (8 พ.ย. 2026) — เฉพาะ ≤767px ===== */ .vc-mini{display:none} @media (max-width:767px){ /* แก้: ตราไม่ล้นจอ */ html.vc-art .vc-stamp{right:6px !important;top:-10px !important;width:86px !important;height:86px !important} /* แก้: ขอบซ้ายขวาเท่ากันทั้งหน้า (ไม่ต้องเว้นร่องซ้ายแล้ว) */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box, html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-needlogin{margin-left:0 !important} /* แถบสรุปตอนฟอร์มกาง: ปุ่ม "ซ่อน" */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-open-form > .vc-done:not([hidden]){display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 12px 12px 14px;border-radius:18px; background:rgba(22,22,26,.62);border:1px solid color-mix(in srgb,var(--vc-acc,#94a3b8) 25%,rgba(255,255,255,.09));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-family:Prompt,Sarabun,sans-serif} html.vc-art .vc-done-edit.is-up i{transform:rotate(-90deg);display:inline-block} /* 1) ปัดขวาเพื่ออ่านแล้ว */ html.vc-art article.rpt.vc-m3 .ix-row{touch-action:pan-y;overflow:hidden} html.vc-art article.rpt.vc-m3 .ix-row > :not(.vc-sw){transform:translateX(var(--swx,0));} html.vc-art article.rpt.vc-m3 .ix-row.vc-sw-back > *{transition:transform .3s cubic-bezier(.3,1.3,.5,1)} html.vc-art article.rpt.vc-m3 .ix-row.vc-swiping,html.vc-art article.rpt.vc-m3 .ix-row.vc-sw-back{ background:linear-gradient(90deg,rgba(63,185,141,calc(var(--sw,0) * .32)),rgba(63,185,141,calc(var(--sw,0) * .08)) 55%,rgba(22,22,26,.62) 100%) !important} html.vc-art article.rpt.vc-m3 .ix-row.vc-swiping::after,html.vc-art article.rpt.vc-m3 .ix-row.vc-sw-back::after{content:"✓ อ่านแล้ว" !important;position:absolute !important;left:16px;top:50%; transform:translateY(-50%) scale(calc(.7 + var(--sw,0) * .3));opacity:var(--sw,0);font:700 13px/1 Prompt,Sarabun,sans-serif !important;color:#9fe0c4 !important;letter-spacing:0 !important;z-index:0; -webkit-text-stroke:0;display:block !important;width:auto !important;height:auto !important;background:none !important;right:auto !important} html.vc-art article.rpt.vc-m3 .ix-row.vc-sw-go{border-color:rgba(63,185,141,.5) !important} /* 3) เลขลายน้ำ + แสงขอบระดับสำคัญ */ html.vc-art article.rpt.vc-m3 .ix-row[data-wm]:not(.vc-swiping):not(.vc-sw-back)::after{content:attr(data-wm) !important;position:absolute !important;right:52px;top:6px;left:auto !important; font:800 64px/1 Prompt,Sarabun,sans-serif !important;letter-spacing:-.04em !important;color:rgba(255,255,255,.035) !important;pointer-events:none;z-index:0;display:block !important; width:auto !important;height:auto !important;background:none !important;transform:none !important;opacity:1} html.vc-art article.rpt.vc-m3 .ix-row > *{position:relative;z-index:1} html.vc-art article.rpt.vc-m3 .ix-row.lv-check_detail{box-shadow:inset 26px 0 40px -30px rgba(224,110,110,.55) !important} html.vc-art article.rpt.vc-m3 .ix-row.lv-caution{box-shadow:inset 26px 0 40px -32px rgba(217,178,90,.4) !important} /* 2) การ์ดสรุปย่อติดหัว */ .vc-mini{display:flex;align-items:center;gap:10px;position:fixed;left:12px;right:12px;top:calc(var(--art-head,58px) + 6px);z-index:40;padding:8px 12px 8px 8px;border-radius:16px; background:rgba(24,24,28,.86);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 14px 30px -14px rgba(0,0,0,.9); color:#ededef;font-family:Prompt,Sarabun,sans-serif;text-align:left;transform:translateY(-140%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .25s ease} html.vc-mini-on .vc-mini{transform:none;opacity:1;pointer-events:auto} .vc-mini::before,.vc-mini::after{display:none !important} .vc-mini-d{flex:0 0 36px;width:36px;height:36px} .vc-mini-d svg{width:36px;height:36px;display:block} .vc-mini-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px} .vc-mini-t b{font:700 14.5px/1.25 Prompt,Sarabun,sans-serif;color:var(--st,#f4f4f5)} .vc-mini-t small{font:400 11.5px/1.3 Prompt,Sarabun,sans-serif;color:#9a9aa2} .vc-mini-bar{flex:0 0 56px;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden} .vc-mini-bar i{display:block;height:100%;width:0;background:#3fb98d;border-radius:99px;transition:width .4s ease} html.vc-mini-on.vc-art .vc-tabs{top:calc(var(--art-head,58px) + 66px) !important;transition:top .3s ease} html.vc-mini-on.vc-art article.rpt.vc-m :is(details.item,#issueIndex,.gloss,.fu,.miss){scroll-margin-top:calc(var(--art-head,58px) + 124px)} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .vc-mini{transition:none} } /* ===== v207 (มือถือ): แก้การ์ดว่างบน iPhone + แถบย่อรวมแท็บ + ตัวเลขในโดนัท + คำใบ้ปัด ===== */ @media (max-width:767px){ /* บั้ก 1: เลิกใช้กระจกฝ้าซ้อนหลายชั้น (iOS วาดไม่ทัน → การ์ดว่าง/บล็อกดำ) ใช้พื้นทึบเกือบทั้งหมดแทน */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box, html.vc-art[data-view="desk"][data-desk="check"] #checkCard > .vc-done, html.vc-art .vc-sum, html.vc-art article.rpt.vc-m :is(.vc-brief,.ix-row,.miss,.cb-src,.vc-leg,.gloss,.fu){ -webkit-backdrop-filter:none !important;backdrop-filter:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard.vc-boxed > .vc-box, html.vc-art[data-view="desk"][data-desk="check"] #checkCard > .vc-done, html.vc-art .vc-sum{background:rgba(24,24,28,.92) !important} html.vc-art article.rpt.vc-m :is(.vc-brief,.ix-row,.miss,.cb-src,.vc-leg,.gloss,.fu){background:rgba(24,24,28,.9) !important} /* แสงพื้นหลัง: ไล่สีแบบวงกลมแทน filter:blur ขนาดใหญ่ */ html.vc-art .vc-aurora i{filter:none !important;background:radial-gradient(closest-side,var(--vc-acc),transparent) !important;will-change:auto} html.vc-art .vc-aurora i:nth-child(2){background:radial-gradient(closest-side,color-mix(in srgb,var(--vc-acc) 55%,#6d6dff),transparent) !important} /* ขยับการ์ดเฉพาะตอนกำลังปัด (ไม่สร้างเลเยอร์ค้างทุกการ์ด) */ html.vc-art article.rpt.vc-m3 .ix-row > :not(.vc-sw){transform:none} html.vc-art article.rpt.vc-m3 .ix-row:is(.vc-swiping,.vc-sw-back,.vc-sw-go) > :not(.vc-sw):not(.vc-swl):not(.vc-burst){transform:translateX(var(--swx,0))} /* ไอเดีย 1: ตัวเลขกลางโดนัท + แถบสีตามระดับเสี่ยง */ .vc-mini-d{position:relative} .vc-mini-d em{position:absolute;inset:0;display:grid;place-items:center;font:700 .8rem/1 Prompt,Sarabun,sans-serif;font-style:normal;color:#f4f4f5} .vc-mini-bar i{background:var(--st,#3fb98d)} /* ไอเดีย 2: แถบย่อ + แท็บ ต่อกันเป็นชิ้นเดียว */ .vc-mini{left:8px;right:8px;height:52px;box-sizing:border-box;border-radius:16px 16px 0 0;border-bottom-color:rgba(255,255,255,.05);box-shadow:none} html.vc-mini-on.vc-art .vc-tabs{top:calc(var(--art-head,58px) + 58px) !important;border-top-color:transparent !important;border-radius:0 0 14px 14px !important; background:rgba(24,24,28,.86) !important;box-shadow:0 14px 30px -14px rgba(0,0,0,.9)} /* ไอเดีย 3: คำใบ้ปัดขวา (ครั้งเดียว) */ .vc-sw-tip{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:-4px auto 12px;padding:6px 12px;border-radius:99px; background:rgba(63,185,141,.12);border:1px solid rgba(63,185,141,.3);color:#7fd9b4;font:500 .8rem/1.3 Prompt,Sarabun,sans-serif;animation:vcFadeIn .3s ease both;transition:opacity .3s ease,transform .3s ease} .vc-sw-tip i{font-style:normal;animation:vcTipNudge 1s ease-in-out infinite} .vc-sw-tip.out{opacity:0;transform:translateY(-4px)} @keyframes vcTipNudge{50%{transform:translateX(4px)}} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .vc-sw-tip i{animation:none} } /* ===== v208 (มือถือ): แผ่นรายละเอียดประเด็น — ความสูงคงที่, ข้อความเต็ม, สีจุดตรงระดับ, ขีดสตอรี่, เทียบต้นฉบับ, คัดลอก/ส่งทุกข้อ ===== */ .vc-sh-bars,.vc-cmp,.vc-cmp-arrow,.vc-fix-act{display:none} @media (max-width:767px){ /* บั้ก ก: สูงเท่ากันทุกข้อ ปุ่มอยู่ตำแหน่งเดิม */ html.vc-art article.rpt.vc-m details.item.is-picked[open]{height:86vh;height:86dvh;max-height:none;translate:var(--shx,0px) 0;transition:transform .2s ease,translate .2s ease} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-foot{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(23,23,26,0),#17171a 14px)} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-foot .rv-row{margin:6px 0 0 !important} html.vc-art article.rpt.vc-m details.item.is-picked[open]{padding-bottom:0 !important} html.vc-art article.rpt.vc-m details.item.vc-sh-from-r[open]{animation:vcShR .3s cubic-bezier(.2,.9,.3,1)} html.vc-art article.rpt.vc-m details.item.vc-sh-from-l[open]{animation:vcShL .3s cubic-bezier(.2,.9,.3,1)} @keyframes vcShR{from{opacity:.3;translate:28% 0}} @keyframes vcShL{from{opacity:.3;translate:-28% 0}} /* บั้ก ข: ข้อความขอแก้ไขแสดงเต็ม */ html.vc-art details.item.is-picked .it-fix p{display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important} /* บั้ก ค: จุดสีตามระดับเสี่ยงของประเด็น */ html.vc-art article.rpt.vc-m details.item.lv-check_detail .ur-chip span{color:#f87171 !important} html.vc-art article.rpt.vc-m details.item.lv-caution .ur-chip span{color:#fbbf24 !important} html.vc-art article.rpt.vc-m details.item.lv-low .ur-chip span{color:#8b8b94 !important} /* ไอเดีย 1: ขีดสตอรี่ */ html.vc-art article.rpt.vc-m details.item.is-picked[open] > summary{padding-top:34px !important} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-bars{display:flex;gap:4px;position:absolute;top:20px;left:16px;right:16px} .vc-sh-bars i{flex:1 1 0;height:4px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;cursor:pointer;overflow:hidden} .vc-sh-bars i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c,#8b8b94);opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .35s ease,opacity .2s} .vc-sh-bars i::after{content:"";position:absolute;inset:-10px 0} .vc-sh-bars i.lv-hi{--c:#f87171}.vc-sh-bars i.lv-mid{--c:#fbbf24}.vc-sh-bars i.lv-lo{--c:#8b8b94} .vc-sh-bars i.on::before{transform:none;opacity:.55} .vc-sh-bars i.dn::before{transform:none;opacity:1} .vc-sh-bars i.on{box-shadow:0 0 0 1px rgba(255,255,255,.35)} html.vc-art article.rpt.vc-m details.item.is-picked[open] .vc-sh-x{top:36px} .vc-cmp blockquote::before,.vc-cmp blockquote::after{display:none !important} /* ไอเดีย 2: ต้นฉบับ → ขอแก้เป็น */ html.vc-art details.item.is-picked .vc-cmp{display:block;margin:14px 0 0;padding:12px 14px 12px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);position:relative} html.vc-art details.item.is-picked .vc-cmp::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:rgba(248,113,113,.6)} html.vc-art details.item.lv-caution.is-picked .vc-cmp::before{background:rgba(251,191,36,.6)} html.vc-art details.item.lv-low.is-picked .vc-cmp::before{background:rgba(139,139,148,.6)} .vc-cmp-l{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:500 12.5px/1.3 Prompt,Sarabun,sans-serif;color:#9a9aa1} .vc-cmp blockquote{margin:0;padding:0 !important;border:0 !important;background:none !important;border-radius:0;font:400 14.5px/1.7 Sarabun,Prompt,sans-serif;color:#d4d4d8;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .vc-cmp blockquote.open{display:block} .vc-cmp mark{background:rgba(251,191,36,.16);color:#fde68a;border-radius:4px;padding:0 3px} .vc-cmp-more{margin:6px 0 0;padding:0;border:0;background:none;color:#a5b4fc;font:500 13px/1.3 Prompt,Sarabun,sans-serif;cursor:pointer} .vc-cmp-more[hidden]{display:none} html.vc-art details.item.is-picked .vc-cmp-arrow{display:flex;align-items:center;gap:6px;margin:8px 0 -4px 6px;font:600 12.5px/1 Prompt,Sarabun,sans-serif;color:#6ee7b7} html.vc-art details.item.is-picked .vc-cmp-arrow span{font-size:15px} /* ไอเดีย 3: คัดลอก / ส่งทุกข้อ */ html.vc-art details.item.is-picked .vc-fix-act{display:flex;gap:8px;margin:12px 0 0} .vc-fix-act button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px; border:1px solid rgba(110,231,183,.28);background:rgba(110,231,183,.08);color:#a7f3d0;font:600 13.5px/1 Prompt,Sarabun,sans-serif;cursor:pointer;transition:background .2s,color .2s} .vc-fix-act button::before,.vc-fix-act button::after{display:none !important} .vc-fix-act button.ok{background:#34d399;color:#06281b;border-color:#34d399} } /* ===== v209 (มือถือ): การ์ดสรุปโล่งขึ้น ===== */ .vc-cta,.vc-sum-hd{display:none} @media (max-width:767px){ /* บั้ก ก: ไอคอนเส้นตามประเภทสัญญา */ html.vc-art .vc-done-ic{background:color-mix(in srgb,var(--da,#94a3b8) 15%,#1c1c20) !important;border:1px solid color-mix(in srgb,var(--da,#94a3b8) 35%,transparent) !important;color:var(--da,#94a3b8) !important;box-shadow:none !important} html.vc-art .vc-done-ic svg{width:22px !important;height:22px !important} /* บั้ก ข: ไม่แสดงประเภทซ้ำเมื่อผู้ใช้เลือกเอง */ html.vc-art .vc-sum.vc-type-known .vc-sum-meta{display:none !important} html.vc-art .vc-sum:has(.vc-stamp) .vc-sum-meta,html.vc-art .vc-sum:has(.vc-stamp) .vc-sum-tx{padding-right:0 !important} /* ไอเดีย 3: แถวหัวการ์ด + ไอคอนกลมเล็ก */ html.vc-art .vc-sum .vc-sum-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.07)} html.vc-art .vc-sum .vc-sum-hd .vc-sum-meta{margin:0 !important;padding:0 !important;border:0 !important;min-width:0;flex:1 1 auto} html.vc-art .vc-sum .vc-sum-hd .vc-sum-k{margin:0 !important;font:500 13px/1.2 Prompt,Sarabun,sans-serif !important;color:#a3a3aa !important;flex:1 1 auto} html.vc-art .vc-sum .vc-sum-hd .share-bar{display:flex !important;gap:6px !important;margin:0 !important;padding:0 !important;border:0 !important;flex:0 0 auto} html.vc-art .vc-sum .vc-sum-hd .share-bar button{width:36px !important;height:36px !important;min-height:36px !important;padding:0 !important;border-radius:50% !important;justify-content:center; background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.1) !important;color:#d4d4d8 !important} html.vc-art .vc-sum .vc-sum-hd .share-bar button span{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html.vc-art .vc-sum .vc-sum-hd .share-bar button svg{width:17px !important;height:17px !important;flex:0 0 17px} /* ไอเดีย 1: โดนัทใหญ่ + ตราเล็กทับมุม */ html.vc-art .vc-sum .vc-sum-top{gap:18px} html.vc-art .vc-sum .vc-donut{flex:0 0 108px;width:108px;height:108px} html.vc-art .vc-sum .vc-donut > svg{width:108px !important;height:108px !important} html.vc-art .vc-sum .vc-donut b{font-size:34px} html.vc-art .vc-sum .vc-donut small{font-size:12px} html.vc-art .vc-sum .vc-donut .vc-stamp{top:auto !important;bottom:-16px !important;right:-30px !important;left:auto !important;width:52px !important;height:52px !important} html.vc-art .vc-sum .vc-sum-tx h3{font-size:24px !important} html.vc-art .vc-sum .vc-sum-tx > p:last-child{font-size:14px;line-height:1.55;text-wrap:pretty} html.vc-art .vc-sum .vc-sum-leg{margin-top:16px} /* ไอเดีย 5: ปุ่มเริ่มอ่าน */ html.vc-art .vc-sum .vc-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;margin:14px 0 0;padding:0 16px;border-radius:14px;cursor:pointer; font:600 15.5px/1.2 Prompt,Sarabun,sans-serif;color:#fecaca;background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.4);-webkit-tap-highlight-color:transparent;transition:transform .15s ease} html.vc-art .vc-sum .vc-cta::before,html.vc-art .vc-sum .vc-cta::after{display:none !important} html.vc-art .vc-sum .vc-cta i{font-style:normal;font-size:18px;transition:transform .2s ease} html.vc-art .vc-sum .vc-cta:active{transform:scale(.98)} html.vc-art .vc-sum .vc-cta:active i{transform:translateX(3px)} html.vc-art .vc-sum .vc-cta.lv-mid{color:#fde68a;background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4)} html.vc-art .vc-sum .vc-cta.lv-lo{color:#e4e4e7;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)} html.vc-art .vc-sum .vc-cta.lv-ok{color:#a7f3d0;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35);cursor:default} html.vc-art .vc-sum .vc-cta.lv-ok i{display:none} html.vc-art .vc-sum .vc-cta.lv-ok span::before{content:"✓ "} /* ไอเดีย 2 + บั้ก ค: แผนที่สัญญา ช่องเท่ากันทุกข้อ มีเลข + รวมกับแถบอ่านแล้ว */ html.vc-art .vc-sum .vc-map{margin:16px 0 0 !important;padding:12px 12px 10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-bottom:0;border-radius:14px 14px 0 0} html.vc-art .vc-sum .vc-map .vc-map-bar{height:auto !important;align-items:stretch;gap:4px;margin-top:10px !important} html.vc-art .vc-sum .vc-map .vc-map-c{height:28px !important;border-radius:7px !important;display:grid !important;place-items:center;background:rgba(255,255,255,.035) !important;border:1px solid rgba(255,255,255,.08) !important;box-shadow:none !important} html.vc-art .vc-sum .vc-map .vc-map-c i{position:static !important;transform:none !important;font:600 11.5px/1 Prompt,Sarabun,sans-serif !important;font-style:normal;color:#5f5f67 !important} html.vc-art .vc-sum .vc-map .vc-map-c.is-hit{background:color-mix(in srgb,var(--c) 22%,#1c1c20) !important;border-color:color-mix(in srgb,var(--c) 60%,transparent) !important} html.vc-art .vc-sum .vc-map .vc-map-c.is-hit i{color:color-mix(in srgb,var(--c) 75%,#fff) !important} html.vc-art .vc-sum .vc-map .vc-map-c.dn{background:rgba(52,211,153,.14) !important;border-color:rgba(52,211,153,.5) !important} html.vc-art .vc-sum .vc-map .vc-map-c.dn i{font-size:0 !important} html.vc-art .vc-sum .vc-map .vc-map-c.dn i::after{content:"✓";font-size:13px;color:#6ee7b7} html.vc-art .vc-sum .vc-map .vc-map-bar:has(.vc-map-c:nth-child(13)) .vc-map-c:not(.is-hit) i{display:none} html.vc-art .vc-sum .vc-map .vc-map-bar:has(.vc-map-c:nth-child(25)) .vc-map-c i{display:none} html.vc-art .vc-sum .vc-map + .ix-prog{margin:0 !important;padding:10px 12px 12px !important;background:rgba(255,255,255,.025) !important;border:1px solid rgba(255,255,255,.07) !important;border-top:1px dashed rgba(255,255,255,.07) !important;border-radius:0 0 14px 14px !important} /* ไอเดีย 3: ใช้ผลนี้ต่อ เป็นการ์ดเลื่อนแนวนอน */ html.vc-art .vc-sum .vc-next-g{display:flex !important;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 !important;padding:0 0 2px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} html.vc-art .vc-sum .vc-next-g::-webkit-scrollbar{display:none} html.vc-art .vc-sum .vc-next-b{flex:0 0 62%;scroll-snap-align:start;display:grid !important;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px !important;min-height:74px} html.vc-art .vc-sum .vc-next-b .vc-next-ic{grid-row:1 / span 2;width:44px;height:44px;margin:0 !important} html.vc-art .vc-sum .vc-next-b b{align-self:end;font-size:15px !important} html.vc-art .vc-sum .vc-next-b small{align-self:start} } /* ===== v210 (มือถือ): ศัพท์น่ารู้ ===== */ .gl-c-ic,.gl-pv,.gl-chips,.gl-mine{display:none} @media (max-width:767px){ /* บั้ก ก + ข: หัวการ์ดไม่ใช่กล่องดำ ไม่ซ้ำชื่อแท็บ */ html.vc-art article.rpt.vc-m > .gloss{padding:14px 14px 16px !important} html.vc-art article.rpt.vc-m > .gloss .gl-head{background:none !important;border:0 !important;padding:0 2px 10px !important;margin:0 !important;box-shadow:none !important;border-radius:0 !important} html.vc-art article.rpt.vc-m > .gloss .gl-head :is(.gl-ico,.gl-count,h3){display:none !important} html.vc-art article.rpt.vc-m > .gloss .gl-title p{margin:0 !important;font:400 13px/1.5 Prompt,Sarabun,sans-serif !important;color:#a3a3aa !important} html.vc-art article.rpt.vc-m > .gloss .gl-title p::after{content:" · แตะเพื่อดูคำอธิบายเต็ม"} /* บั้ก ค */ html.vc-art article.rpt.vc-m > .gloss .gl-note{margin:14px 2px 0 !important;padding:0 !important;font:400 12px/1.6 Prompt,Sarabun,sans-serif !important;color:#76767e !important} /* ไอเดีย 1: การ์ดต่อคำ */ html.vc-art article.rpt.vc-m > .gloss .gl-term{margin:10px 0 0 !important;padding:0 !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden;transition:border-color .2s,background .2s} html.vc-art article.rpt.vc-m > .gloss .gl-term[open]{border-color:rgba(255,255,255,.16) !important;background:rgba(255,255,255,.04)} html.vc-art article.rpt.vc-m > .gloss .gl-term > summary{display:flex !important;align-items:flex-start !important;justify-content:flex-start !important;gap:12px !important;padding:14px 14px 14px 14px;position:relative} html.vc-art article.rpt.vc-m > .gloss .gl-term > summary::after{position:absolute;top:14px;right:14px;line-height:1} .gl-c-ic{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#d4d4d8} .gl-c-ic.c-money{color:#6ee7b7;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.25)} .gl-c-ic.c-people{color:#93c5fd;background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.25)} .gl-c-ic.c-exit{color:#fca5a5;background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.25)} .gl-c-ic.c-time{color:#fcd34d;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25)} .gl-c-ic.c-book{color:#c4b5fd;background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25)} html.vc-art .gloss .gl-c-b{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;padding-right:18px} html.vc-art .gloss .gl-c-b > b{font:600 16px/1.35 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important} html.vc-art .gloss .gl-pv{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 13.5px/1.55 Sarabun,Prompt,sans-serif;color:#a3a3aa} html.vc-art .gloss .gl-term[open] .gl-pv{display:none} html.vc-art article.rpt.vc-m > .gloss .gl-term > :not(summary){margin-left:14px !important;margin-right:14px !important} html.vc-art article.rpt.vc-m > .gloss .gl-term .gl-text{margin-top:0 !important;font:400 14.5px/1.7 Sarabun,Prompt,sans-serif !important;color:#d4d4d8 !important} html.vc-art article.rpt.vc-m > .gloss .gl-term .gl-refs{margin-bottom:14px !important} /* ไอเดีย 3 + ป้าย "ในสัญญาของคุณ" */ html.vc-art .gloss .gl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .gl-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:99px;font:500 12px/1 Prompt,Sarabun,sans-serif;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#c4c4ca} .gl-chip::before,.gl-chip::after{display:none !important} .gl-chip-c{color:#a5b4fc;border-color:rgba(165,180,252,.28);background:rgba(165,180,252,.08)} button.gl-chip-i{cursor:pointer;-webkit-tap-highlight-color:transparent;margin:0} .gl-chip-i.lv-check_detail{color:#fca5a5;border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)} .gl-chip-i.lv-caution{color:#fde68a;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)} /* ไอเดีย 2: ข้อความจริงในสัญญา */ html.vc-art .gloss .gl-mine{display:block;margin-top:12px !important;padding:12px 14px;border-radius:12px;background:rgba(165,180,252,.06);border:1px solid rgba(165,180,252,.18)} .gl-mine-l{margin:0 0 6px !important;font:500 12px/1.3 Prompt,Sarabun,sans-serif;color:#a5b4fc} .gl-mine blockquote{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;font:400 14px/1.7 Sarabun,Prompt,sans-serif;color:#d4d4d8} .gl-mine blockquote::before,.gl-mine blockquote::after{display:none !important} .gl-mine mark{background:rgba(165,180,252,.2);color:#e0e7ff;border-radius:4px;padding:0 3px} } /* ===== v211 (มือถือ): หน้าบัญชี — หัวชิ้นเดียว, ไม่มีที่ว่างท้าย, ซ่อนแถบเลื่อน, บัตร 3 มิติ, วงแหวนรูปโปรไฟล์, ไอคอนเมนูมีสี ===== */ .vc-wc-back,.vc-wc-glare,.vc-adm-badge{display:none} @media (max-width:767px){ /* บั้ก ก: หัวชีตกลืนกับตัวชีต ไม่ซ้อนขอบ */ body[data-sheet="acct"] #authCard{background:#0e0e11 !important;padding-top:0 !important} body[data-sheet="acct"] #authCard .sheet-head.vc-prof{background:transparent !important;border-radius:24px 24px 0 0 !important;margin:0 !important;box-shadow:none !important;padding-top:22px !important} body[data-sheet="acct"] #authCard .sheet-body{background:transparent !important} /* บั้ก ข: ไม่มีที่ว่างยาวท้ายชีต */ body[data-sheet="acct"] #authCard .sheet-body{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)) !important} body[data-sheet="acct"] #authMsg:empty{display:none !important} /* บั้ก ค: ซ่อนแถบเลื่อน */ body[data-sheet="acct"] #authCard .sheet-body{scrollbar-width:none} body[data-sheet="acct"] #authCard .sheet-body::-webkit-scrollbar{display:none} /* ไอเดีย 1: บัตรเครดิต 3 มิติ */ body[data-sheet="acct"] #authLoggedIn .cred-card{perspective:900px} body[data-sheet="acct"] #authLoggedIn .vc-wcard.vc-3d{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:flat;will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 2px 0 #26262c,0 4px 0 #1f1f24,0 6px 0 #18181c,0 22px 40px -18px rgba(0,0,0,.95) !important;transition:box-shadow .3s ease} body[data-sheet="acct"] #authLoggedIn .vc-wcard.vc-3d.is-tilt{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 0 #26262c,0 4px 0 #1f1f24,0 6px 0 #18181c,0 30px 50px -18px rgba(0,0,0,.95) !important} .vc-wc-glare{display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease; background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 55%);mix-blend-mode:normal} .vc-wcard.is-tilt .vc-wc-glare{opacity:1} body[data-sheet="acct"] #authLoggedIn .vc-wcard.vc-3d .vc-wc-num b{text-shadow:0 1px 0 rgba(255,255,255,.25),0 2px 0 rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.45)} /* พลิกบัตร */ body[data-sheet="acct"] #authLoggedIn .vc-wcard.vc-flip-out{transition:transform .2s ease-in !important;transform:rotateY(90deg) !important} body[data-sheet="acct"] #authLoggedIn .vc-wcard.vc-flip-in{animation:vcWcIn .23s ease-out} @keyframes vcWcIn{from{transform:rotateY(-90deg)}to{transform:rotateY(0)}} body[data-sheet="acct"] #authLoggedIn .vc-wcard.is-back > :not(.vc-wc-back):not(.vc-wc-glare){visibility:hidden} body[data-sheet="acct"] #authLoggedIn .vc-wcard.is-back .vc-wc-back{display:flex;flex-direction:column;position:absolute;inset:0;padding:18px;font-family:Prompt,Sarabun,sans-serif} .vc-wcb-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px !important;font:600 14px/1.2 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-wcb-h span{font:400 11.5px/1 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-wc-back dl{margin:0;display:flex;flex-direction:column;gap:0;flex:1 1 auto} .vc-wc-back dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.08)} .vc-wc-back dt{font:400 12.5px/1.3 Prompt,Sarabun,sans-serif;color:#a3a3aa;flex:0 0 auto} .vc-wc-back dd{margin:0;font:600 13px/1.3 Prompt,Sarabun,sans-serif;color:#ededef;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vc-wcb-n{margin:auto 0 0 !important;padding-top:8px;font:400 11.5px/1.4 Prompt,Sarabun,sans-serif;color:#8fcfb4} /* ไอเดีย 4: วงแหวนรูปโปรไฟล์ + ป้ายแอดมิน */ body[data-sheet="acct"] #authCard .sheet-head .acct-avatar{border:0 !important;box-shadow:0 0 0 2px #0e0e11,0 0 0 4px transparent !important} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar::before{content:"" !important;position:absolute !important;inset:-4px !important;border-radius:50% !important;z-index:-1;display:block !important; background:conic-gradient(from 210deg,var(--vc-acc,#34d399),#60a5fa,#a78bfa,var(--vc-acc,#34d399)) !important;opacity:.85;transform:none !important;width:auto !important;height:auto !important} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar{isolation:isolate} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar > span#acctInitial,body[data-sheet="acct"] #authCard .sheet-head .acct-avatar img{position:relative;z-index:1} body[data-sheet="acct"] #authCard .sheet-head .acct-avatar::after{content:"" !important;position:absolute !important;inset:0 !important;border-radius:50% !important;z-index:0;display:block !important; background:linear-gradient(145deg,color-mix(in srgb,var(--vc-acc,#94a3b8) 45%,#3a3a42),#24242a) !important;box-shadow:0 0 0 2px #0e0e11 !important;transform:none !important;width:auto !important;height:auto !important} body[data-sheet="acct"] #authCard .sheet-head .acct-cam{z-index:2} .vc-adm-badge:not([hidden]){display:inline-flex;align-items:center;order:3;margin-left:6px;padding:3px 8px;border-radius:99px;font:600 11px/1 Prompt,Sarabun,sans-serif !important; color:#bfdbfe;background:rgba(96,165,250,.14);border:1px solid rgba(96,165,250,.35)} /* ไอเดีย 5: ไอคอนเมนูมีสี */ body[data-sheet="acct"] #authLoggedIn .acct-menu .menu-item .vc-mi{--mc:#a1a1aa;color:var(--mc) !important;background:color-mix(in srgb,var(--mc) 14%,#16161a) !important;border:1px solid color-mix(in srgb,var(--mc) 30%,transparent) !important} body[data-sheet="acct"] #authLoggedIn #acctInfoBtn .vc-mi{--mc:#60a5fa} body[data-sheet="acct"] #authLoggedIn #dispBtn .vc-mi{--mc:#a78bfa} body[data-sheet="acct"] #authLoggedIn #privBtn .vc-mi{--mc:#34d399} body[data-sheet="acct"] #authLoggedIn #helpPrivacy .vc-mi{--mc:#2dd4bf} body[data-sheet="acct"] #authLoggedIn #helpTerms .vc-mi{--mc:#fbbf24} body[data-sheet="acct"] #authLoggedIn #helpContact .vc-mi{--mc:#f472b6} body[data-sheet="acct"] #authLoggedIn .vc-stat .vc-stat-ic{color:#fb923c !important;background:color-mix(in srgb,#fb923c 14%,#16161a) !important;border:1px solid color-mix(in srgb,#fb923c 30%,transparent) !important} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ body[data-sheet="acct"] #authLoggedIn .vc-wcard.vc-3d{transform:none !important} } /* ===== v212 (มือถือ): หน้าผลตรวจ — ตรา, จุดในแถบย่อ, ตัวเลขเด่น, เช็กลิสต์, การ์ดขั้นต่อไป, ปุ่มกลับขึ้นบน ===== */ .vc-mini-dots,.vc-stats,.vc-end,.vc-ck,.vc-miss-ask{display:none} @media (max-width:767px){ /* บั้ก ก: ตราย้ายไปมุมซ้ายล่างของโดนัท ไม่ชนข้อความ */ html.vc-art .vc-sum .vc-donut .vc-stamp{right:auto !important;left:-16px !important;bottom:-14px !important;width:46px !important;height:46px !important} html.vc-art .vc-sum .vc-sum-tx > p:last-child{text-wrap:wrap} /* ไอเดีย 1 + บั้ก ข: จุดความคืบหน้าแทนเส้นเทา */ .vc-mini .vc-mini-bar{display:none !important} .vc-mini .vc-mini-dots{display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-left:auto} .vc-mini-dots i{display:block;width:11px;height:11px;border-radius:50%;position:relative;border:1.5px solid var(--c,#8b8b94);background:transparent;transition:background .25s,transform .2s} .vc-mini-dots i::after{content:"";position:absolute;inset:-8px -3px} .vc-mini-dots i.lv-hi{--c:#f87171}.vc-mini-dots i.lv-mid{--c:#fbbf24}.vc-mini-dots i.lv-lo{--c:#8b8b94} .vc-mini-dots i.dn{background:#34d399;border-color:#34d399} .vc-mini-dots i.dn::before{content:"";position:absolute;left:3px;top:1px;width:3px;height:5px;border:solid #06281b;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)} .vc-mini-dots i:active{transform:scale(.85)} /* ไอเดีย 2: ตัวเลขเด่นในข้อมูลสัญญา */ html.vc-art article.rpt.vc-m .vc-brief .vc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:4px 0 12px} .vc-st{padding:12px 10px 10px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);min-width:0} .vc-st b{display:flex;align-items:baseline;gap:4px;font:700 21px/1.1 Prompt,Sarabun,sans-serif;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vc-st b small{font:500 12px/1 Prompt,Sarabun,sans-serif;color:#a3a3aa} .vc-st span{display:block;margin-top:5px;font:400 11.5px/1.35 Prompt,Sarabun,sans-serif;color:#8b8b94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vc-st:first-child{background:rgba(52,211,153,.07);border-color:rgba(52,211,153,.22)} .vc-st:first-child b{color:#a7f3d0} /* ไอเดีย 5: ตัวเลขในการ์ดประเด็น */ html.vc-art article.rpt.vc-m .ix-row .ix-tx > p b.vc-n{font-weight:600;color:#ededef} /* ไอเดีย 6: เช็กลิสต์สิ่งที่ยังไม่ระบุ */ html.vc-art article.rpt.vc-m section.miss ul{list-style:none !important;padding:0 !important;margin:10px 0 0 !important} html.vc-art article.rpt.vc-m section.miss li{display:flex !important;align-items:flex-start;gap:10px;padding:10px 0 !important;margin:0 !important;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;-webkit-tap-highlight-color:transparent;list-style:none !important;transition:color .2s} html.vc-art article.rpt.vc-m section.miss li::before,html.vc-art article.rpt.vc-m section.miss li::marker{display:none !important;content:none !important} html.vc-art article.rpt.vc-m section.miss li .vc-ck{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:6px;border:1.5px solid rgba(255,255,255,.28);transition:background .2s,border-color .2s} html.vc-art article.rpt.vc-m section.miss li.is-ck{color:#76767e} html.vc-art article.rpt.vc-m section.miss li.is-ck .vc-ck{background:#34d399;border-color:#34d399} html.vc-art article.rpt.vc-m section.miss li.is-ck .vc-ck::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #06281b;border-width:0 2px 2px 0;transform:rotate(45deg)} html.vc-art article.rpt.vc-m section.miss .vc-miss-more{display:flex !important;align-items:center;justify-content:center;width:100%;min-height:42px;margin:10px 0 0 !important;padding:0 !important;border-radius:12px !important; border:1px solid rgba(255,255,255,.12) !important;background:rgba(255,255,255,.04) !important;color:#d4d4d8 !important;font:500 13.5px/1 Prompt,Sarabun,sans-serif !important;text-decoration:none !important} html.vc-art article.rpt.vc-m section.miss .vc-miss-more::after{content:" ▾";margin-left:4px;position:static !important;display:inline !important;background:none !important;border:0 !important;width:auto;height:auto;transform:none !important} html.vc-art article.rpt.vc-m section.miss .vc-miss-more[aria-expanded="true"]::after{content:" ▴"} html.vc-art article.rpt.vc-m section.miss .vc-miss-ask{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin:10px 0 0;border-radius:12px;cursor:pointer; border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.1);color:#fde68a;font:600 14px/1 Prompt,Sarabun,sans-serif} html.vc-art article.rpt.vc-m section.miss .vc-miss-ask:disabled{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08);color:#a7f3d0;cursor:default} html.vc-art article.rpt.vc-m section.miss .vc-miss-ask:disabled svg{display:none} html.vc-art article.rpt.vc-m section.miss .vc-miss-ask.ok{background:#34d399;color:#06281b;border-color:#34d399} html.vc-art article.rpt.vc-m section.miss .vc-miss-ask::before,html.vc-art article.rpt.vc-m section.miss .vc-miss-ask::after{display:none !important} /* ไอเดีย 8 + บั้ก ง: การ์ดขั้นต่อไป */ html.vc-art article.rpt.vc-m > .vc-end{display:block;order:8;margin:16px 0 0;padding:18px 16px 16px;border-radius:18px;background:linear-gradient(160deg,rgba(52,211,153,.08),rgba(24,24,28,.92) 55%);border:1px solid rgba(52,211,153,.2);font-family:Prompt,Sarabun,sans-serif} .vc-end-k{margin:0 0 4px !important;font:500 12px/1 Prompt,Sarabun,sans-serif;color:#6ee7b7;letter-spacing:.02em} .vc-end-h{margin:0 0 12px !important;font:700 18px/1.35 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important;background:none !important} .vc-end-h::before,.vc-end-h::after{display:none !important} .vc-end-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 0 14px} .vc-end-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#34d399,#6ee7b7);transition:width .5s ease} .vc-end-g{display:flex;flex-direction:column;gap:8px} .vc-end-b{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border-radius:13px;cursor:pointer;text-align:left; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#ededef;font:600 14.5px/1.2 Prompt,Sarabun,sans-serif;-webkit-tap-highlight-color:transparent} .vc-end-b::before,.vc-end-b::after{display:none !important} .vc-end-b[hidden]{display:none} .vc-end-b.vc-end-send{background:#f4f4f5;color:#111;border-color:#f4f4f5} .vc-end-b.ok{background:#34d399 !important;color:#06281b !important;border-color:#34d399 !important} .vc-end-b:active{transform:scale(.985)} html.vc-art article.rpt.vc-m .vc-end > p.cc-note{margin:14px 0 0 !important;padding:12px 0 0 !important;border-top:1px solid rgba(255,255,255,.07) !important;font:400 12px/1.6 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important;text-align:left !important} html.vc-art article.rpt.vc-m .vc-end > p.cc-note + p.disclaimer{border-top:0 !important;padding-top:0 !important;margin-top:6px !important} html.vc-art article.rpt.vc-m .vc-end > p.disclaimer{margin:14px 0 0 !important;padding:12px 0 0 !important;border-top:1px solid rgba(255,255,255,.07) !important;font:400 12px/1.6 Prompt,Sarabun,sans-serif !important;color:#8b8b94 !important;text-align:left !important;background:none !important} html.vc-art article.rpt.vc-m > .vc-leg{order:7 !important} /* ไอเดีย 9 + บั้ก ค: ปุ่มกลับขึ้นบน เล็กลง วงแหวนระยะ โผล่เมื่อเลื่อนขึ้น */ html.vc-art .to-top{width:40px !important;height:40px !important;right:14px !important;bottom:calc(env(safe-area-inset-bottom,0px) + var(--nav-h,60px) + 14px) !important; background:radial-gradient(closest-side,rgba(24,24,28,.96) 82%,transparent 84%),conic-gradient(#6ee7b7 calc(var(--sp,0) * 1%),rgba(255,255,255,.14) 0) !important; border:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;transition:opacity .25s ease,transform .25s ease} html.vc-art.vc-tt-show .to-top{opacity:1;transform:none;pointer-events:auto} html.vc-art .to-top svg{width:18px !important;height:18px !important;flex-basis:18px} } /* ===== v213 (มือถือ) ===== */ .vc-map-tip,.vc-about,.vc-burst{display:none} @media (max-width:767px){ /* บั้ก ก: ตัวเลขในการ์ดเป็นตัวหนาในบรรทัด */ html.vc-art article.rpt.vc-m .ix-row .ix-tx > p .vc-n{display:inline !important;font:inherit !important;font-weight:600 !important;color:#ededef !important;margin:0 !important} /* บั้ก ข: รายการเช็กลิสต์ไม่แตกคอลัมน์ */ html.vc-art article.rpt.vc-m section.miss li .vc-ck-tx{flex:1 1 auto;min-width:0;display:block} html.vc-art article.rpt.vc-m section.miss li .vc-ck-tx .gl-tap{display:inline !important;padding:0 !important;margin:0 !important;font:inherit !important;width:auto !important} /* บั้ก ง: ฟอนต์หัวการ์ดขั้นต่อไป */ html.vc-art article.rpt.vc-m .vc-end .vc-end-h{font-family:Prompt,Sarabun,sans-serif !important;font-variant-numeric:normal !important;font-feature-settings:normal !important} /* บั้ก จ: ตราย้ายมุมซ้ายบนของโดนัท */ html.vc-art .vc-sum .vc-donut .vc-stamp{left:-12px !important;top:-10px !important;bottom:auto !important;right:auto !important;width:44px !important;height:44px !important} /* ไอเดีย 1: หัวเว็บหลบตอนเลื่อนลง */ html.vc-art .site-header{transition:transform .3s cubic-bezier(.2,.8,.3,1),background .35s ease,border-color .35s ease !important} html.vc-art.vc-hd-hide .site-header{transform:translateY(-110%) !important} html.vc-art.vc-hd-hide .vc-mini{top:6px !important;transition:top .3s cubic-bezier(.2,.8,.3,1),transform .35s cubic-bezier(.2,.9,.3,1),opacity .25s ease} html.vc-art.vc-hd-hide.vc-mini-on .vc-tabs{top:58px !important} html.vc-art.vc-hd-hide:not(.vc-mini-on) .vc-tabs{top:4px !important} html.vc-art .vc-mini{transition:top .3s cubic-bezier(.2,.8,.3,1),transform .35s cubic-bezier(.2,.9,.3,1),opacity .25s ease} html.vc-art .vc-tabs{transition:top .3s cubic-bezier(.2,.8,.3,1)} /* ไอเดีย 2: แตะช่องในแผนที่สัญญา */ html.vc-art .vc-sum .vc-map .vc-map-c:not(.is-hit){cursor:pointer;-webkit-tap-highlight-color:transparent} html.vc-art .vc-sum .vc-map .vc-map-c.is-sel{border-color:rgba(255,255,255,.45) !important;background:rgba(255,255,255,.09) !important} html.vc-art .vc-sum .vc-map .vc-map-c.is-sel i{color:#ededef !important} html.vc-art .vc-sum .vc-map .vc-map-tip:not([hidden]){display:block;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); font:400 13.5px/1.6 Sarabun,Prompt,sans-serif;color:#d4d4d8;animation:vcFadeIn .2s ease both} .vc-map-tip b{font:600 13px/1 Prompt,Sarabun,sans-serif;color:#f4f4f5;margin-right:6px} .vc-map-tip small{display:block;margin-top:5px;font:400 11.5px/1.4 Prompt,Sarabun,sans-serif;color:#76767e} /* ไอเดีย 3: ไอคอนหมวดบนการ์ด */ html.vc-art article.rpt.vc-m .ix-row .vc-no.vc-topic{display:inline-flex !important;align-items:center;gap:5px;max-width:60%;overflow:hidden} html.vc-art article.rpt.vc-m .ix-row .vc-no.vc-topic svg{flex:0 0 13px;opacity:.9} html.vc-art article.rpt.vc-m .ix-row .vc-no.vc-topic span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ไอเดีย 7: การ์ดเกี่ยวกับผลนี้ */ html.vc-art article.rpt.vc-m > .vc-about{display:block;order:7;margin:16px 0 0;padding:16px;border-radius:18px;background:rgba(24,24,28,.92);border:1px solid rgba(255,255,255,.08);font-family:Prompt,Sarabun,sans-serif} html.vc-art article.rpt.vc-m #commandCenter.vc-cc-empty{display:none !important} .vc-ab-h{display:flex;align-items:center;gap:12px;margin-bottom:14px} .vc-ab-ic{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;color:#6ee7b7;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25)} .vc-ab-h h3{margin:0 !important;font:700 16px/1.3 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important;background:none !important} .vc-ab-h h3::before,.vc-ab-h h3::after{display:none !important} .vc-ab-h p{margin:2px 0 0 !important;font:400 12.5px/1.4 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-ab-m{display:flex;flex-direction:column;gap:12px} .vc-ab-rt{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font:400 13px/1.3 Prompt,Sarabun,sans-serif;color:#c4c4ca} .vc-ab-rt b{font-weight:600;color:#ededef;white-space:nowrap} .vc-ab-b{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden} .vc-ab-b i{display:block;height:100%;border-radius:inherit;background:#6ee7b7;transition:width .6s ease} .vc-ab-r.t-mid .vc-ab-b i{background:#fbbf24} .vc-ab-r.t-lo .vc-ab-b i{background:#8b8b94} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f{margin-top:14px;border-top:1px solid rgba(255,255,255,.07)} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details{margin:0 !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.07) !important;border-radius:0 !important;background:none !important;padding:0 !important;box-shadow:none !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details:last-child{border-bottom:0 !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details > summary{padding:13px 0 !important;background:none !important;border:0 !important;min-height:0 !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f .cb-src-ico{display:none !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f .cb-src-tx b{font:600 14px/1.3 Prompt,Sarabun,sans-serif !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f .cb-src-tx small{font-size:12px !important} /* ไอเดีย 6: การ์ดโผล่ทีละใบ + เลขลอย */ html.vc-art article.rpt.vc-m .ix-row.vc-rv{opacity:0;transform:translateY(18px);transition:opacity .45s ease var(--rd,0ms),transform .5s cubic-bezier(.2,.8,.3,1) var(--rd,0ms)} html.vc-art article.rpt.vc-m .ix-row.vc-rv.vc-in{opacity:1;transform:none} html.vc-art article.rpt.vc-m3 .ix-row[data-wm]:not(.vc-swiping):not(.vc-sw-back)::after{translate:0 var(--py,0px)} /* ไอเดีย 8: ฉลองตอนอ่านแล้ว */ .vc-mini-dots i.pop{animation:vcDotPop .6s cubic-bezier(.2,1.6,.4,1)} .vc-mini-dots i.pop::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #34d399;animation:vcRing .6s ease-out forwards} @keyframes vcDotPop{0%{transform:scale(.6)}60%{transform:scale(1.5)}100%{transform:scale(1)}} @keyframes vcRing{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2.4)}} html.vc-art .bump{display:inline-block;animation:vcBump .5s cubic-bezier(.2,1.6,.4,1)} @keyframes vcBump{40%{transform:scale(1.18);color:#6ee7b7}} html.vc-art article.rpt.vc-m .ix-row .vc-burst{display:block;position:absolute;right:30px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(52,211,153,.55),transparent 65%);animation:vcBurst .7s ease-out forwards} @keyframes vcBurst{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2.6)}} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ html.vc-art article.rpt.vc-m .ix-row.vc-rv{opacity:1;transform:none} } @media (max-width:767px){ html.vc-art .vc-end-h.bump{display:block} } /* ===== v214 (มือถือ) ===== */ .vc-fpill,.vc-peek,.vc-swl,.vc-star-ic,.vc-bn-ind,.vc-bn-badge{display:none} @media (max-width:767px){ /* บั้ก ข: ตราเล็กข้างหัวข้อ */ html.vc-art .vc-sum .vc-sum-tx{position:relative} html.vc-art .vc-sum .vc-sum-tx .vc-stamp{top:-14px !important;right:-6px !important;left:auto !important;bottom:auto !important;width:50px !important;height:50px !important} html.vc-art .vc-sum .vc-sum-tx:has(.vc-stamp) h3{padding-right:48px} /* บั้ก ค: แถวในการ์ดเกี่ยวกับผลนี้หน้าตาเดียวกัน */ html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details > summary{display:flex !important;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer; font:600 14px/1.3 Prompt,Sarabun,sans-serif !important;color:#f4f4f5 !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details > summary::-webkit-details-marker{display:none} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details > summary::before{display:none !important;content:none !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details > summary::after{content:"›" !important;position:static !important;display:block !important;transform:none !important;font:400 20px/1 Prompt,sans-serif !important;color:#8b8b94 !important;transition:transform .2s ease;background:none !important;border:0 !important;width:auto !important;height:auto !important;margin:0 !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f > details[open] > summary::after{transform:rotate(90deg) !important} html.vc-art article.rpt.vc-m .vc-about .vc-ab-f .cb-src-go{display:none !important} /* บั้ก ง */ .vc-ab-note p{margin:2px 0 0 !important;font:400 12.5px/1.55 Prompt,Sarabun,sans-serif;color:#8b8b94} /* ไอเดีย 6: พื้นการ์ดสรุปตามระดับเสี่ยง */ html.vc-art .vc-sum.lv-hi{background:radial-gradient(120% 70% at 0% 0%,rgba(248,113,113,.11),transparent 60%),rgba(24,24,28,.92) !important} html.vc-art .vc-sum.lv-mid{background:radial-gradient(120% 70% at 0% 0%,rgba(251,191,36,.10),transparent 60%),rgba(24,24,28,.92) !important} html.vc-art .vc-sum.lv-lo{background:radial-gradient(120% 70% at 0% 0%,rgba(52,211,153,.10),transparent 60%),rgba(24,24,28,.92) !important} /* ไอเดีย 1: ติดดาว */ html.vc-art article.rpt.vc-m .ix-row{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} html.vc-art article.rpt.vc-m .ix-row .vc-swl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:absolute;right:0;top:0;bottom:0;width:110px;pointer-events:none; color:#fde68a;opacity:var(--swl,0);border-radius:0 inherit inherit 0;background:linear-gradient(270deg,rgba(251,191,36,.22),transparent);font:600 12px/1 Prompt,Sarabun,sans-serif} html.vc-art article.rpt.vc-m .ix-row:not(.vc-swiping-l) .vc-swl{opacity:0} .vc-swl svg{width:22px;height:22px} .vc-swl em{font-style:normal} html.vc-art article.rpt.vc-m .ix-row .vc-star-ic{display:none} html.vc-art article.rpt.vc-m .ix-row.vc-star .vc-star-ic{display:inline-grid;place-items:center;margin-left:6px;color:#fbbf24} html.vc-art article.rpt.vc-m .ix-row.vc-star .vc-star-ic svg{width:15px;height:15px;fill:#fbbf24} html.vc-art article.rpt.vc-m .ix-row.vc-star{box-shadow:inset 0 0 0 1px rgba(251,191,36,.35) !important} html.vc-art article.rpt.vc-m .ix-row.vc-star-pop .vc-star-ic{animation:vcDotPop .55s cubic-bezier(.2,1.6,.4,1)} .vc-fix-act .vc-fa-star{flex:0 0 44px !important;width:44px;padding:0 !important;color:#fde68a !important;border-color:rgba(251,191,36,.3) !important;background:rgba(251,191,36,.08) !important} .vc-fix-act .vc-fa-star svg{width:18px;height:18px} .vc-fix-act .vc-fa-star.on{background:rgba(251,191,36,.2) !important;border-color:#fbbf24 !important} .vc-fix-act .vc-fa-star.on svg{fill:#fbbf24} .vc-end-b.vc-end-star{background:rgba(251,191,36,.14) !important;border-color:rgba(251,191,36,.45) !important;color:#fde68a !important} .vc-end-b.vc-end-star svg{fill:#fbbf24} .vc-end.has-star .vc-end-send{background:rgba(255,255,255,.04) !important;color:#ededef !important;border-color:rgba(255,255,255,.12) !important} /* ไอเดีย 3: ปุ่มลอยตอนอ่านครบ */ .vc-fpill{display:flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + var(--nav-h,60px) + 14px);z-index:44;transform:translate(-50%,20px);opacity:0;pointer-events:none; max-width:calc(100% - 32px);min-height:48px;padding:0 20px;border-radius:99px;border:0;background:#f4f4f5;color:#111;font:600 14.5px/1.2 Prompt,Sarabun,sans-serif;white-space:nowrap; box-shadow:0 12px 30px -8px rgba(0,0,0,.7),0 0 0 6px rgba(52,211,153,.12);transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .25s ease;-webkit-tap-highlight-color:transparent} .vc-fpill::before,.vc-fpill::after{display:none !important} .vc-fpill span{overflow:hidden;text-overflow:ellipsis} .vc-fpill i{font-style:normal;font-size:17px} .vc-fpill.ok{background:#34d399} html.vc-fpill-on .vc-fpill{transform:translate(-50%,0);opacity:1;pointer-events:auto} html.vc-fpill-on.vc-art .to-top{opacity:0 !important;pointer-events:none !important} /* ไอเดีย 7: เมนูล่าง */ .bottom-nav .vc-bn-ind{display:block;position:absolute;top:6px;left:0;width:calc(100% / var(--n,3));height:calc(100% - 12px - env(safe-area-inset-bottom,0px));pointer-events:none; transform:translateX(var(--x,0%));transition:transform .35s cubic-bezier(.2,.9,.3,1);z-index:0} .bottom-nav .vc-bn-ind::before{content:"";position:absolute;inset:0 18%;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)} .bottom-nav .bn-item{position:relative;z-index:1} .bottom-nav .bn-item .vc-bn-badge:not([hidden]){display:grid;place-items:center;position:absolute;top:4px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:99px; background:#f87171;color:#fff;font:700 11px/1 Prompt,Sarabun,sans-serif;box-shadow:0 0 0 2px #0e0e11} /* ไอเดีย 8: ผลตอบกลับปุ่มหัวการ์ด */ html.vc-art .vc-sum .vc-sum-hd .share-bar button{position:relative !important;overflow:visible !important} html.vc-art .vc-sum .vc-sum-hd .share-bar button.vc-done-ok{background:rgba(52,211,153,.18) !important;border-color:#34d399 !important;color:#6ee7b7 !important} html.vc-art .vc-sum .vc-sum-hd .share-bar button.vc-done-ok svg{animation:vcDotPop .45s cubic-bezier(.2,1.6,.4,1)} html.vc-art .vc-sum .vc-sum-hd .share-bar button.vc-done-ok::after{content:attr(data-tip) !important;display:block !important;position:absolute !important;top:calc(100% + 6px) !important;right:0 !important;left:auto !important;width:auto !important;height:auto !important; padding:5px 9px !important;border-radius:8px !important;background:#34d399 !important;color:#06281b !important;font:600 11.5px/1 Prompt,Sarabun,sans-serif !important;white-space:nowrap;z-index:5;transform:none !important;border:0 !important;animation:vcFadeIn .2s ease both} /* ไอเดีย 2: แตะค้างดูข้อขอแก้ */ .vc-peek{display:block;position:fixed;z-index:9000;padding:14px 16px;border-radius:16px;background:#1d1d22;border:1px solid rgba(110,231,183,.35);box-shadow:0 20px 50px -10px rgba(0,0,0,.9); font-family:Prompt,Sarabun,sans-serif;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.3,1);pointer-events:none} .vc-peek.up{transform:translateY(-8px) scale(.97)} .vc-peek.on{opacity:1;transform:none} .vc-peek-k{margin:0 0 6px !important;font:600 12.5px/1.2 Prompt,Sarabun,sans-serif;color:#6ee7b7} .vc-peek-t{margin:0 !important;font:400 14.5px/1.65 Sarabun,Prompt,sans-serif;color:#ededef} .vc-peek small{display:block;margin-top:8px;font:400 11px/1.3 Prompt,Sarabun,sans-serif;color:#76767e} } @media (max-width:767px){ html.vc-art article.rpt.vc-m .ix-row.vc-swiping-l.vc-sw-go{border-color:rgba(251,191,36,.6) !important} html.vc-art article.rpt.vc-m .ix-row.vc-swiping-l .vc-sw{opacity:0 !important} } @media (max-width:767px){ html.vc-art article.rpt.vc-m3 .ix-row.vc-swiping-l{background:linear-gradient(270deg,rgba(251,191,36,calc(var(--swl,0) * .3)),rgba(251,191,36,calc(var(--swl,0) * .06)) 45%,rgba(24,24,28,.92) 75%) !important} html.vc-art article.rpt.vc-m3 .ix-row.vc-swiping-l::after{opacity:0 !important} } /* ===== v215 (มือถือ) ===== */ .vc-neg,.vc-coach,.vc-rail2,.vc-diff,.vc-fu-mine{display:none} @media (max-width:767px){ /* บั้ก ข: ปุ่มลอยปิดได้ + หลบตอนเลื่อนลง */ .vc-fpill{display:flex;align-items:center;gap:0;padding:0 !important;overflow:hidden} .vc-fpill .vc-fp-go{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 20px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;min-width:0} .vc-fpill .vc-fp-go span{overflow:hidden;text-overflow:ellipsis} .vc-fpill .vc-fp-go i{font-style:normal;font-size:17px} .vc-fpill .vc-fp-x{flex:0 0 44px;width:44px;min-height:48px;border:0;border-left:1px solid rgba(0,0,0,.1);background:none;color:#555;font:400 22px/1 Prompt,sans-serif;cursor:pointer} .vc-fpill .vc-fp-go::before,.vc-fpill .vc-fp-go::after,.vc-fpill .vc-fp-x::before,.vc-fpill .vc-fp-x::after{display:none !important} html.vc-fpill-on.vc-fp-dn .vc-fpill{transform:translate(-50%,90px) !important;opacity:0 !important;pointer-events:none !important} /* ไอเดีย 1: หน้าร่างข้อความต่อรอง */ .vc-neg{display:flex;align-items:flex-end;position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s ease} .vc-neg.on{opacity:1;pointer-events:auto} .vc-ng-card{display:flex;flex-direction:column;width:100%;height:92vh;height:92dvh;background:#121215;border-radius:24px 24px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:0; transform:translateY(30px);transition:transform .35s cubic-bezier(.2,.9,.3,1);font-family:Prompt,Sarabun,sans-serif;color:#ededef} .vc-neg.on .vc-ng-card{transform:none} .vc-ng-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 18px 12px;border-bottom:1px solid rgba(255,255,255,.07)} .vc-ng-hd b{display:block;font:700 18px/1.3 Prompt,Sarabun,sans-serif} .vc-ng-hd small{display:block;margin-top:3px;font:400 12.5px/1.4 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-ng-x{flex:0 0 38px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#d4d4d8;font:400 22px/1 Prompt,sans-serif;cursor:pointer} .vc-ng-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 18px;overscroll-behavior:contain} .vc-ng-row{display:flex;gap:8px;flex-wrap:wrap} .vc-ng-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)} .vc-ng-seg button{border:0;background:none;color:#a3a3aa;font:500 13.5px/1 Prompt,Sarabun,sans-serif;padding:9px 12px;border-radius:9px;cursor:pointer} .vc-ng-seg button.on{background:#f4f4f5;color:#111;font-weight:600} .vc-ng-seg button::before,.vc-ng-seg button::after{display:none !important} .vc-ng-l{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px !important;font:600 13.5px/1.3 Prompt,Sarabun,sans-serif;color:#c4c4ca} .vc-ng-n{font-weight:400;color:#8b8b94;font-size:12.5px} .vc-ng-re{border:0;background:none;color:#6ee7b7;font:500 12.5px/1 Prompt,Sarabun,sans-serif;padding:4px 0;cursor:pointer;visibility:hidden} .vc-neg.is-edited .vc-ng-re{visibility:visible} .vc-ng-list{display:flex;flex-direction:column;gap:6px} .vc-ng-sub{margin:10px 0 2px !important;font:500 12px/1 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-ng-it{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);cursor:pointer;-webkit-tap-highlight-color:transparent} .vc-ng-it input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .vc-ng-ck{flex:0 0 20px;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:background .15s,border-color .15s} .vc-ng-it input:checked + .vc-ng-ck{background:#34d399;border-color:#34d399} .vc-ng-it input:checked + .vc-ng-ck::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #06281b;border-width:0 2px 2px 0;transform:rotate(45deg)} .vc-ng-it.lv-hi{border-left:3px solid #f87171}.vc-ng-it.lv-mid{border-left:3px solid #fbbf24}.vc-ng-it.lv-lo{border-left:3px solid #8b8b94}.vc-ng-it.lv-ms{border-left:3px solid #a5b4fc} .vc-ng-tx{min-width:0} .vc-ng-tx b{display:block;font:600 14px/1.4 Prompt,Sarabun,sans-serif;color:#ededef} .vc-ng-tx small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font:400 12.5px/1.5 Sarabun,Prompt,sans-serif;color:#8b8b94} .vc-ng-body textarea{width:100%;box-sizing:border-box;min-height:220px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#0b0b0d;color:#ededef;font:400 16px/1.65 Sarabun,Prompt,sans-serif;resize:vertical} .vc-ng-ft{display:flex;gap:8px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.07);background:#121215} .vc-ng-ft button{flex:1 1 0;min-height:50px;border-radius:14px;font:600 15px/1 Prompt,Sarabun,sans-serif;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#ededef} .vc-ng-ft .vc-ng-send{background:#f4f4f5;color:#111;border-color:#f4f4f5} .vc-ng-ft .vc-ng-send:disabled{opacity:.4} .vc-ng-ft button.ok{background:#34d399 !important;color:#06281b !important;border-color:#34d399 !important} .vc-ng-ft button::before,.vc-ng-ft button::after{display:none !important} /* ไอเดีย 3: แนะนำท่าทางครั้งแรก */ .vc-coach{display:block;position:fixed;inset:0;z-index:9400;opacity:0;transition:opacity .25s ease} .vc-coach.on{opacity:1}.vc-coach.out{opacity:0} .vc-co-hole{position:fixed;border-radius:20px;box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 0 2px rgba(110,231,183,.7);transition:all .35s cubic-bezier(.2,.9,.3,1);pointer-events:none} .vc-co-tip{position:fixed;left:16px;right:16px;padding:16px;border-radius:18px;background:#1b1b20;border:1px solid rgba(110,231,183,.3);box-shadow:0 20px 50px -10px rgba(0,0,0,.9);font-family:Prompt,Sarabun,sans-serif;transition:top .35s ease,bottom .35s ease} .vc-co-k{margin:0 0 4px !important;font:500 12px/1 Prompt,Sarabun,sans-serif;color:#6ee7b7} .vc-co-tip b{display:block;font:700 17px/1.3 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-co-d{margin:6px 0 0 !important;font:400 14px/1.6 Sarabun,Prompt,sans-serif;color:#c4c4ca} .vc-co-ft{display:flex;justify-content:space-between;align-items:center;margin-top:14px} .vc-co-ft button{border:0;cursor:pointer;font:600 14px/1 Prompt,Sarabun,sans-serif;border-radius:12px} .vc-co-skip{background:none;color:#8b8b94;padding:10px 4px} .vc-co-next{background:#34d399;color:#06281b;padding:12px 18px} .vc-co-ft button::before,.vc-co-ft button::after{display:none !important} /* ไอเดีย 4: คำถามแนะนำจากสัญญา */ html.vc-art article.rpt.vc-m #fuBox .vc-fu-mine{display:block} .vc-fu-l{margin:12px 0 8px !important;font:600 12.5px/1 Prompt,Sarabun,sans-serif;color:#8b8b94} html.vc-art article.rpt.vc-m #fuBox .vc-fu-mine .fu-chip.vc-fu-c{border-color:rgba(110,231,183,.35) !important;background:rgba(52,211,153,.08) !important;color:#a7f3d0 !important;text-align:left;white-space:normal;line-height:1.45} /* ไอเดีย 5: แผนที่ด้านข้าง */ .vc-rail2{display:flex;flex-direction:column;gap:6px;position:fixed;right:2px;top:50%;transform:translate(14px,-50%);z-index:30;padding:8px 5px;border-radius:99px;background:rgba(18,18,21,.82);border:1px solid rgba(255,255,255,.08);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s ease} html.vc-rail2-on:not(.vc-fpill-on) .vc-rail2{opacity:1;transform:translate(0,-50%);pointer-events:auto} .vc-rail2 i{display:block;width:4px;height:16px;border-radius:99px;background:var(--c,#8b8b94);opacity:.55;position:relative;cursor:pointer;transition:height .2s,opacity .2s,width .2s} .vc-rail2 i::after{content:"";position:absolute;inset:-4px -10px} .vc-rail2 i.lv-hi{--c:#f87171}.vc-rail2 i.lv-mid{--c:#fbbf24}.vc-rail2 i.lv-lo{--c:#8b8b94} .vc-rail2 i.dn{--c:#34d399} .vc-rail2 i.st{box-shadow:0 0 0 1.5px #fbbf24} .vc-rail2 i.cur{opacity:1;height:28px;width:6px} /* ไอเดีย 7: การ์ดความสำเร็จ */ .vc-ach .vc-ach-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px;width:100%} .vc-ach .vc-ach-st div{padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} .vc-ach .vc-ach-st strong{display:block;font:700 22px/1.1 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-ach .vc-ach-st div:nth-child(2) strong{color:#fbbf24} .vc-ach .vc-ach-st span{display:block;margin-top:4px;font:400 11.5px/1.3 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-ach .vc-ach-go{width:100%;min-height:50px;margin-top:12px;border:0;border-radius:14px;background:#34d399;color:#06281b;font:600 15px/1 Prompt,Sarabun,sans-serif;cursor:pointer} .vc-ach .vc-ach-later{width:100%;min-height:42px;margin-top:6px;border:0;background:none;color:#8b8b94;font:500 14px/1 Prompt,Sarabun,sans-serif;cursor:pointer} .vc-ach .vc-ach-go::before,.vc-ach .vc-ach-go::after,.vc-ach .vc-ach-later::before,.vc-ach .vc-ach-later::after{display:none !important} /* ไอเดีย 2: เทียบกับการตรวจครั้งก่อน */ html.vc-art article.rpt.vc-m > .vc-diff{display:block;order:3;margin:16px 0 0;padding:16px;border-radius:18px;background:linear-gradient(160deg,rgba(96,165,250,.08),rgba(24,24,28,.92) 55%);border:1px solid rgba(96,165,250,.22);font-family:Prompt,Sarabun,sans-serif} .vc-df-h{display:flex;align-items:center;gap:12px} .vc-df-ic{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;color:#93c5fd;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.3)} .vc-df-h b{display:block;font:700 15.5px/1.3 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-df-h small{display:block;font:400 12px/1.4 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-df-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0} .vc-df-st div{padding:10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);text-align:center} .vc-df-st strong{display:block;font:700 22px/1.1 Prompt,Sarabun,sans-serif} .vc-df-st span{display:block;margin-top:3px;font:400 12px/1 Prompt,Sarabun,sans-serif;color:#a3a3aa} .vc-df-st .t-ok strong{color:#6ee7b7}.vc-df-st .t-mid strong{color:#fde68a}.vc-df-st .t-new strong{color:#fca5a5} .vc-df-l{list-style:none;margin:12px 0 0 !important;padding:0 !important} .vc-df-l li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font:400 13.5px/1.5 Sarabun,Prompt,sans-serif;color:#a3a3aa} .vc-df-l li::before,.vc-df-l li::marker{display:none;content:none} .vc-df-l i{font-style:normal;color:#34d399;font-weight:700} .vc-df-l s{text-decoration-color:rgba(255,255,255,.35)} .vc-df-n{margin:10px 0 0 !important;font:400 11.5px/1.4 Prompt,Sarabun,sans-serif;color:#76767e} html.vc-art article.rpt.vc-m .ix-row .vc-new{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:99px;background:rgba(248,113,113,.16);color:#fca5a5;font:600 11px/1.2 Prompt,Sarabun,sans-serif} } /* ===== v216 (มือถือ) ===== */ .vc-reader{display:none} @media (max-width:767px){ /* บั้ก ก: ประเภทที่ระบบเดา → ลิงก์เล็ก ไม่ซ้ำชิป */ html.vc-art .vc-sum .vc-sum-hd .vc-sum-meta .vc-type{display:none !important} html.vc-art .vc-sum .vc-sum-hd .vc-sum-meta .vc-type-chg{border:0 !important;background:none !important;padding:0 !important;min-height:0 !important;font:500 13px/1.3 Prompt,Sarabun,sans-serif !important;color:#a3a3aa !important;text-decoration:none !important} html.vc-art .vc-sum .vc-sum-hd .vc-sum-meta .vc-type-chg::before{content:"ประเภทที่ระบบเดา · " !important;position:static !important;display:inline !important;background:none !important;border:0 !important;width:auto !important;height:auto !important;color:#76767e} html.vc-art .vc-sum .vc-sum-hd .vc-sum-meta .vc-type-chg::after{content:" ›" !important;position:static !important;display:inline !important;background:none !important;border:0 !important;width:auto !important;height:auto !important;color:#6ee7b7} html.vc-art .vc-sum .vc-sum-hd .vc-sum-meta .vc-type-chg{color:#6ee7b7 !important} /* บั้ก ค: ปุ่มดูอีก N ข้อ ซ่อนรายการได้จริง */ html.vc-art article.rpt.vc-m section.miss.vc-fold:not(.vc-open) li:nth-child(n+3){display:none !important} /* บั้ก ง: ลูกศรขึ้นบนอยู่ในแถบขวา แทนปุ่มวงกลม */ html.vc-rail2-on.vc-art .to-top{opacity:0 !important;pointer-events:none !important} .vc-rail2 .vc-rail-up{display:grid;place-items:center;width:22px;height:22px;margin:4px -4px 0;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#d4d4d8;cursor:pointer} .vc-rail2 .vc-rail-up::before,.vc-rail2 .vc-rail-up::after{display:none !important} .vc-rail2{align-items:center} /* ไอเดีย 1: อ่านสัญญาฉบับเต็ม */ .vc-reader{display:flex;align-items:flex-end;position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s ease} .vc-reader.on{opacity:1;pointer-events:auto} .vc-rd-card{display:flex;flex-direction:column;width:100%;height:94vh;height:94dvh;background:#121215;border-radius:24px 24px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:0;transform:translateY(30px);transition:transform .35s cubic-bezier(.2,.9,.3,1);font-family:Prompt,Sarabun,sans-serif} .vc-reader.on .vc-rd-card{transform:none} .vc-rd-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 18px 10px} .vc-rd-hd b{display:block;font:700 18px/1.3 Prompt,Sarabun,sans-serif;color:#f4f4f5} .vc-rd-hd small{display:block;margin-top:3px;font:400 12.5px/1.4 Prompt,Sarabun,sans-serif;color:#8b8b94} .vc-rd-x{flex:0 0 38px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#d4d4d8;font:400 22px/1 Prompt,sans-serif;cursor:pointer} .vc-rd-leg{display:flex;gap:14px;padding:0 18px 12px;border-bottom:1px solid rgba(255,255,255,.07);font:400 12px/1 Prompt,Sarabun,sans-serif;color:#a3a3aa} .vc-rd-leg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)} .vc-rd-leg .lv-hi{--c:rgba(248,113,113,.55)}.vc-rd-leg .lv-mid{--c:rgba(251,191,36,.5)}.vc-rd-leg .lv-lo{--c:rgba(161,161,170,.45)} .vc-rd-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 18px calc(28px + env(safe-area-inset-bottom,0px))} .vc-rd-body p{position:relative;margin:0 0 4px !important;padding:2px 0 2px 14px;font:400 16px/1.85 Sarabun,Prompt,sans-serif;color:#d4d4d8;border-radius:8px;transition:background .4s} .vc-rd-body p[data-n]{margin-top:10px !important;font-weight:500;color:#ededef} .vc-rd-body p.has::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--c,#8b8b94)} .vc-rd-body p.lv-hi{--c:#f87171}.vc-rd-body p.lv-mid{--c:#fbbf24}.vc-rd-body p.lv-lo{--c:#8b8b94} .vc-rd-body p.is-go{background:rgba(110,231,183,.1)} .vc-rd-body .vc-rd-gap{height:6px;padding:0} .vc-rd-body mark{color:#fff;border-radius:4px;padding:1px 2px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone} .vc-rd-body mark.lv-hi{background:rgba(248,113,113,.28);box-shadow:inset 0 -2px 0 #f87171} .vc-rd-body mark.lv-mid{background:rgba(251,191,36,.22);box-shadow:inset 0 -2px 0 #fbbf24} .vc-rd-body mark.lv-lo{background:rgba(161,161,170,.2);box-shadow:inset 0 -2px 0 #a1a1aa} .vc-rd-body mark sup{margin-left:3px;font:700 10px/1 Prompt,sans-serif;opacity:.8} .vc-rd-empty{color:#8b8b94} .vc-map-tip-go{display:block;margin-top:8px;padding:0;border:0;background:none;color:#6ee7b7;font:500 13px/1.3 Prompt,Sarabun,sans-serif;cursor:pointer} .vc-map-tip-go::before,.vc-map-tip-go::after{display:none !important} /* ไอเดีย 2: การ์ดกระชับ */ html.vc-art article.rpt.vc-m3 .ix-row{padding:14px 14px 14px 18px !important;margin-bottom:8px !important;min-height:0 !important} html.vc-art article.rpt.vc-m .ix-row .ix-tx > b{font-size:16px !important;line-height:1.35 !important;margin:6px 0 4px !important} html.vc-art article.rpt.vc-m .ix-row .ix-tx > p{font-size:14px !important;line-height:1.55 !important;margin:0 !important} html.vc-art article.rpt.vc-m .ix-row .ix-tx > small{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-right:40px} html.vc-art article.rpt.vc-m .ix-row .ix-clause.vc-chip{display:inline-flex !important;align-items:center;gap:4px;margin:0 !important;padding:3px 8px !important;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font:500 11.5px/1.2 Prompt,Sarabun,sans-serif !important;color:#c4c4ca !important;cursor:pointer} html.vc-art article.rpt.vc-m .ix-row .ix-clause.vc-chip svg{width:12px !important;height:12px !important} html.vc-art article.rpt.vc-m3 .ix-row[data-wm]:not(.vc-swiping):not(.vc-sw-back)::after{font-size:52px !important;top:4px !important} html.vc-art article.rpt.vc-m .ix-row .ix-arrow{width:36px !important;height:36px !important} /* ไอเดีย 4: ลดสีให้สงบลง */ html.vc-art article.rpt.vc-m3 .ix-row.lv-check_detail,html.vc-art article.rpt.vc-m3 .ix-row.lv-caution{box-shadow:none !important} html.vc-art article.rpt.vc-m3 .ix-row::before{top:18px !important;bottom:18px !important;opacity:.9} html.vc-art .vc-pill.lv-check_detail,html.vc-art .vc-pill.lv-caution,html.vc-art .vc-pill.lv-low{background:transparent !important;padding-left:0 !important;padding-right:0 !important;border:0 !important;font-weight:600 !important} html.vc-art article.rpt.vc-m .ix-row .vc-pill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:currentColor;vertical-align:1px} html.vc-art article.rpt.vc-m .vc-topic{color:#8b8b94 !important} .bottom-nav .bn-item .vc-bn-badge:not([hidden]){background:#3f3f46 !important;color:#f4f4f5 !important} html.vc-art .vc-sum .vc-cta{background:rgba(255,255,255,.05) !important;border-color:rgba(248,113,113,.35) !important} html.vc-art .vc-sum .vc-cta.lv-mid{border-color:rgba(251,191,36,.35) !important} html.vc-art .vc-sum .vc-cta.lv-ok{background:rgba(52,211,153,.08) !important;border-color:rgba(52,211,153,.3) !important} html.vc-art .vc-sum .vc-map .vc-map-c.is-hit{background:color-mix(in srgb,var(--c) 12%,#1c1c20) !important;border-color:color-mix(in srgb,var(--c) 40%,transparent) !important} /* ไอเดีย 3: เปลี่ยนแท็บแบบเลื่อน */ html.vc-art article.rpt.vc-tab-in-r > :not(.vc-sum):not(.vc-tabs):not(.rpt-head):not(details.item){animation:vcTabR .34s cubic-bezier(.2,.8,.3,1) both} html.vc-art article.rpt.vc-tab-in-l > :not(.vc-sum):not(.vc-tabs):not(.rpt-head):not(details.item){animation:vcTabL .34s cubic-bezier(.2,.8,.3,1) both} @keyframes vcTabR{from{opacity:0;transform:translateX(28px)}} @keyframes vcTabL{from{opacity:0;transform:translateX(-28px)}} } /* ===== v217 คลังสัญญาตัวอย่างแบบฟรี (v221: ใช้ทั้งมือถือและคอม) ===== */ .vsl-hero,.vsl-free,.vsl-dots,.vsl-fill,.vc-demo-note{display:none} @media all{ .vsl-hero{display:flex;align-items:center;gap:12px;flex:none;margin:14px 0 2px;padding:12px 14px;border-radius:16px; background:linear-gradient(120deg,rgba(52,211,153,.18),rgba(34,211,238,.1) 60%,rgba(167,139,250,.12));border:1px solid rgba(52,211,153,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);position:relative;overflow:hidden} .vsl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(-100%);animation:vslShine 3.6s ease-in-out 1s infinite} .vsl-hero-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#34d399;box-shadow:0 6px 18px -6px rgba(52,211,153,.8)} .vsl-hero-ic svg{width:20px;height:20px;fill:#062d1f} .vsl-hero b{display:block;font:600 15px/1.3 Prompt,sans-serif;color:#eafff6} .vsl-hero small{display:block;margin-top:2px;font:400 12px/1.4 Prompt,sans-serif;color:#a7e9cf} .vsl.is-view .vsl-hero{display:none} .vsl-item{position:relative;padding:12px 12px 12px 12px !important;border-radius:18px !important; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.08) !important; animation:vslIn .42s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--k,0) * 35ms)} .vsl-item::before{content:"" !important;display:block !important;position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--a);opacity:.85} .vsl-item:active{transform:scale(.985);background:rgba(255,255,255,.07) !important} .vsl-txt{gap:3px !important} .vsl-item .vsl-tag{display:inline-block} .vsl-free{display:inline-block;position:absolute;top:10px;right:12px;padding:3px 8px;border-radius:99px;background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.4);color:#7ff0c3;font:600 10.5px/1.1 Prompt,sans-serif;letter-spacing:.02em} .vsl-item b{padding-right:40px} .vsl-item::after{align-self:flex-end !important;margin-bottom:4px} .vsl-dots{display:inline-flex;gap:5px;margin-top:3px} .vsl-dots i{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 6px;border-radius:99px;font:600 11px/1.2 Prompt,sans-serif;font-style:normal;background:rgba(255,255,255,.06)} .vsl-dots i::before{content:"";width:7px;height:7px;border-radius:50%} .vsl-dots i.h{color:#fca5a5}.vsl-dots i.h::before{background:#f87171} .vsl-dots i.c{color:#fcd34d}.vsl-dots i.c::before{background:#fbbf24} .vsl-dots i.l{color:#93c5fd}.vsl-dots i.l::before{background:#60a5fa} .vsl-vhead .vsl-dots{margin-top:4px} .vsl-vfoot{gap:8px !important} .vsl-fill{display:block;flex:none;min-height:54px !important;height:auto !important;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#dcdce0;font:500 14px/1 Prompt,sans-serif} .vsl-fill::before,.vsl-fill::after{display:none !important} .vsl-use.is-free{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px !important; background:linear-gradient(135deg,#34d399,#22d3ee) !important;color:#04281b !important;box-shadow:0 10px 26px -10px rgba(52,211,153,.85);position:relative;overflow:hidden} .vsl-use.is-free span{font:700 15.5px/1.1 Prompt,sans-serif} .vsl-use.is-free small{font:500 11px/1.1 Prompt,sans-serif;opacity:.78} .vsl-use.is-free::after{content:"" !important;display:block !important;position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:vslShine 2.8s ease-in-out .6s infinite} .vsl-use.is-free:active{transform:scale(.98)} .vc-demo-note{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;padding:12px 14px 12px 44px;border-radius:14px;position:relative; background:linear-gradient(120deg,rgba(52,211,153,.13),rgba(34,211,238,.07));border:1px solid rgba(52,211,153,.35);color:#cfeee2;font:400 12.5px/1.55 Prompt,Sarabun,sans-serif} .vc-demo-note::before{content:"✦";position:absolute;left:14px;top:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#34d399;color:#04281b;font-size:11px} .vc-demo-note b{font:600 13.5px/1.3 Prompt,sans-serif;color:#7ff0c3} [data-theme="light"] .vc-demo-note{background:#ecfdf5;border-color:#a7f3d0;color:#065f46} [data-theme="light"] .vc-demo-note b{color:#047857} } @keyframes vslIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes vslShine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){.vsl-item,.vsl-hero::after,.vsl-use.is-free::after{animation:none !important}} @media all{.vc-demo-note small{font:400 11.5px/1.4 Prompt,sans-serif;opacity:.7}.vsl-use.is-free:focus:not(:focus-visible){outline:none}} @media all{ .vc-demo-acts{display:flex;gap:8px;margin-top:8px} .vc-demo-acts button{flex:1;min-height:42px !important;height:auto !important;padding:0 10px;border-radius:12px;font:600 13px/1.2 Prompt,sans-serif;cursor:pointer} .vc-demo-acts button::before,.vc-demo-acts button::after{display:none !important} .vc-demo-other{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#e6f7f0} .vc-demo-exit{background:#34d399;border:0;color:#04281b} [data-theme="light"] .vc-demo-other{background:#fff;border-color:#a7f3d0;color:#065f46} } /* ===== v219 (v221: ทุกขนาดจอ): การ์ดลองตัวอย่าง · กระดาษย่อส่วน · ฉากเปิดผลตัวอย่าง · การ์ดชวนตรวจจริง ===== */ .vc-try,.vsl-thumb,.vc-dsc,.vc-demo-cta{display:none} @media all{ /* (ข) iPhone จำสถานะ hover หลังแตะ — ไม่ใช้ hover บนจอสัมผัส */ /* (1) การ์ดลองตัวอย่าง */ .vc-try{display:block;margin:12px 0 2px;padding:4px;border-radius:20px;position:relative; background:linear-gradient(140deg,rgba(52,211,153,.2),rgba(34,211,238,.08) 45%,rgba(167,139,250,.14));border:1px solid rgba(52,211,153,.34); box-shadow:0 18px 40px -26px rgba(52,211,153,.7),inset 0 1px 0 rgba(255,255,255,.07)} .vc-try[hidden]{display:none} .vc-try-main{display:flex;align-items:center;gap:14px;width:100%;min-height:0 !important;height:auto !important;padding:12px 12px 12px 10px;border:0;border-radius:16px; background:transparent;color:#eafff6;text-align:left;font-family:Prompt,sans-serif;cursor:pointer;position:relative;overflow:hidden} .vc-try-main::before{display:none !important} .vc-try-main::after{content:"" !important;display:block !important;position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:translateX(-100%);animation:vslShine 4.2s ease-in-out 1.2s infinite;pointer-events:none} .vc-try-main:active{transform:scale(.985)} .vc-try-fan{flex:none;position:relative;width:62px;height:62px} .vc-try-fan i{position:absolute;left:12px;top:4px;width:38px;height:50px;border-radius:4px;background:#e9e5dc;box-shadow:0 6px 14px -6px rgba(0,0,0,.7);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)} .vc-try-fan .f3{transform:rotate(-16deg) translateX(-6px);background:#cfc9bd} .vc-try-fan .f2{transform:rotate(9deg) translateX(5px);background:#ddd8cd} .vc-try-fan .f1{background:#fdfcf8;padding:6px 5px;display:flex;flex-direction:column;gap:3px;animation:vcTryBob 3.4s ease-in-out infinite} .vc-try-fan .f1 b{display:block;height:3px;width:60%;margin:0 auto 2px;border-radius:2px;background:#9c937f} .vc-try-fan .f1 em{display:block;height:2.5px;border-radius:2px;background:#cfc8b8} .vc-try-fan .f1 em.hl{background:#f6d860;box-shadow:0 0 0 1px rgba(226,162,28,.3)} .vc-try-fan .f1 em.s{width:70%} .vc-try-main:active .vc-try-fan .f3{transform:rotate(-22deg) translateX(-9px)} .vc-try-main:active .vc-try-fan .f2{transform:rotate(15deg) translateX(8px)} .vc-try-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .vc-try-tx b{font:600 15.5px/1.35 Prompt,sans-serif;color:#f2fff9} .vc-try-tx small{font:400 12px/1.4 Prompt,sans-serif;color:#9fe6c9} .vc-try-free{flex:none;align-self:flex-start;padding:4px 10px;border-radius:99px;background:#34d399;color:#04281b;font:700 11.5px/1.1 Prompt,sans-serif;box-shadow:0 4px 14px -4px rgba(52,211,153,.9)} .vc-try-q{padding:2px 10px 10px;border-top:1px dashed rgba(255,255,255,.1);margin:0 6px} .vc-try-q>span{display:block;margin:9px 0 7px;font:500 11.5px/1 Prompt,sans-serif;color:#86d8b8;letter-spacing:.02em} .vc-try-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px} .vc-try-chips::-webkit-scrollbar{display:none} .vc-try-c,.vc-try-all{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px !important;height:auto !important;padding:0 12px 0 9px;border-radius:99px; border:1px solid color-mix(in srgb,var(--qa,#fff) 40%,transparent);background:color-mix(in srgb,var(--qa,#fff) 12%,rgba(10,10,12,.6));color:#f0f0f2;font:500 13px/1 Prompt,sans-serif;cursor:pointer} .vc-try-c::before,.vc-try-c::after,.vc-try-all::before,.vc-try-all::after{display:none !important} .vc-try-c svg{width:17px;height:17px;fill:none;stroke:var(--qa);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .vc-try-all{padding:0 12px;border-color:rgba(255,255,255,.14);background:transparent;color:#bfeee0} .vc-try-c:active,.vc-try-all:active{transform:scale(.95)} [data-theme="light"] .vc-try{background:linear-gradient(140deg,#ecfdf5,#f0fdfa 50%,#f5f3ff);border-color:#a7f3d0} [data-theme="light"] .vc-try-main,[data-theme="light"] .vc-try-tx b{color:#064e3b} [data-theme="light"] .vc-try-tx small,[data-theme="light"] .vc-try-q>span{color:#047857} [data-theme="light"] .vc-try-c{background:#fff;color:#1f2937} [data-theme="light"] .vc-try-all{color:#047857;border-color:#a7f3d0} /* (4) กระดาษย่อส่วนในคลังตัวอย่าง */ .vsl-list .vsl-item>.vsl-art{display:none} .vsl-thumb{display:block;flex:none;position:relative;width:60px;height:74px;margin:2px 4px 2px 2px} .vsl-thumb::before{content:"";position:absolute;inset:0;border-radius:4px;background:#d9d3c6;transform:rotate(-5deg) translate(-3px,2px)} .vsl-th-p{position:absolute;inset:0;border-radius:4px;background:#fdfcf8;padding:7px 6px 6px;display:flex;flex-direction:column;gap:3.5px;overflow:hidden; box-shadow:0 8px 16px -8px rgba(0,0,0,.8);border-top:4px solid var(--a);transition:transform .3s cubic-bezier(.3,1.6,.5,1)} .vsl-th-p b{display:block;height:3px;width:62%;margin:0 auto 2px;border-radius:2px;background:#8d8472} .vsl-th-p i{display:block;flex:none;height:2.6px;border-radius:2px;background:#d6cfc0} .vsl-th-p i.r{background:#f4cf4d;box-shadow:0 0 0 1.2px rgba(226,162,28,.25)} .vsl-th-ic{position:absolute;right:-7px;bottom:-6px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--a) 40%,#1f1f25),#16161a);border:1px solid color-mix(in srgb,var(--a) 45%,transparent);box-shadow:0 4px 10px -3px rgba(0,0,0,.8)} .vsl-th-ic svg{width:21px;height:21px;overflow:visible} .vsl-th-ic .w{fill:#eef0f3}.vsl-th-ic .d{fill:#24242b}.vsl-th-ic .a{fill:color-mix(in srgb,var(--a) 80%,#fff)}.vsl-th-ic .as{stroke:color-mix(in srgb,var(--a) 80%,#fff);fill:none} .vsl-item:active .vsl-th-p{transform:rotate(-3deg) translateY(-2px)} /* (7) ฉากเปิดผลตัวอย่าง */ .vc-dsc{display:grid;place-items:center;position:fixed;inset:0;z-index:2147483060;background:rgba(6,7,8,.6);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2); opacity:0;transition:opacity .28s;font-family:Prompt,Sarabun,sans-serif;color:#ededef} .vc-dsc.in{opacity:1}.vc-dsc.out{opacity:0} .vc-dsc-card{width:min(340px,86vw);display:flex;flex-direction:column;align-items:center;gap:18px} .vc-dsc-paper{position:relative;width:100%;padding:20px 20px 18px 22px;border-radius:8px;background:#fdfcf8;color:#2a2620;overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.05);transform:translateY(40px) rotateX(18deg) scale(.92);opacity:0; transition:transform .55s cubic-bezier(.2,.9,.25,1.1),opacity .3s} .vc-dsc.in .vc-dsc-paper{transform:none;opacity:1} .vc-dsc.end .vc-dsc-paper{transform:scale(.96);transition-duration:.4s} .vc-dsc-paper h5{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #e1dbcf;text-align:center;font:600 14px/1.3 Taviraj,Prompt,serif;color:#1d1a15} .vc-dsc-paper p{position:relative;margin:0 0 5px;padding-right:22px;font:400 11.5px/1.55 Sarabun,Prompt,sans-serif;color:#6b6457;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s} .vc-dsc-paper p span{background-image:linear-gradient(transparent 55%,rgba(250,214,80,.75) 55%,rgba(250,214,80,.75) 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .35s ease} .vc-dsc-paper p.seen{color:#2a2620} .vc-dsc-paper p.hit span{background-size:100% 100%} .vc-dsc-st{position:absolute;right:0;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 Prompt,sans-serif;font-style:normal;color:#fff; transform:scale(2.4) rotate(-25deg);opacity:0;transition:transform .32s cubic-bezier(.3,1.7,.5,1),opacity .15s} .vc-dsc-st.h{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.2)}.vc-dsc-st.c{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}.vc-dsc-st.l{background:#3b82f6} .vc-dsc-paper p.hit .vc-dsc-st{transform:none;opacity:1} .vc-dsc-scan{position:absolute;left:0;right:0;top:0;height:46px;margin-top:-46px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(52,211,153,.16) 70%,rgba(52,211,153,.55) 96%,transparent);border-bottom:2px solid #34d399;filter:drop-shadow(0 0 6px rgba(52,211,153,.8));opacity:0} .vc-dsc.in .vc-dsc-scan{animation:vcScan 1.5s cubic-bezier(.45,.05,.55,.95) .38s both} .vc-dsc-h{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center} .vc-dsc-h b{font:600 18px/1.3 Prompt,sans-serif;color:#fff} .vc-dsc-cnt{padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font:500 13px/1.2 Prompt,sans-serif;color:#d4d4d8} .vc-dsc-cnt em{font-style:normal;font-weight:700;color:#fca5a5;display:inline-block;min-width:.7em} .vc-dsc-cnt.pop em{animation:vcPop .3s cubic-bezier(.3,1.8,.5,1)} .vc-dsc.end .vc-dsc-cnt{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.4)} .vc-dsc-note{margin:0;font:400 11.5px/1.4 Prompt,sans-serif;color:#8b8b93} html.vc-dsc-open .vc-bn,html.vc-dsc-open .vc-fpill{opacity:0;pointer-events:none} /* (8) การ์ดชวนตรวจจริงท้ายผลตัวอย่าง */ .vc-demo-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:18px 0 8px;padding:22px 18px 18px;border-radius:22px;position:relative;overflow:hidden; background:radial-gradient(120% 80% at 50% 0%,rgba(52,211,153,.2),transparent 65%),#141417;border:1px solid rgba(52,211,153,.32)} .vc-dcta-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#34d399,#22d3ee);box-shadow:0 10px 24px -10px rgba(52,211,153,.9);margin-bottom:6px} .vc-dcta-ic svg{width:26px;height:26px;fill:none;stroke:#04281b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .vc-demo-cta h3{margin:0;font:600 18px/1.35 Prompt,sans-serif;color:#fff} .vc-demo-cta p{margin:0;font:400 13px/1.55 Prompt,Sarabun,sans-serif;color:#b4b4bb} .vc-demo-cta .vc-dcta-free{margin-top:4px;padding:4px 12px;border-radius:99px;background:rgba(240,196,106,.12);border:1px solid rgba(240,196,106,.35);color:#f3d48c;font-size:12px} .vc-dcta-go,.vc-dcta-other{width:100%;min-height:52px !important;height:auto !important;border-radius:15px;font:600 15px/1.2 Prompt,sans-serif;cursor:pointer} .vc-dcta-go::before,.vc-dcta-go::after,.vc-dcta-other::before,.vc-dcta-other::after{display:none !important} .vc-dcta-go{margin-top:12px;border:0;background:#f4f4f5;color:#111} .vc-dcta-other{min-height:46px !important;background:transparent !important;border:1px solid rgba(255,255,255,.14) !important;color:#d4d4d8 !important;font-size:14px} .vc-dcta-go:active,.vc-dcta-other:active{transform:scale(.98)} [data-theme="light"] .vc-demo-cta{background:#f0fdf4;border-color:#a7f3d0} [data-theme="light"] .vc-demo-cta h3{color:#064e3b}[data-theme="light"] .vc-demo-cta p{color:#374151} [data-theme="light"] .vc-dcta-go{background:#111;color:#fff} } @keyframes vcScan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}} @keyframes vcPop{0%{transform:scale(1)}50%{transform:scale(1.6)}100%{transform:scale(1)}} @keyframes vcTryBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}} @media (prefers-reduced-motion:reduce){.vc-try-main::after,.vc-try-fan .f1,.vc-dsc-scan{animation:none !important}} @media (max-width:767px){ html.vc-art #checkCard .ta-actions #sampleBtn.sample-btn,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-actions #sampleBtn.sample-btn{display:none !important} html.vc-art #checkCard .ta-actions .file-pick{flex:1 1 100%} } @media (max-width:767px){html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-actions{grid-template-columns:1fr !important}} /* ===== v220 (v221: ทุกขนาดจอ): คลังตัวอย่างอ่านง่ายขึ้น ===== */ .vsl-bar,.vsl-top{display:none} @media all{ /* (ก) ล่างรายการค่อย ๆ จาง ไม่ตัดกึก */ .vsl-list{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);padding-bottom:30px !important} /* (ข) แถวหมวดจางขอบขวา บอกว่าปัดได้ */ .vsl-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);padding-right:40px !important} /* (2) การ์ดโล่ง: ไม่ซ้ำป้ายฟรี, แทนจำนวนตัวอักษรด้วยจุดหนักสุด */ .vsl-item .vsl-free,.vsl-item em,.vsl-item .vsl-dots,.vsl-item .vsl-txt>small{display:none !important} .vsl-item b{padding-right:0 !important} .vsl-item{align-items:flex-start !important;padding:14px 12px 14px 12px !important} .vsl-item::after{align-self:center !important;margin-bottom:0} .vsl-top{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 12.5px/1.45 Prompt,Sarabun,sans-serif;color:#f3c9c9} .vsl-top::first-line{color:#f3c9c9} /* (3)+(ค) แถบระดับความเสี่ยงพร้อมคำบอก */ .vsl-bar{display:flex;flex-direction:column;gap:5px;margin-top:5px;width:100%} .vsl-bar-s{display:flex;gap:3px;width:100%;max-width:170px} .vsl-bar-s i{flex:1;height:5px;border-radius:3px} .vsl-bar-s i.h{background:#f87171}.vsl-bar-s i.c{background:#fbbf24}.vsl-bar-s i.l{background:#60a5fa} .vsl-bar-l{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 11.5px/1.2 Prompt,sans-serif} .vsl-bar-l span{display:inline-flex;align-items:center;gap:5px} .vsl-bar-l span::before{content:"";width:7px;height:7px;border-radius:50%} .vsl-bar-l .h{color:#fca5a5}.vsl-bar-l .h::before{background:#f87171} .vsl-bar-l .c{color:#fcd34d}.vsl-bar-l .c::before{background:#fbbf24} .vsl-bar-l .l{color:#93c5fd}.vsl-bar-l .l::before{background:#60a5fa} .vsl-vhead .vsl-dots{display:none !important} .vsl-vhead .vsl-bar{margin-top:6px} /* (4) กระดาษย่อ: ตัวหนังสือจริงขนาดจิ๋ว + ปากกาไฮไลต์ */ .vsl-thumb{width:64px;height:80px} .vsl-th-p{padding:0 !important;display:block !important} .vsl-th-p>b,.vsl-th-p>i{display:none} .vsl-th-t{position:absolute;left:0;top:0;width:250%;padding:12px 11px;transform:scale(.4);transform-origin:0 0;color:#5a5346;font:400 8.6px/1.62 Sarabun,Prompt,sans-serif;-webkit-text-size-adjust:none;text-size-adjust:none} .vsl-th-t b{display:block;margin:0 0 5px;padding-bottom:4px;border-bottom:1px solid #ddd5c6;text-align:center;font:700 10px/1.3 Taviraj,Prompt,serif;color:#221e17;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vsl-th-t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip} .vsl-th-t mark{color:#2a2416;background:linear-gradient(transparent 18%,rgba(246,206,64,.85) 18%,rgba(246,206,64,.85) 88%,transparent 88%);border-radius:1px} /* (5) เลื่อนแล้วหัวยุบ */ .vsl-head h3{transition:font-size .25s ease} .vsl-head p,.vsl-hero{transition:max-height .3s ease,opacity .2s ease,margin .3s ease,padding .3s ease;max-height:120px} .vsl.is-scrolled .vsl-head h3{font-size:17px} .vsl.is-scrolled .vsl-head p{max-height:0;opacity:0;margin:0;overflow:hidden} .vsl.is-scrolled .vsl-hero{max-height:0;opacity:0;margin:0;padding-top:0;padding-bottom:0;border-width:0} .vsl.is-scrolled .vsl-x{width:32px;height:32px} .vsl.is-scrolled .vsl-chips{margin-top:10px} } /* v221: ส่วนที่เป็นของมือถือเท่านั้น */ @media (max-width:767px){ .vsl-card{background:radial-gradient(120% 60% at 50% -10%,rgba(52,211,153,.13),transparent 60%),#141417} .vsl-card::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:rgba(255,255,255,.18)} .vsl-head h3{font-size:21px;letter-spacing:.01em} .vsl-back{font-size:0 !important;width:54px;min-height:54px !important;padding:0 !important} .vsl-back::before{content:"←" !important;display:block !important;position:static;font-size:19px;color:#dcdce0;background:none;width:auto;height:auto} .vsl-item:hover .vsl-art{transform:none} .vsl-item:hover::after{color:#8e8e96} #sampleBtn{display:none !important} .ta-actions .file-pick{flex:1} } /* ===== v221 คอม/โน้ตบุ๊ก: การ์ดลองตัวอย่างฟรีแทนปุ่มเล็ก + คลังตัวอย่างแบบเดียวกับมือถือ ===== */ @media (min-width:768px){ html.vc-art #checkCard .ta-actions #sampleBtn.sample-btn,#checkCard #sampleBtn{display:none !important} .vc-try{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;margin:14px 0 4px;padding:6px 14px 6px 6px} .vc-try[hidden]{display:none} .vc-try-main{padding:10px 12px 10px 8px} .vc-try-main:hover::after{animation-duration:1.6s} .vc-try-main:hover .vc-try-fan .f3{transform:rotate(-22deg) translateX(-9px)} .vc-try-main:hover .vc-try-fan .f2{transform:rotate(15deg) translateX(8px)} .vc-try-free{align-self:center} .vc-try-q{border-top:0;border-left:1px dashed rgba(255,255,255,.12);margin:0;padding:6px 0 6px 14px} .vc-try-q>span{margin:0 0 8px} .vc-try-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0;max-width:330px} .vc-try-c:hover{background:color-mix(in srgb,var(--qa,#fff) 22%,rgba(10,10,12,.6));transform:translateY(-1px)} .vc-try-all:hover{color:#fff;border-color:rgba(255,255,255,.3)} .vsl-card .vsl-hero{margin:12px 0 4px} .vsl-item{padding:14px 14px !important} .vsl-item:hover .vsl-th-p{transform:rotate(-3deg) translateY(-2px)} .vsl-top{font-size:12.5px} .vsl-use.is-free:hover{filter:brightness(1.07)} .vc-demo-acts button:hover{filter:brightness(1.1)} .vc-dcta-go:hover{background:#fff} .vc-demo-cta{margin-top:16px} } @media (min-width:768px) and (max-width:1100px){ .vc-try{grid-template-columns:1fr} .vc-try-q{border-left:0;border-top:1px dashed rgba(255,255,255,.12);padding:10px 4px 6px} .vc-try-chips{max-width:none} } /* ===== v221 คอม: กล่องว่างแบบเดียวกับมือถือ (ปุ่มวางจากคลิปบอร์ด) ===== */ .vc-empty-kbd{display:none} @media (min-width:768px){ /* 1) กล่องว่าง */ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:20px;text-align:center;font-family:var(--k-ff);cursor:text} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:is(.vc-has,.vc-focus) .vc-empty{display:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) #input::placeholder{color:transparent !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has) > .ta-count{display:none} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#d4d4d8; background:linear-gradient(145deg,#26262c,#18181c);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 24px -10px rgba(0,0,0,.8)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty b{font:600 16px/1.4 var(--k-ff);color:#ededef} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;margin-top:4px; border-radius:99px;border:0;background:#f4f4f5;color:#111;font:600 15px/1 var(--k-ff);cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste:hover{background:#fff} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste::before,html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste::after{display:none !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty small{font:400 13px/1.5 var(--k-ff);color:var(--k-fa)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty small label{color:#d4d4d8;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3);cursor:pointer} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste-msg{display:none;margin:2px 0 0;font:500 12.5px/1.45 var(--k-ff);color:#fcd34d;max-width:260px} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-paste-msg.on{display:block} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) #input{min-height:260px !important;height:260px !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-dash{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-dash rect{fill:none;stroke:rgba(52,211,153,.45);stroke-width:1.5;stroke-dasharray:8 7} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty:hover .vc-empty-dash rect{stroke:rgba(52,211,153,.8)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-kbd{display:block;font:400 12px/1.4 var(--k-ff);color:#77777f} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .vc-empty-kbd kbd{display:inline-block;min-width:20px;padding:1px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;background:rgba(255,255,255,.05);color:#d4d4d8;font:600 11px/1.5 var(--k-ff)} } .vc-try .vc-try-main{background:transparent !important;box-shadow:none !important;border:0 !important} @media (min-width:768px){html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap:not(.vc-has):not(.vc-focus) #input{resize:none}} /* ===== v222 คอม: เอาการ์ดเติมเครดิตออกจากหน้า — เปิดเป็นหน้าต่างเด้งจากปุ่ม "เติมเครดิต" เท่านั้น (เหมือนมือถือ) ===== */ @media (min-width:768px){ html.vc-art main > #paymentCard,#paymentCard{display:none !important} #payBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000} #payBackdrop[hidden]{display:none} body.pay-open{overflow:hidden} html.vc-art body.pay-open main > #paymentCard:not([hidden]),body.pay-open #paymentCard:not([hidden]){display:block !important;position:fixed !important;left:50%;top:50%;transform:translate(-50%,-50%); width:min(92vw,540px);max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;margin:0 !important;z-index:1001;background:#15161b;opacity:1; box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 0 1px rgba(168,171,176,.22);animation:vcPayIn .25s cubic-bezier(.2,.8,.2,1)} #paymentCard .pay-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;display:grid;place-items:center;border-radius:50%; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#ededef;font-size:.95rem;line-height:1;cursor:pointer} #paymentCard .pay-close:hover{background:rgba(255,255,255,.12)} #paymentCard .pay-close[hidden]{display:none} #paymentCard .pay-head{padding-right:44px} } @keyframes vcPayIn{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @media (prefers-reduced-motion:reduce){body.pay-open #paymentCard:not([hidden]){animation:none !important}} /* v222 คอม: toast ไม่มี CSS บนคอม (อยู่ใน mobile.css) จึงโผล่เป็นตัวหนังสือล่างซ้าย — ทำเป็นป้ายลอยกลางล่าง */ @media (min-width:768px){ .toast{position:fixed;left:50%;bottom:28px;z-index:2147483000;max-width:min(520px,90vw);padding:12px 20px;border-radius:14px; background:rgba(24,24,28,.96);border:1px solid rgba(255,255,255,.12);color:#ededef;font:500 14px/1.45 Prompt,Sarabun,sans-serif;text-align:center; box-shadow:0 18px 40px -16px rgba(0,0,0,.85);opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .22s ease,transform .22s ease} .toast.show{opacity:1;transform:translate(-50%,0)} } @media (min-width:768px) and (prefers-reduced-motion:reduce){.toast{transition:none}} /* ===== v224 คอม: หน้าต่างสัญญาตัวอย่างแบบสองฝั่ง + คอลัมน์จุดเสี่ยง + คีย์ลัด ===== */ .vsl-rail,.vsl-sum,.vsl-keys,.vsl-pn,.vsl-ent{display:none} .vsl-vbody{flex:1;min-height:0;display:flex;flex-direction:column} @media (min-width:768px){ /* (ก) แถบเลื่อนกระดาษบาง สีกลืนกระดาษ */ .vsl-doc{scrollbar-width:thin;scrollbar-color:#cfc6b4 transparent} .vsl-doc::-webkit-scrollbar{width:8px}.vsl-doc::-webkit-scrollbar-track{background:transparent} .vsl-doc::-webkit-scrollbar-thumb{background:#d6cdbb;border-radius:8px;border:2px solid #fdfcf8} .vsl-doc::-webkit-scrollbar-thumb:hover{background:#bfb49f} .vsl-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} /* (ข) กระดาษที่ซ้อนอยู่ไม่ล้นขอบ */ .vsl-paper{margin:16px 12px 10px 4px} .vsl-paper::before{transform:rotate(1deg) translate(4px,4px);inset:4px 6px 0 6px} .vsl-paper::after{transform:rotate(-.8deg) translate(2px,7px);inset:6px 10px 0 8px} } @media (min-width:1024px){ /* (ค)+(1) หน้าต่างกว้าง แบ่งสองฝั่ง */ .vsl.vsl-split .vsl-card{width:min(1280px,95vw);height:min(880px,90vh);max-height:none;display:grid;padding:22px 24px 14px; grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:22px} .vsl.vsl-split .vsl-head{grid-column:1 / -1;grid-row:1} .vsl.vsl-split .vsl-hero{grid-column:1;grid-row:2;margin:14px 0 0;padding:10px 12px} .vsl.vsl-split .vsl-hero b{font-size:14px}.vsl.vsl-split .vsl-hero small{font-size:11.5px} .vsl.vsl-split .vsl-hero-ic{width:32px;height:32px} .vsl.vsl-split .vsl-chips{grid-column:1;grid-row:3;display:flex !important;flex-wrap:wrap;overflow:visible;margin:12px 0 10px;padding:0 !important;-webkit-mask-image:none;mask-image:none} .vsl.vsl-split .vsl-chip{padding:6px 11px;font-size:12.5px} .vsl.vsl-split .vsl-list{grid-column:1;grid-row:4;display:flex !important;flex-direction:column;gap:6px;overflow:auto;margin:0 -6px 0 -2px;padding:2px 6px 30px 2px !important} .vsl.vsl-split .vsl-fine{grid-column:1;grid-row:5;text-align:left;margin-top:8px} .vsl.vsl-split .vsl-view{grid-column:2;grid-row:2 / 6;display:flex !important;margin-top:14px;min-height:0;padding-left:22px;border-left:1px solid rgba(255,255,255,.07)} .vsl.vsl-split.is-scrolled .vsl-hero{max-height:none;opacity:1;margin:14px 0 0;padding:10px 12px;border-width:1px} .vsl.vsl-split.is-scrolled .vsl-head p{max-height:none;opacity:1;margin:4px 0 0} .vsl.vsl-split.is-scrolled .vsl-head h3{font-size:20px} /* รายการซ้ายแบบกะทัดรัด */ .vsl.vsl-split .vsl-item{flex-direction:row !important;align-items:center !important;gap:12px !important;padding:10px 12px !important;border-radius:14px !important;animation:none} .vsl.vsl-split .vsl-item .vsl-thumb{width:46px;height:58px;margin:0 4px 0 0} .vsl.vsl-split .vsl-th-ic{width:21px;height:21px;border-radius:7px;right:-6px;bottom:-5px}.vsl.vsl-split .vsl-th-ic svg{width:17px;height:17px} .vsl.vsl-split .vsl-item .vsl-tag{display:none} .vsl.vsl-split .vsl-item b{font-size:14px;line-height:1.35} .vsl.vsl-split .vsl-item .vsl-top{-webkit-line-clamp:1;font-size:12px} .vsl.vsl-split .vsl-item .vsl-bar{margin-top:3px} .vsl.vsl-split .vsl-item .vsl-bar-l{display:none} .vsl.vsl-split .vsl-item .vsl-bar-s{max-width:120px}.vsl.vsl-split .vsl-item .vsl-bar-s i{height:4px} .vsl.vsl-split .vsl-item::after{content:"" !important;display:none !important} .vsl.vsl-split .vsl-item.is-cur{background:rgba(255,255,255,.08) !important;border-color:color-mix(in srgb,var(--a) 60%,transparent) !important;box-shadow:inset 3px 0 0 var(--a)} .vsl.vsl-split .vsl-item.is-cur::before{opacity:0 !important} /* หัวฝั่งขวา */ .vsl.vsl-split .vsl-vhead{align-items:center} .vsl.vsl-split .vsl-vhead .vsl-txt b{font-size:19px} /* (2) กระดาษ + คอลัมน์จุดเสี่ยง */ .vsl.vsl-split .vsl-vbody{flex-direction:row;gap:18px} .vsl.vsl-split .vsl-paper{flex:1;min-width:0} .vsl.vsl-split .vsl-doc{padding:30px 40px 34px 46px !important;font-size:15px !important;line-height:1.85 !important} .vsl.vsl-split .vsl-note,.vsl.vsl-split.hl-on .vsl-note{display:none !important} .vsl.vsl-split.hl-on .vsl-doc p.is-risk::before{display:none} .vsl.vsl-split .vsl-doc p[data-c]{position:relative;border-radius:6px;transition:background .2s,box-shadow .2s;margin-left:-8px !important;padding:2px 8px} .vsl.vsl-split .vsl-pn{display:none;position:absolute;left:-26px;top:.35em;width:20px;height:20px;border-radius:50%;place-items:center;background:#e2a21c;color:#fff;font:700 11px/1 Prompt,sans-serif;font-style:normal;box-shadow:0 2px 6px -2px rgba(0,0,0,.4)} .vsl.vsl-split.hl-on .vsl-pn{display:grid} .vsl.vsl-split .vsl-doc p.is-hot{background:rgba(250,214,80,.22);box-shadow:0 0 0 1px rgba(226,162,28,.35)} .vsl.vsl-split .vsl-doc p.is-hot .vsl-pn{transform:scale(1.15)} .vsl.vsl-split .vsl-doc p.is-flash{animation:vslFlash 1.1s ease} .vsl.vsl-split .vsl-rail{display:flex;flex-direction:column;gap:8px;flex:none;width:300px;min-height:0;overflow:auto;margin:16px 0 10px;padding:0 4px 0 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} .vsl-rail h5{margin:0 0 4px;font:600 13px/1.3 Prompt,sans-serif;color:#a3a3aa;letter-spacing:.02em} .vsl-rail h5 span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.08);color:#ededef;font-size:11.5px} .vsl-rc{display:grid;grid-template-columns:24px 1fr;column-gap:10px;row-gap:3px;align-items:start;text-align:left;width:100%;min-height:0 !important;height:auto !important;padding:12px 12px 12px 10px;border-radius:14px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);color:#ededef;font-family:Prompt,Sarabun,sans-serif;cursor:pointer;transition:background .18s,border-color .18s,transform .18s} .vsl-rc::before,.vsl-rc::after{display:none !important} .vsl-rc-n{grid-row:1 / span 3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 Prompt,sans-serif;font-style:normal;color:#fff;background:#e2a21c} .vsl-rc.h .vsl-rc-n{background:#ef4444}.vsl-rc.l .vsl-rc-n{background:#3b82f6} .vsl-rc-m{font:500 11.5px/1.2 Prompt,sans-serif;color:#fcd34d}.vsl-rc.h .vsl-rc-m{color:#fca5a5}.vsl-rc.l .vsl-rc-m{color:#93c5fd} .vsl-rc b{font:600 14px/1.4 Prompt,sans-serif;color:#fff} .vsl-rc small{font:400 12px/1.5 Prompt,Sarabun,sans-serif;color:#a1a1aa} .vsl-rc:hover,.vsl-rc.is-hot{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);transform:translateX(-2px)} .vsl-rc.h:hover,.vsl-rc.h.is-hot{border-color:rgba(248,113,113,.5)}.vsl-rc.c:hover,.vsl-rc.c.is-hot{border-color:rgba(251,191,36,.5)} .vsl-rc-none{margin:0;font-size:13px;color:#8b8b93} .vsl.vsl-split:not(.hl-on) .vsl-rail{opacity:.45} /* (5) แถบปุ่มล่าง */ .vsl.vsl-split .vsl-back{display:none !important} .vsl.vsl-split .vsl-vfoot{align-items:center;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)} .vsl.vsl-split .vsl-sum{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-right:auto;font:500 13px/1.3 Prompt,sans-serif} .vsl-sum small{color:#8b8b93;font-size:12.5px} .vsl-sum span{display:inline-flex;align-items:center;gap:6px} .vsl-sum span::before{content:"";width:8px;height:8px;border-radius:50%} .vsl-sum .h{color:#fca5a5}.vsl-sum .h::before{background:#f87171}.vsl-sum .c{color:#fcd34d}.vsl-sum .c::before{background:#fbbf24}.vsl-sum .l{color:#93c5fd}.vsl-sum .l::before{background:#60a5fa} .vsl.vsl-split .vsl-fill{flex:none;min-height:52px !important;padding:0 18px} .vsl.vsl-split .vsl-use{flex:none;min-width:280px} .vsl.vsl-split .vsl-use.is-free{flex-direction:row;gap:12px;padding:0 18px 0 22px;justify-content:space-between} .vsl.vsl-split .vsl-use.is-free span{font-size:16px} .vsl.vsl-split .vsl-use.is-free small{margin-right:auto} .vsl.vsl-split .vsl-ent{display:inline-block;padding:3px 8px;border-radius:7px;background:rgba(4,40,27,.16);border:1px solid rgba(4,40,27,.28);color:#04281b;font:600 11.5px/1.3 Prompt,sans-serif;font-style:normal} /* (4) คีย์ลัด */ .vsl.vsl-split .vsl-keys{display:flex;justify-content:flex-end;gap:16px;margin-top:8px;font:400 11.5px/1.4 Prompt,sans-serif;color:#77777f} .vsl-keys kbd{display:inline-block;min-width:18px;margin-right:3px;padding:0 5px;border-radius:5px;border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;background:rgba(255,255,255,.04);color:#cfcfd4;font:600 10.5px/1.6 Prompt,sans-serif;text-align:center} .vsl.vsl-split .vsl-view.vsl-swap .vsl-paper,.vsl.vsl-split .vsl-view.vsl-swap .vsl-rail{animation:vslSwap .28s cubic-bezier(.2,.9,.25,1)} } @media (min-width:1024px) and (max-width:1280px){ .vsl.vsl-split .vsl-card{grid-template-columns:300px minmax(0,1fr)} .vsl.vsl-split .vsl-rail{width:250px} .vsl.vsl-split .vsl-doc{padding:24px 26px 28px 36px !important} .vsl.vsl-split .vsl-use{min-width:240px} } @keyframes vslFlash{0%,100%{background:transparent}25%,60%{background:rgba(250,214,80,.45)}} @keyframes vslSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.vsl.vsl-split .vsl-view.vsl-swap .vsl-paper,.vsl.vsl-split .vsl-view.vsl-swap .vsl-rail,.vsl.vsl-split .vsl-doc p.is-flash{animation:none !important}} @media (min-width:1024px){ .vsl.vsl-split .vsl-list>.vsl-item,.vsl.vsl-split .vsl-rail>*{flex:none} .vsl.vsl-split.is-view .vsl-hero{display:flex} } /* ===== v225 ความเห็นต่อผลตรวจ · สถิติแอดมิน · บรรทัดความเป็นส่วนตัว (ทุกขนาดจอ) ===== */ .vc-fb{margin:16px 0 8px;padding:16px 16px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);font-family:Prompt,Sarabun,sans-serif;color:#ededef} .vc-fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .vc-fb h4{margin:0;font:600 16px/1.35 Prompt,sans-serif;color:#fff} .vc-fb-top p{margin:3px 0 0;font-size:12.5px;color:#a1a1aa} .vc-fb-btns{display:flex;gap:8px} .vc-fb-r{display:inline-flex;align-items:center;gap:7px;min-height:42px !important;height:auto !important;padding:0 14px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e4e4e7;font:500 14px/1 Prompt,sans-serif;cursor:pointer;transition:background .18s,border-color .18s,transform .18s} .vc-fb-r::before,.vc-fb-r::after,.vc-fb-c::before,.vc-fb-c::after,.vc-fb-send::before,.vc-fb-send::after,.vc-fb-edit::before,.vc-fb-edit::after{display:none !important} .vc-fb-r svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .vc-fb-r.down svg{transform:scaleY(-1)} .vc-fb-r:hover{background:rgba(255,255,255,.08)} .vc-fb-r:active{transform:scale(.96)} .vc-fb-r.up.is-on{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.6);color:#a7f3d0} .vc-fb-r.down.is-on{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.55);color:#fde68a} .vc-fb-more{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.12)} .vc-fb-more[hidden],.vc-fb-done[hidden]{display:none} .vc-fb-q{margin:0 0 8px;font-size:13px;color:#d4d4d8} .vc-fb-chips{display:flex;flex-wrap:wrap;gap:6px} .vc-fb-c{min-height:36px !important;height:auto !important;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#d4d4d8;font:500 13px/1 Prompt,sans-serif;cursor:pointer} .vc-fb-c.is-on{background:#f4f4f5;border-color:#f4f4f5;color:#111} .vc-fb-note{display:block;width:100%;box-sizing:border-box;margin:10px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#ededef;font:400 14px/1.5 Prompt,Sarabun,sans-serif;resize:vertical;min-height:60px} .vc-fb-note:focus{outline:none;border-color:rgba(52,211,153,.6)} .vc-fb-act{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px} .vc-fb-msg{margin-right:auto;font-size:12.5px;color:#fca5a5} .vc-fb-send{min-height:42px !important;height:auto !important;padding:0 18px;border-radius:12px;border:0;background:#f4f4f5;color:#111;font:600 14px/1 Prompt,sans-serif;cursor:pointer} .vc-fb-done{margin:12px 0 0;font-size:13.5px;color:#a7f3d0} .vc-fb-edit{margin-left:6px;min-height:0 !important;height:auto !important;padding:2px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#d4d4d8;font:500 12px/1.4 Prompt,sans-serif;cursor:pointer} @media (max-width:767px){.vc-fb-btns{width:100%}.vc-fb-r{flex:1;justify-content:center;min-height:46px !important}} [data-theme="light"] .vc-fb{background:#fff;border-color:#e5e7eb;color:#111} [data-theme="light"] .vc-fb h4{color:#111}[data-theme="light"] .vc-fb-top p{color:#6b7280} [data-theme="light"] .vc-fb-r,[data-theme="light"] .vc-fb-c{color:#1f2937;border-color:#d1d5db} [data-theme="light"] .vc-fb-note{background:#f9fafb;color:#111;border-color:#d1d5db} [data-theme="light"] .vc-fb-send,[data-theme="light"] .vc-fb-c.is-on{background:#111;color:#fff;border-color:#111} /* บรรทัดความเป็นส่วนตัวใต้ปุ่มตรวจ */ .vc-trustline{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 0;font:400 12.5px/1.6 Prompt,Sarabun,sans-serif;color:#9b9ba3} .vc-trustline svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:#34d399;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .vc-trustline a{color:#a7f3d0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(167,243,208,.4)} .vc-trustline a:hover{color:#fff} [data-theme="light"] .vc-trustline{color:#4b5563}[data-theme="light"] .vc-trustline a{color:#047857} /* สถิติแอดมิน */ .adm-st{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)} .adm-st-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .adm-st h4{margin:0;font:600 15px/1.3 Prompt,sans-serif;color:#fff} .adm-st h5{margin:16px 0 6px;font:600 13px/1.3 Prompt,sans-serif;color:#d4d4d8} .adm-st-rng{display:flex;gap:4px;padding:3px;border-radius:99px;background:rgba(255,255,255,.05)} .adm-st-rng button{min-height:0 !important;height:auto !important;padding:5px 10px;border-radius:99px;border:0;background:transparent;color:#a1a1aa;font:500 12px/1.2 Prompt,sans-serif;cursor:pointer} .adm-st-rng button::before,.adm-st-rng button::after{display:none !important} .adm-st-rng button.is-on{background:#f4f4f5;color:#111} .adm-st-load,.adm-empty{margin:10px 0 0;font-size:12.5px;color:#8b8b93} .adm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px} .adm-tile{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} .adm-tile span{font-size:12px;color:#a1a1aa} .adm-tile b{font:700 22px/1.2 Prompt,sans-serif;color:#fff;font-variant-numeric:tabular-nums} .adm-tile small{font-size:11.5px;color:#8b8b93} .adm-tile:last-child{grid-column:1 / -1} .adm-chart{margin:14px 0 0} .adm-chart figcaption{font:600 13px/1.3 Prompt,sans-serif;color:#d4d4d8;margin-bottom:8px} .adm-chart figcaption small{display:block;margin-top:2px;font-weight:400;font-size:11.5px;color:#8b8b93} .adm-chart svg{display:block;width:100%;height:92px;border-bottom:1px solid rgba(255,255,255,.14)} .adm-bar .b{fill:#34d399}.adm-bar .z{fill:rgba(255,255,255,.12)}.adm-bar .hit{fill:transparent} .adm-bar:hover .b{fill:#6ee7b7}.adm-bar:hover .hit{fill:rgba(255,255,255,.05)} .adm-chart-x{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:#8b8b93} .adm-rs,.adm-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .adm-rs li{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.035);font-size:13px;color:#d4d4d8} .adm-rs li b{color:#fff;font-variant-numeric:tabular-nums} .adm-notes li{display:flex;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.035)} .adm-notes li p{margin:0;font-size:13px;line-height:1.5;color:#ededef} .adm-notes li small{font-size:11.5px;color:#8b8b93} /* ===== v227 หน้าแรกแบบว้าว (ทุกขนาดจอ เว้นระบุ) ===== */ /* (2) หัวข้อ: บรรทัดแรกหนาขึ้น · "ก่อนเซ็น" เป็นลายเซ็นหมึก */ html.vc-art .hero .ht-l:first-child{font-weight:500;letter-spacing:-.01em} html.vc-art .hero .ht-l2.hs-on{position:relative;display:block;width:fit-content;margin-top:.02em} html.vc-art .hero .ht-l2.hs-on > .vc-word,html.vc-art .hero .ht-l2.hs-on > :not(.vc-sr):not(.hs-ink){visibility:hidden} html.vc-art .hero .ht-l2.hs-on::after{display:none !important} .hs-ink{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);white-space:nowrap;pointer-events:none} .hs-word{display:block;font-family:Charmonman,'Taviraj',cursive;font-weight:700;font-size:1.32em;line-height:1.15;color:#f3dcae; background:linear-gradient(100deg,#fff1d6 0%,#e9c27a 45%,#f7e3bb 70%,#d9a85b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 14px rgba(233,194,122,.28));clip-path:inset(-20% 100% -20% -4%);padding:0 .08em} .hs-nib{position:absolute;top:58%;left:0;width:.16em;height:.16em;margin:-.08em 0 0 -.08em;border-radius:50%;background:#fff3d8;box-shadow:0 0 10px 3px rgba(255,214,140,.75),0 0 30px 8px rgba(233,170,80,.35);opacity:0} .hs-line{position:absolute;left:-2%;right:-2%;bottom:-.06em;width:104%;height:.26em;overflow:visible} .hs-line path{fill:none;stroke:#e9c27a;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(233,194,122,.45));vector-effect:non-scaling-stroke} .ht-l2.hs-play .hs-word{animation:hsWrite 1.5s cubic-bezier(.55,.08,.35,1) forwards} .ht-l2.hs-play .hs-nib{animation:hsNib 1.5s cubic-bezier(.55,.08,.35,1) forwards} .ht-l2.hs-play .hs-line path{animation:hsLine .7s cubic-bezier(.6,.1,.3,1) 1.45s forwards} .ht-l2.hs-done .hs-word{clip-path:none;animation:none} .ht-l2.hs-done .hs-line path{stroke-dashoffset:0;animation:none} .ht-l2.hs-done .hs-nib{display:none} @keyframes hsWrite{0%{clip-path:inset(-20% 100% -20% -4%)}100%{clip-path:inset(-20% -4% -20% -4%)}} @keyframes hsNib{0%{left:0;opacity:0}6%{opacity:1}22%{top:40%}40%{top:68%}60%{top:44%}80%{top:66%}94%{opacity:1}100%{left:100%;top:56%;opacity:0}} @keyframes hsLine{to{stroke-dashoffset:0}} /* ตัวอย่างเดิม 3 ใบถูกแทนด้วยตัวอย่างสด */ .hero.hx-wow .hx-row{display:none !important} /* (1) ตัวอย่างสด */ .hx-live{position:relative;z-index:6;width:min(100%,380px);margin:22px auto 0;padding:12px;border-radius:22px;text-align:left;font-family:Prompt,Sarabun,sans-serif; background:linear-gradient(160deg,rgba(28,26,22,.86),rgba(14,14,16,.9));border:1px solid rgba(233,194,122,.22);box-shadow:0 30px 60px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hx-live.side{position:absolute;right:max(3.5vw,calc((100vw - 1320px)/2));width:340px;margin:0} .hxl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 10px} .hxl-live{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 Prompt,sans-serif;color:#fca5a5;letter-spacing:.02em} .hxl-live i{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:hxlPulse 1.8s infinite} .hxl-tabs{display:flex;gap:4px;padding:3px;border-radius:99px;background:rgba(255,255,255,.06)} .hxl-tabs button{min-height:0 !important;height:auto !important;padding:5px 10px;border:0;border-radius:99px;background:transparent;color:#a8a29e;font:500 12px/1.2 Prompt,sans-serif;cursor:pointer} .hxl-tabs button::before,.hxl-tabs button::after{display:none !important} .hxl-tabs button.on{background:#f5ead6;color:#2a2116} .hxl-paper{position:relative;display:block;width:100%;min-height:0 !important;height:auto !important;padding:16px 16px 12px;border:0;border-radius:10px;overflow:hidden;cursor:pointer;text-align:left; background:#fbf8f1;color:#2a2620;box-shadow:0 14px 28px -16px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.06);transition:transform .3s cubic-bezier(.2,.9,.3,1.2),opacity .3s} .hxl-paper::before,.hxl-paper::after{display:none !important} .hxl-paper:hover{transform:translateY(-2px) rotate(-.4deg)} .hx-live.out .hxl-paper{opacity:0;transform:translateY(8px) scale(.98)} .hxl-h{display:block;margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid #e3dccd;text-align:center;font:600 13.5px/1.3 Taviraj,Prompt,serif;color:#1e1a14} .hxl-lines{display:flex;flex-direction:column;gap:3px} .hxl-ln{position:relative;display:flex;align-items:center;gap:6px;min-height:22px;font:400 11.5px/1.5 Sarabun,Prompt,sans-serif;color:#8a8273;transition:color .25s} .hxl-ln.seen{color:#3a342a} .hxl-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-image:linear-gradient(transparent 58%,var(--hl,rgba(250,214,80,.7)) 58%,var(--hl,rgba(250,214,80,.7)) 92%,transparent 92%);background-repeat:no-repeat;background-size:0 100%;transition:background-size .45s ease} .hxl-ln.r-h{--hl:rgba(248,113,113,.38)}.hxl-ln.r-c{--hl:rgba(250,204,21,.5)}.hxl-ln.r-l{--hl:rgba(96,165,250,.35)} .hxl-ln.hit .hxl-tx{background-size:100% 100%} .hxl-st{flex:none;padding:2px 7px;border-radius:5px;font:700 10px/1.3 Prompt,sans-serif;font-style:normal;color:#fff;transform:scale(2.2) rotate(-14deg);opacity:0;transition:transform .32s cubic-bezier(.3,1.7,.5,1),opacity .15s; border:1.5px solid currentColor;background:transparent} .hxl-ln.r-h .hxl-st{color:#dc2626}.hxl-ln.r-c .hxl-st{color:#b45309}.hxl-ln.r-l .hxl-st{color:#2563eb} .hxl-ln.hit .hxl-st{transform:rotate(-6deg);opacity:1} .hxl-scan{position:absolute;left:0;right:0;top:0;height:40px;margin-top:-40px;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent,rgba(52,211,153,.14) 70%,rgba(52,211,153,.5) 96%,transparent);border-bottom:2px solid #34d399;filter:drop-shadow(0 0 6px rgba(52,211,153,.7))} .hx-live.scan .hxl-scan{animation:hxlScan var(--scan,3s) linear .25s both} .hx-live.done .hxl-scan{opacity:0;animation:none} .hxl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 2px 0} .hxl-cnt{font:500 13px/1.2 Prompt,sans-serif;color:#d6d3d1} .hxl-cnt em{display:inline-block;min-width:.7em;font-style:normal;font-weight:700;color:#fca5a5} .hxl-cnt.pop em{animation:vcPop .3s cubic-bezier(.3,1.8,.5,1)} .hxl-go{min-height:40px !important;height:auto !important;padding:0 14px;border:0;border-radius:12px;background:linear-gradient(135deg,#34d399,#22d3ee);color:#04281b;font:700 13px/1 Prompt,sans-serif;cursor:pointer;box-shadow:0 8px 20px -10px rgba(52,211,153,.9)} .hxl-go::before,.hxl-go::after{display:none !important} .hxl-go b{display:inline-block;transition:transform .2s} .hxl-go:hover b{transform:translateX(3px)} .hx-live.done .hxl-go{animation:hxlNudge 1.6s ease-in-out .3s 2} .hxl-note{margin:8px 2px 0;font:400 11px/1.4 Prompt,sans-serif;color:#78716c} @keyframes hxlScan{0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:100%;opacity:0}} @keyframes hxlPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}} @keyframes hxlNudge{0%,100%{transform:none}40%{transform:translateY(-2px) scale(1.04)}} /* (3) ป้ายจุดเสี่ยงข้างแว่นขยาย */ .hx-tip{position:absolute;left:0;top:0;z-index:7;max-width:250px;padding:9px 12px 10px;border-radius:12px;pointer-events:none;font-family:Prompt,Sarabun,sans-serif; background:rgba(20,16,14,.92);border:1px solid rgba(248,113,113,.45);box-shadow:0 14px 30px -12px rgba(0,0,0,.9);opacity:0;transition:opacity .2s,transform .18s ease-out} .hx-tip.on{opacity:1} .hx-tip b{display:block;font:600 13px/1.35 Prompt,sans-serif;color:#fca5a5} .hx-tip span{display:block;margin-top:2px;font:400 12px/1.45 Prompt,sans-serif;color:#e7e5e4} .hx-hunt{position:absolute;left:50%;bottom:22px;z-index:6;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;transform:translate(-50%,8px);opacity:0;pointer-events:none; background:rgba(20,18,16,.78);border:1px solid rgba(233,194,122,.28);font:500 12px/1.2 Prompt,sans-serif;color:#e7d3ad;transition:opacity .4s,transform .4s} .hx-hunt.on{opacity:1;transform:translate(-50%,0)} .hx-hunt i{width:14px;height:14px;border-radius:50%;border:2px solid #e9c27a;position:relative} .hx-hunt i::after{content:"";position:absolute;right:-5px;bottom:-5px;width:6px;height:2px;background:#e9c27a;transform:rotate(45deg)} .hx-hunt.got{border-color:rgba(248,113,113,.45);color:#fecaca} @media (min-width:768px){.hx-hunt{left:auto;right:auto;left:24%;bottom:40px}} @media (max-width:767px){ .hx-hunt{bottom:auto;top:calc(var(--hd,64px) + 6px)} /* (ข) หัวเว็บแถวเดียว: โลโก้ · ปุ่มเข้าสู่ระบบเล็ก · ตรวจสัญญา */ html.vc-art .site-header .topbar{flex-wrap:nowrap !important;align-items:center !important;gap:8px !important;padding-top:10px !important;padding-bottom:10px !important;min-height:0 !important} html.vc-art .site-header .brand{flex:1 1 auto;min-width:0} html.vc-art .site-header .brand-name{font-size:15px !important;letter-spacing:.06em !important;white-space:nowrap} html.vc-art .site-header .dx-nav{order:3;display:flex !important;flex:none;gap:0 !important;margin:0 !important;padding:0 !important;width:auto !important} html.vc-art .site-header .dx-nav a:not([href="#checkCard"]){display:none !important} html.vc-art .site-header .dx-nav a[href="#checkCard"]{display:inline-flex !important;align-items:center;min-height:38px !important;height:38px !important;padding:0 14px !important;border-radius:99px !important;font-size:13.5px !important;white-space:nowrap;margin:0 !important} html.vc-art .site-header .auth-toggle{order:2;flex:none;min-height:38px !important;height:38px !important;padding:0 12px !important;font-size:13px !important;border-radius:99px !important;white-space:nowrap;margin:0 !important} .hs-word{font-size:1.24em} .hx-live{margin-top:20px} } @media (prefers-reduced-motion:reduce){.hxl-live i,.hx-live .hxl-go{animation:none !important}} html[data-calm] .hxl-live i{animation:none} /* v228 แก้: ข้อความใต้ตัวอย่างสด · ป้ายส่องแว่น · หัวเว็บมือถือ */ html.vc-art .hero .hx-live .hxl-note{font:400 11px/1.45 Prompt,sans-serif !important;color:#78716c !important;margin:8px 2px 0 !important;max-width:none !important} @media (min-width:768px){.hx-hunt{left:50%;bottom:auto;top:calc(var(--hd,72px) + 18px)}} @media (max-width:767px){ html.vc-art .site-header .topbar{display:flex !important;justify-content:space-between !important} html.vc-art .site-header .brand{position:static !important;transform:none !important;flex:1 1 auto !important;justify-content:flex-start !important} html.vc-art .site-header .brand-name{position:static !important;transform:none !important} html.vc-art .site-header .auth-toggle{position:static !important;transform:none !important} } @media (max-width:767px){ html.vc-art body .site-header .topbar .brand{flex:1 1 auto !important;min-width:max-content !important;width:auto !important} html.vc-art body .site-header .topbar .dx-nav{flex:0 0 auto !important;width:auto !important;max-width:none !important;inset:auto !important;position:static !important} html.vc-art body .site-header .topbar .dx-nav a[href="#checkCard"]{position:static !important} } @media (max-width:767px){.hx-hunt{white-space:nowrap;font-size:11.5px;padding:6px 11px;max-width:calc(100vw - 32px)}} /* ===== v230 หน้าแรกรอบ 2: แก้บน iPhone จริง + แตะตรา + วางสัญญาเอง + ปุ่มติดล่าง ===== */ /* (5) ตราแตะได้ */ .hxl-ln.hit .hxl-st{pointer-events:auto;cursor:pointer;position:relative} .hxl-ln.hit .hxl-st::after{content:"";position:absolute;inset:-9px -6px} .hxl-ln.hit .hxl-st:hover,.hxl-ln.hit .hxl-st:focus-visible{background:currentColor;outline:none} .hxl-ln.hit .hxl-st:hover,.hxl-ln.hit .hxl-st:focus-visible{-webkit-text-fill-color:#fff} .hx-live.done:not(.held) .hxl-ln.hit .hxl-st{animation:hxlTapme 2.4s ease-in-out .6s 1} @keyframes hxlTapme{0%,100%{transform:rotate(-6deg)}20%{transform:rotate(-6deg) scale(1.14)}40%{transform:rotate(-6deg)}} .hxl-note b{font-weight:600;color:#d6c3a0} .hxl-pop{position:absolute;left:10px;right:10px;top:46px;z-index:5;padding:14px 14px 12px;border-radius:14px;background:#1b1714;border:1px solid rgba(233,194,122,.3); box-shadow:0 24px 50px -18px rgba(0,0,0,.95);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .2s,transform .22s cubic-bezier(.2,.9,.3,1.2);font-family:Prompt,Sarabun,sans-serif;text-align:left} .hxl-pop.on{opacity:1;transform:none} .hxl-pop.r-h{border-color:rgba(248,113,113,.5)}.hxl-pop.r-c{border-color:rgba(251,191,36,.45)}.hxl-pop.r-l{border-color:rgba(96,165,250,.45)} .hxl-pl{display:block;font:600 11.5px/1.3 Prompt,sans-serif;letter-spacing:.02em;color:#a8a29e;padding-right:30px} .hxl-pop.r-h .hxl-pl{color:#fca5a5}.hxl-pop.r-c .hxl-pl{color:#fcd34d}.hxl-pop.r-l .hxl-pl{color:#93c5fd} .hxl-pt{display:block;margin:4px 0 8px;padding-right:24px;font:600 15px/1.4 Prompt,sans-serif;color:#f5f5f4} html.vc-art .hero .hx-live .hxl-pop p{margin:0 0 8px !important;font:400 13px/1.55 Sarabun,Prompt,sans-serif !important;color:#d6d3d1 !important;max-width:none !important;text-align:left !important} .hxl-pop p em{display:block;font-style:normal;font:600 11px/1.3 Prompt,sans-serif;color:#a8a29e;margin-bottom:1px} .hxl-x{position:absolute;top:6px;right:6px;width:34px;height:34px;min-height:0 !important;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#e7e5e4;font:400 20px/1 Prompt,sans-serif;cursor:pointer} .hxl-x::before,.hxl-x::after,.hxl-pgo::before,.hxl-pgo::after,.hxl-own-go::before,.hxl-own-go::after{display:none !important} .hxl-pgo{width:100%;min-height:42px !important;height:auto !important;margin-top:2px;border:0;border-radius:11px;background:linear-gradient(135deg,#34d399,#22d3ee);color:#04281b;font:700 13.5px/1 Prompt,sans-serif;cursor:pointer} /* (2) วางสัญญาของตัวเอง */ .hxl-own{position:relative;display:flex;gap:8px;align-items:stretch;margin:10px 0 0} .hxl-own textarea{flex:1;min-width:0;height:44px;min-height:44px;max-height:44px;padding:11px 14px;border-radius:12px;border:1px dashed rgba(233,194,122,.38);background:rgba(255,255,255,.04);color:#f5f5f4; font:400 16px/1.35 Prompt,Sarabun,sans-serif;resize:none;overflow:hidden;transition:max-height .25s,height .25s,border-color .2s,background .2s} .hxl-own textarea::placeholder{color:#b8a98d} .hxl-own textarea:focus{outline:none;border-style:solid;border-color:#e9c27a;background:rgba(255,255,255,.07)} .hx-live.own-on .hxl-own textarea{height:96px;max-height:96px;overflow:auto} .hxl-own-go{flex:none;align-self:flex-end;min-height:44px !important;height:44px !important;padding:0 14px;border:0;border-radius:12px;background:#f5ead6;color:#2a2116;font:700 13.5px/1 Prompt,sans-serif;cursor:pointer;white-space:nowrap} .hxl-own-go[hidden]{display:none} /* (8) ปุ่มติดล่างจอ */ .vc-stick{display:none} @media (max-width:767px){ .vc-stick{position:fixed;left:16px;right:16px;bottom:calc(var(--nb,0px) + 10px + (var(--nb,0px) > 0px ? 0px : env(safe-area-inset-bottom)));z-index:45;display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:16px; background:linear-gradient(135deg,#f7ecd6,#e9c27a);color:#21190f;font:700 15.5px/1 Prompt,sans-serif;text-decoration:none;box-shadow:0 16px 34px -14px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.25) inset; opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.2)} .vc-stick{bottom:calc(var(--nb,0px) + 10px)} .vc-stick.on{opacity:1;transform:none;pointer-events:auto} .vc-stick b{transition:transform .2s}.vc-stick:active b{transform:translateX(3px)} } @media (max-width:767px){ /* (ก) ข้อความพื้นหลังจางลงมาก + เว้นแถบบนสุดและกลางจอ */ html.vc-art .hero .hx-base{color:rgba(236,226,206,.016) !important} html.vc-art .hero .hx-base b{color:rgba(255,170,140,.03) !important} html.vc-art .hero .hx-lit{color:rgba(244,232,210,.16) !important} html.vc-art .hero .hx-lit b{color:rgba(255,181,154,.45) !important} html.vc-art .hero .hx-base{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 120px,#000 220px);mask-image:linear-gradient(180deg,transparent 0,transparent 120px,#000 220px)} /* (ข) ปุ่มเริ่มตรวจ: ลูกศรอยู่ในปุ่ม ไม่ล้น */ html.vc-art .hero .dx-cta-row{gap:10px !important} html.vc-art .hero .dx-cta-row .dx-cta,html.vc-art .hero .dx-cta-row .dx-cta-ghost{padding:13px 16px !important;font-size:15px !important;white-space:nowrap;min-width:0;justify-content:center;display:inline-flex !important;align-items:center} html.vc-art .hero .dx-cta-row .dx-cta::after{position:static !important;margin-left:.35em !important;flex:none} /* (1)+(ค) จอแรกกระชับ: หัวข้อเล็กลง ตัวอย่างสดขึ้นมาอยู่ใต้หัวข้อทันที */ html.vc-art .hero .dx-pill{display:none !important} html.vc-art .hero .hero-title{font-size:clamp(40px,11.5vw,50px) !important;line-height:1.08 !important;margin:0 !important} html.vc-art .hero .hero-main{padding-top:calc(var(--hd,58px) + 14px) !important} html.vc-art .hero{min-height:0 !important;padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important} .hx-live{margin:16px auto 18px !important;padding:10px !important} .hxl-paper{padding:12px 12px 9px !important} .hxl-h{font-size:13px !important;margin-bottom:5px !important;padding-bottom:5px !important} .hxl-ln{min-height:20px !important;font-size:11px !important} .hxl-top{margin-bottom:8px !important} html.vc-art .hero .hero-lead{font-size:14.5px !important;margin-top:4px !important} /* (ง) ป้ายส่องแว่น: ไม่ลอยติดหัวเว็บ — ย้ายไปล่างสุดของฉาก ตัวเล็ก จางกว่า */ .hx-hunt{top:auto !important;bottom:calc(76px + env(safe-area-inset-bottom)) !important;background:rgba(20,18,16,.55) !important;border-color:rgba(233,194,122,.18) !important;font-size:11px !important;padding:5px 10px !important} .hx-hunt i{width:11px;height:11px;border-width:1.5px} } @media (max-width:767px){ html.vc-art body main > .hero{padding-top:calc(var(--hd,58px) + 18px) !important} html.vc-art body main > .hero .hero-main{padding-top:0 !important} html.vc-art body main > .hero .hero-copy .dx-pill{display:inline-block !important;margin:0 auto 6px !important;font-size:10.5px !important} } /* มือถือ: หน้าแรกเลื่อนได้ (เดิมล็อกไว้ 1 จอ ทำให้ตัวอย่างสดโดนแถบเมนูล่างตัด) */ @media (max-width:767px){ html.vc-spa[data-view="home"],html.vc-spa[data-view="home"] body{overflow-x:hidden !important;overflow-y:auto !important;height:auto !important} html.vc-spa[data-view="home"] main > .hero{height:auto !important;min-height:100svh !important} } /* กันฉากเลื่อนแนวนอนเองเมื่อแตะช่องวาง/ตรา (overflow:hidden ยังเลื่อนด้วยโค้ดได้ → ใช้ clip) */ html.vc-art main > .hero{overflow:clip} @supports not (overflow:clip){html.vc-art main > .hero{overflow:hidden}} /* ป้ายแว่นขยายอยู่ใต้การ์ดตัวอย่างสด ไม่ทับแผ่นอธิบาย */ .hx-tip{z-index:5} .hero:has(.hx-live.held) :is(.hx-lens,.hx-pool,.hx-tip){opacity:0 !important} /* จอ 768–1199: ตัวอย่างสดอยู่ใต้ปุ่ม จึงให้หน้าแรกเลื่อนได้ (เดิมล็อก 1 จอ ทำให้การ์ดโดนตัด) */ @media (min-width:768px) and (max-width:1199px){ html.vc-spa[data-view="home"],html.vc-spa[data-view="home"] body{overflow-x:hidden !important;overflow-y:auto !important;height:auto !important} html.vc-spa[data-view="home"] main > .hero{height:auto !important;min-height:100svh !important;padding-bottom:48px !important} } /* จอกว้างแต่เตี้ย: การ์ดด้านขวากระชับลง */ @media (min-width:1200px) and (max-height:820px){ .hx-live.side .hxl-note{display:none} .hx-live.side .hxl-ln{min-height:19px} .hx-live.side .hxl-own textarea{height:40px;min-height:40px;max-height:40px;padding:9px 12px} .hx-live.side.own-on .hxl-own textarea{height:72px;max-height:72px} } /* ===== v231 หน้าแรกรอบ 3 ===== */ /* (ง) คำใบ้แตะตรา อยู่มุมล่างของกระดาษ โผล่ตอนสแกนจบ */ .hxl-hint{position:absolute;right:10px;bottom:6px;font:600 10.5px/1 Prompt,sans-serif;font-style:normal;color:#a16207;background:#fdf3d7;border:1px solid #f1d68f;border-radius:99px;padding:4px 8px;opacity:0;transform:translateY(4px);transition:opacity .3s .5s,transform .3s .5s;pointer-events:none} .hx-live.done:not(.held) .hxl-hint{opacity:1;transform:none} .hxl-paper{padding-bottom:26px !important} html.vc-art .hero .hx-live .hxl-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center !important} /* (2) เข็มวัดความเสี่ยง */ .hxl-foot{gap:10px} .hxl-meter{flex:none;width:56px;height:33px;display:block} .hxl-meter svg{display:block;width:100%;height:100%;overflow:visible} .hxm-trk,.hxm-arc{fill:none;stroke-width:9;stroke-linecap:round} .hxm-trk{stroke:rgba(255,255,255,.1)} .hxm-arc{stroke:url(#hxlG);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,0));transition:stroke-dashoffset .5s cubic-bezier(.3,1.4,.5,1)} .hxm-ndl{transform-origin:50px 52px;transform:rotate(calc(-90deg + var(--f,0) * 180deg));transition:transform .55s cubic-bezier(.3,1.6,.5,1)} .hxm-ndl line{stroke:#f5f5f4;stroke-width:3.5;stroke-linecap:round} .hxm-ndl circle{fill:#f5f5f4} .hxl-cnt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .hxl-lv{display:block;font:600 11.5px/1.2 Prompt,sans-serif;opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hxl-lv.on{opacity:1;transform:none} .hxl-lv.r-h{color:#fca5a5}.hxl-lv.r-c{color:#fcd34d}.hxl-lv.r-l{color:#93c5fd} /* (3) พลิกหน้ากระดาษ */ .hx-live{perspective:1100px} .hx-live .hxl-paper{transform-origin:left center;backface-visibility:hidden} .hx-live.out .hxl-paper{opacity:0 !important;transform:rotateY(-95deg) !important;transition:transform .42s cubic-bezier(.55,0,.8,.4),opacity .25s .2s !important} .hxl-paper.flipin{animation:hxlFlipIn .6s cubic-bezier(.2,.8,.25,1.05) both} @keyframes hxlFlipIn{0%{transform:rotateY(75deg);opacity:0;filter:brightness(.6)}55%{opacity:1}100%{transform:none;opacity:1;filter:none}} .hxl-paper.flipin:hover{transform:none} /* (1) แถบเทียบ ก่อน/หลัง */ .hxl-cmp{position:relative;margin:2px 0 4px;border-radius:12px;overflow:hidden;min-height:96px;background:#fbf8f1;color:#2a2620;isolation:isolate;touch-action:pan-y} .hxl-cmp > div{padding:10px 12px 12px;font:400 13px/1.5 Sarabun,Prompt,sans-serif} .hxl-cmp em{display:block;font:700 10.5px/1.3 Prompt,sans-serif;font-style:normal;letter-spacing:.02em;margin-bottom:3px} .hxc-a em{color:#b91c1c} .hxc-a span{background:linear-gradient(transparent 60%,rgba(248,113,113,.3) 60%)} .hxc-b{position:absolute;inset:0;background:#ecfdf5;color:#064e3b;clip-path:inset(0 calc(100% - var(--v) * 1%) 0 0)} .hxc-b em{color:#047857} .hxc-hd{position:absolute;top:0;bottom:0;left:calc(var(--v) * 1%);width:2px;margin-left:-1px;background:#10b981;pointer-events:none;z-index:2} .hxc-hd b{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#10b981;box-shadow:0 4px 12px rgba(0,0,0,.3)} .hxc-hd b::before{content:"‹ ›";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 13px/1 Prompt,sans-serif;letter-spacing:2px} .hxl-cmp input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none} .hxl-cmp:has(input:focus-visible){outline:2px solid #10b981;outline-offset:2px} html.vc-art .hero .hx-live .hxl-pop p.hxc-tip{margin:0 0 8px !important;font:500 11px/1.3 Prompt,sans-serif !important;color:#78716c !important;text-align:center !important} .hxl-pop{max-height:calc(100% - 52px);overflow:auto;overscroll-behavior:contain} /* (ค) ชิปแว่นบนมือถือ: อยู่ในเนื้อหา */ @media (max-width:767px){ .hx-hunt.flow{position:static !important;transform:none !important;margin:14px auto 0 !important;width:fit-content;opacity:.0;transition:opacity .4s} .hx-hunt.flow.on{opacity:1} .hero.hx-holding .hx-hunt.flow{border-color:rgba(233,194,122,.5) !important} /* (ข) ใต้หัวเว็บไม่มีตัวหนังสือแว่นโผล่ */ html.vc-art .hero :is(.hx-pool,.hx-lens){-webkit-mask-image:none} html.vc-art .hero .hx-tip{max-width:220px} } /* (จ)+(5) การ์ดความน่าเชื่อถือ */ html.vc-art .hero .dx-points.tp-cards{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px !important;border-top:0 !important;padding:18px 0 0 !important;max-width:1080px;margin:0 auto !important;width:100%} html.vc-art .hero .dx-points.tp-cards li{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px !important;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(233,194,122,.16);color:#a8a29e;font-size:12.5px !important;line-height:1.45;text-align:left; opacity:0;transform:translateY(14px);transition:opacity .5s calc(var(--i) * .12s),transform .6s cubic-bezier(.2,.9,.3,1.15) calc(var(--i) * .12s),border-color .3s} html.vc-art .hero .dx-points.tp-cards li::before{display:none !important} html.vc-art .hero .dx-points.tp-cards.tp-in li{opacity:1;transform:none} html.vc-art .hero .dx-points.tp-cards li:hover{border-color:rgba(233,194,122,.4)} .tp-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:radial-gradient(circle at 30% 25%,rgba(233,194,122,.28),rgba(233,194,122,.06));border:1px solid rgba(233,194,122,.25)} .tp-ic svg{width:22px;height:22px;fill:none;stroke:#e9c27a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .tp-ic svg *{stroke-dasharray:80;stroke-dashoffset:80} .tp-in .tp-ic svg *{animation:tpDraw 1.1s ease-out forwards;animation-delay:calc(var(--i) * .12s + .25s)} @keyframes tpDraw{to{stroke-dashoffset:0}} .tp-tx{min-width:0} .tp-tx b{display:block;font:600 13.5px/1.3 Prompt,sans-serif;color:#f1e6d0;margin-bottom:1px} .tp-tx span{display:block} @media (min-width:1200px){html.vc-art .hero .dx-points.tp-cards li{padding:10px 12px !important}.tp-ic{width:36px;height:36px}} @media (max-width:767px){ html.vc-art .hero .dx-points.tp-cards{grid-template-columns:1fr;gap:10px !important;padding:22px 2px 0 !important} html.vc-art .hero .dx-points.tp-cards li{font-size:12.5px !important} } html[data-calm] .tp-ic svg *,.tp-cards.tp-in .tp-ic svg *{} @media (prefers-reduced-motion:reduce){.tp-ic svg *{stroke-dashoffset:0 !important;animation:none !important}html.vc-art .hero .dx-points.tp-cards li{opacity:1;transform:none;transition:none}.hxl-paper.flipin{animation:none}} html[data-calm] .tp-ic svg *{stroke-dashoffset:0;animation:none} .hxl-cnt{display:block !important} .hxl-lv{margin-top:3px} .hxl-cmp{display:grid} .hxl-cmp > .hxc-a,.hxl-cmp > .hxc-b{grid-area:1/1;position:relative;inset:auto} .hxl-cmp > .hxc-b{z-index:1} /* ===== v232 กระดาษตัวอย่างแบบเอกสารจริง ===== */ /* (ก) แตะค้างในฉากไม่เลือกข้อความ/ไม่เด้งเมนู iOS (ยกเว้นช่องพิมพ์) */ @media (max-width:767px){ html.vc-art main > .hero,html.vc-art main > .hero *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} html.vc-art main > .hero :is(input,textarea){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} } /* (1) ปึกกระดาษ + คลิป */ .hxl-stack{position:relative;margin-top:4px} .hxl-stack::before,.hxl-stack::after{content:"";position:absolute;inset:0;border-radius:6px;background:#efe6d4;box-shadow:0 10px 22px -14px rgba(0,0,0,.9)} .hxl-stack::before{transform:rotate(-2.2deg) translate(-3px,4px);background:#e9dfca} .hxl-stack::after{transform:rotate(1.6deg) translate(3px,3px)} .hxl-clip{position:absolute;z-index:4;top:-14px;left:26px;width:13px;height:34px;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))} .hxl-clip svg{display:block;width:100%;height:100%;fill:none;stroke:#d8b46a;stroke-width:2.6;stroke-linecap:round} html.vc-art .hx-live .hxl-paper{position:relative;z-index:1;border-radius:6px !important;padding:16px 16px 12px 22px !important;color:#2a2620; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 30% 0%,#fffdf6 0%,#f8f1e2 70%,#f1e7d2 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 30px -18px rgba(0,0,0,.95),0 0 0 1px rgba(90,70,40,.12) !important} .hxl-curl{position:absolute;right:0;bottom:0;width:26px;height:26px;pointer-events:none;background:linear-gradient(135deg,transparent 49%,#e2d5ba 50%,#f6eedd 78%,#fffaf0 100%);border-top-left-radius:6px;box-shadow:-3px -3px 6px -3px rgba(80,60,30,.35)} .hxl-wm{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-22deg);font:700 54px/1 Taviraj,Prompt,serif;letter-spacing:.18em;color:rgba(170,135,80,.075);pointer-events:none;white-space:nowrap} /* (2) หัวกระดาษแบบสัญญาไทย */ html.vc-art .hx-live .hxl-h{font:700 15px/1.3 Taviraj,Prompt,serif !important;letter-spacing:.02em;border-bottom:0 !important;margin:2px 0 2px !important;padding:0 !important;color:#1e1a14} .hxl-meta{display:block;text-align:center;margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid rgba(120,95,55,.22);font:400 9.5px/1.3 Sarabun,Prompt,sans-serif;color:#9a8e78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hxl-ln{padding-right:2px} .hxl-tx{position:relative;isolation:isolate;background-image:none !important;padding-left:1.6em;text-indent:-1.6em} .hxl-ln{font-family:Sarabun,Prompt,sans-serif !important} .hxl-mk{position:absolute;left:-14px;top:50%;margin-top:-.65em;font:800 13px/1 Prompt,sans-serif;font-style:normal;color:#dc2626;transform:rotate(10deg) scale(.4);opacity:0;transition:opacity .2s .25s,transform .3s cubic-bezier(.3,1.8,.5,1) .25s} .hxl-ln.hit .hxl-mk{opacity:1;transform:rotate(10deg)} /* (3) ปากกาไฮไลต์จริง: ลากซ้าย→ขวา ขอบเบี้ยว สีซ้อนแบบหมึก */ .hxl-tx::before{content:"";position:absolute;z-index:-1;left:-3px;top:38%;height:56%;width:0;border-radius:3px 9px 4px 10px / 6px 4px 8px 5px;transform:skewX(-10deg) rotate(-.6deg); background:linear-gradient(180deg,rgba(255,255,255,0) 0,var(--hl) 18%,var(--hl) 82%,rgba(255,255,255,0) 100%),linear-gradient(90deg,var(--hl) 0,transparent 3%,transparent 97%,var(--hl) 100%);opacity:.95;mix-blend-mode:multiply;transition:width .55s cubic-bezier(.45,.05,.3,1)} .hxl-ln.r-h{--hl:rgba(255,120,120,.55)}.hxl-ln.r-c{--hl:rgba(255,214,60,.62)}.hxl-ln.r-l{--hl:rgba(120,180,255,.45)} .hxl-ln.hit .hxl-tx::before{width:calc(100% + 4px)} /* (4) ตรายางเหมือนจริง: ขอบสองชั้น หมึกไม่เต็ม ปั๊มแล้วเด้ง */ .hxl-st{z-index:2;position:relative;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:3px;border-width:1.6px !important;border-radius:4px !important; box-shadow:inset 0 0 0 1.6px #fbf6ea,inset 0 0 0 2.6px currentColor;padding:2px 8px !important;letter-spacing:.01em;text-shadow:0 0 .6px currentColor} .hxl-st::before{content:"";position:absolute;inset:0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .98 0 0 0 0 .965 0 0 0 0 .93 4 0 0 0 -2.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") center/90px 40px} .hxl-ln.hit .hxl-st{animation:hxlStamp .45s cubic-bezier(.3,1.5,.5,1)} @keyframes hxlStamp{0%{transform:scale(1.8) rotate(-15deg);opacity:0}55%{transform:scale(.9) rotate(-5deg);opacity:1}78%{transform:scale(1.05) rotate(-6.5deg)}100%{transform:rotate(-6deg);opacity:1}} .hxl-scan{z-index:1} /* (7) ลงชื่อ + ปากกา + ตรา "อ่านก่อนเซ็น!" */ .hxl-sign{position:relative;display:flex;gap:16px;margin:10px 0 2px;padding:0 4px} .hxs{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;font:400 9.5px/1 Sarabun,Prompt,sans-serif;color:#6f6553} .hxs::before{content:"ลงชื่อ";flex:none} .hxs i{flex:1;height:14px;border-bottom:1px dotted #8f846f} .hxs em{flex:none;font-style:normal} .hxl-pen{position:absolute;right:16%;bottom:2px;width:96px;height:20px;pointer-events:none;transform-origin:4% 50%;opacity:0;transform:translate(110px,-34px) rotate(-34deg);transition:transform .75s cubic-bezier(.2,.9,.25,1),opacity .3s;filter:drop-shadow(2px 5px 3px rgba(0,0,0,.3))} .hxl-pen svg{display:block;width:100%;height:100%} .hxl-pen .pb{fill:#1d1b18}.hxl-pen .pc{fill:#d8b46a}.hxl-pen .pn{fill:#c9a24a}.hxl-pen .pt{fill:#2a2840} .hx-live.pen .hxl-pen{opacity:1;transform:translate(0,-6px) rotate(-16deg);animation:hxlBob 1.1s ease-in-out .75s infinite} .hx-live.slam .hxl-pen{opacity:0;transform:translate(70px,-40px) rotate(-38deg);animation:none;transition:transform .45s ease-in,opacity .3s .1s} @keyframes hxlBob{0%,100%{transform:translate(0,-6px) rotate(-16deg)}50%{transform:translate(-3px,-2px) rotate(-14deg)}} .hxl-bigst{position:absolute;left:50%;top:50%;z-index:3;padding:4px 12px 5px;border:2px solid currentColor;border-radius:6px;color:#c3262e;font:800 15px/1 Prompt,sans-serif;font-style:normal;letter-spacing:.03em;white-space:nowrap;pointer-events:none; box-shadow:inset 0 0 0 2px #fbf6ea,inset 0 0 0 3.2px currentColor;transform:translate(-50%,-50%) rotate(-8deg) scale(2.3);opacity:0;mix-blend-mode:multiply;overflow:hidden} .hxl-bigst::before{content:"";position:absolute;inset:0;background:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .98 0 0 0 0 .965 0 0 0 0 .93 4 0 0 0 -2.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") center/120px 40px} .hx-live.slam .hxl-bigst{opacity:.92;transform:translate(-50%,-50%) rotate(-8deg);animation:hxlSlam .5s cubic-bezier(.3,1.5,.5,1)} @keyframes hxlSlam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.3)}55%{opacity:.95;transform:translate(-50%,-50%) rotate(-7deg) scale(.9)}80%{transform:translate(-50%,-50%) rotate(-8.5deg) scale(1.05)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(-8deg)}} .hx-live.slam .hxl-stack{animation:hxlThud .32s ease-out .14s} @keyframes hxlThud{0%,100%{transform:none}40%{transform:translateY(2px) scale(.995)}} .hx-live.done:not(.held) .hxl-hint{opacity:0} .hx-live.slam:not(.held) .hxl-hint{opacity:1} .hxl-hint{bottom:auto;top:8px;right:8px} /* (ข) พลิกหน้า: ไม่พึ่ง fill/backface/filter (iOS เคยค้างล่องหน) */ .hx-live .hxl-paper{backface-visibility:visible !important} .hxl-paper.flipin{animation:hxlFlipIn2 .6s cubic-bezier(.2,.8,.25,1.05) !important} @keyframes hxlFlipIn2{0%{transform:rotateY(70deg);opacity:.2}60%{opacity:1}100%{transform:none;opacity:1}} .hx-live.out .hxl-paper{transform:rotateY(-80deg) !important;opacity:.0 !important} @media (max-width:767px){ html.vc-art .hero .hx-live .hxl-note{display:none !important} html.vc-art .hx-live .hxl-paper{padding:13px 12px 10px 20px !important} .hxl-wm{font-size:46px} } @media (prefers-reduced-motion:reduce){.hx-live.pen .hxl-pen{animation:none}.hxl-ln.hit .hxl-st,.hx-live.slam .hxl-bigst,.hx-live.slam .hxl-stack{animation:none}} /* คำใบ้แตะตราแทนที่บรรทัด "ทำที่…" ตอนจบ ไม่ทับชื่อสัญญา */ .hxl-hint{top:37px !important;right:auto !important;left:50%;transform:translate(-50%,4px) !important;white-space:nowrap} .hx-live.slam:not(.held) .hxl-hint{transform:translate(-50%,0) !important} .hxl-meta{transition:opacity .3s} .hx-live.slam:not(.held) .hxl-meta{opacity:0} @media (max-width:767px){.hxl-hint{top:33px !important} /* (ค) ช่องว่างก่อนการ์ด 3 ใบ */ html.vc-art main > .hero .dx-points.tp-cards{margin-top:6px !important;padding-top:14px !important} html.vc-art main > .hero .hero-main{flex:0 0 auto !important} html.vc-art main > .hero{justify-content:flex-start !important} } /* ===== v233 ไฮไลต์ + ตราแบบใหม่ ===== */ /* (1)+(ข) คอลัมน์ตรากว้างเท่ากัน ทุกบรรทัดตัดคำตรงแนวเดียว */ .hx-live{--sc:92px} .hxl-ln{display:grid !important;grid-template-columns:minmax(0,1fr) var(--sc);align-items:center;column-gap:6px} .hxl-ln .hxl-tx{grid-column:1} .hxl-ln .hxl-st{grid-column:2;justify-self:center;max-width:100% !important;margin:0 !important} /* ตราพื้นฐาน */ .hxl-st{display:inline-flex !important;align-items:center;justify-content:center;gap:3px;width:100%;box-sizing:border-box;padding:2px 5px !important;font:700 10px/1.25 Prompt,sans-serif !important; border-width:1.2px !important;box-shadow:inset 0 0 0 1.3px #faf4e6,inset 0 0 0 2.1px currentColor !important;transform:rotate(var(--rot,-6deg)); filter:drop-shadow(0 .5px .4px color-mix(in srgb,currentColor 45%,transparent))} .hxl-st > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hxl-si{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .hxl-ln.hit .hxl-st{transform:rotate(var(--rot,-6deg));animation:hxlStamp2 .45s cubic-bezier(.3,1.5,.5,1)} @keyframes hxlStamp2{0%{transform:scale(1.8) rotate(calc(var(--rot,-6deg) - 9deg));opacity:0}55%{transform:scale(.9) rotate(calc(var(--rot,-6deg) + 1deg));opacity:1}78%{transform:scale(1.05) rotate(var(--rot,-6deg))}100%{transform:rotate(var(--rot,-6deg));opacity:1}} .hx-live.done:not(.held) .hxl-ln.hit .hxl-st{animation:hxlTap2 2.4s ease-in-out .6s 1} @keyframes hxlTap2{0%,40%,100%{transform:rotate(var(--rot,-6deg))}20%{transform:rotate(var(--rot,-6deg)) scale(1.12)}} /* (2) แบบตามระดับ: ตรวจละเอียด = ตรารีวงคู่แดง · ระวัง = สี่เหลี่ยมอำพัน · สังเกต = ป้ายน้ำเงิน */ .hxl-st.s-h{color:#c81e1e !important;border-radius:50% / 50% !important;padding:3px 7px !important;border-width:1.4px !important; box-shadow:inset 0 0 0 1.4px #faf4e6,inset 0 0 0 2.4px currentColor,0 0 0 0 transparent !important;letter-spacing:.01em} .hxl-st.s-c{color:#b45309 !important;border-radius:3px !important;border-style:solid !important} .hxl-st.s-l{color:#1d4ed8 !important;border-radius:99px !important;box-shadow:none !important;border-width:1px !important;background:rgba(59,130,246,.08) !important;font-weight:600 !important} .hxl-ln.hit .hxl-st:hover,.hxl-ln.hit .hxl-st:focus-visible{background:currentColor !important;-webkit-text-fill-color:#fff} .hxl-ln.hit .hxl-st:hover .hxl-si,.hxl-ln.hit .hxl-st:focus-visible .hxl-si{stroke:#fff} /* (3) ปากกาไฮไลต์: หัวปากกาวิ่งตามแถบ · ปลายแถบเข้มขึ้น */ .hxl-ln.r-h{--hl:rgba(255,110,110,.5);--hd:rgba(235,70,70,.7);--nb:#f87171} .hxl-ln.r-c{--hl:rgba(255,212,50,.6);--hd:rgba(240,180,0,.8);--nb:#facc15} .hxl-ln.r-l{--hl:rgba(110,170,255,.42);--hd:rgba(70,130,240,.6);--nb:#60a5fa} .hxl-tx::before{background:linear-gradient(90deg,var(--hd) 0,var(--hl) 6px,var(--hl) calc(100% - 9px),var(--hd) 100%) !important; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 80%,transparent 100%)} .hxl-tx::after{content:"";position:absolute;z-index:2;top:12%;left:0;width:7px;height:78%;border-radius:2px 2px 1px 1px;background:linear-gradient(180deg,var(--nb),color-mix(in srgb,var(--nb) 60%,#000));transform:skewX(-14deg);opacity:0;pointer-events:none;box-shadow:1px 1px 2px rgba(0,0,0,.25)} .hx-live.scan .hxl-ln.hit .hxl-tx::after{animation:hxlNib2 .55s cubic-bezier(.45,.05,.3,1)} @keyframes hxlNib2{0%{left:0;opacity:1}88%{opacity:1}100%{left:calc(100% - 6px);opacity:0}} /* (6) แถบอธิบายสี */ .hxl-key{display:flex;align-items:center;justify-content:center;gap:5px;margin:7px 0 0;font:500 9.5px/1 Prompt,Sarabun,sans-serif;color:#7a6f5c;white-space:nowrap} .hxl-key i{width:8px;height:8px;border-radius:50%;margin-left:6px} .hxl-key i:first-child{margin-left:0} .hxl-key .k-h{background:#ef4444}.hxl-key .k-c{background:#f59e0b}.hxl-key .k-l{background:#3b82f6} /* (ก) ปากกาจ่อที่เส้นลงชื่อ ไม่ทับข้อ 6 */ .hxl-pen{right:auto !important;left:20%;bottom:-2px !important;width:84px !important;height:17px !important;transform:translate(110px,-24px) rotate(-26deg)} .hx-live.pen .hxl-pen{transform:translate(0,2px) rotate(-7deg)} @keyframes hxlBob{0%,100%{transform:translate(0,2px) rotate(-7deg)}50%{transform:translate(-3px,-1px) rotate(-5deg)}} .hx-live.slam .hxl-pen{transform:translate(60px,-26px) rotate(-30deg)} @media (max-width:767px){ .hx-live{--sc:84px} .hxl-st{font-size:9.5px !important} .hxl-si{width:10px;height:10px} } @media (prefers-reduced-motion:reduce){.hxl-tx::after{display:none}} .hxl-hint{transition:opacity .15s,transform .15s !important} .hx-live.slam:not(.held) .hxl-hint{transition:opacity .3s .5s,transform .3s .5s !important} /* ===== v235 ผลตรวจแบบกว้าง (คอม ≥1024 · มือถือไม่แตะ) ===== */ .vc-ck-mini,.vc-rbar,.vc-cpane{display:none} @media (min-width:1024px){ /* (ข)+(1) ผังใหม่: แถบสัญญาเล็กด้านบน · ผลตรวจเต็มแถวด้านล่าง */ html.vc-art.vc-spa.vc-wide[data-view="desk"][data-desk="check"] main > #checkCard{grid-area:6 / 2 / 7 / 5 !important;margin-top:clamp(64px,8vh,90px) !important;padding:14px 18px !important} html.vc-art.vc-spa.vc-wide[data-view="desk"][data-desk="check"] main > #resultCard{grid-area:7 / 2 / 8 / 5 !important;margin:16px 0 48px !important;width:auto !important} html.vc-wide:not(.vc-ck-open) #checkCard > :not(.vc-ck-mini){display:none !important} html.vc-wide.vc-ck-open #checkCard{padding:22px 28px 26px !important} html.vc-wide.vc-ck-open #checkCard > .vc-ck-mini{margin-bottom:18px} html.vc-wide .vc-ck-mini:not([hidden]){display:flex;align-items:center;gap:14px} .vcm-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--k-line,rgba(255,255,255,.1))} .vcm-ic svg{width:20px;height:20px;fill:none;stroke:#d6d3d1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .vcm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-family:var(--k-ff,Prompt),sans-serif} .vcm-tx b{font:600 14.5px/1.3 var(--k-ff,Prompt),sans-serif;color:var(--k-tx,#ededef)} .vcm-meta{font-size:12.5px;color:var(--k-mu,#a3a3aa)} .vcm-edit{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px !important;height:auto !important;padding:0 16px !important;border-radius:11px !important;border:1px solid var(--k-line2,rgba(255,255,255,.16)) !important;background:rgba(255,255,255,.04) !important;color:var(--k-tx,#ededef) !important;font:500 13.5px/1 var(--k-ff,Prompt),sans-serif !important;cursor:pointer} .vcm-edit::before,.vcm-edit::after{display:none !important} .vcm-edit i{font-style:normal;transition:transform .2s} .vc-ck-open .vcm-edit i{transform:rotate(180deg)} /* (ก) ไม่มีแถบเลื่อนซ้อน */ html.vc-art.vc-wide[data-view="desk"][data-desk="check"] main > #resultCard{position:relative !important;top:auto !important;max-height:none !important;overflow:visible !important;padding:0 0 28px !important} html.vc-wide #resultCard{display:grid !important;grid-template-columns:minmax(0,1fr);column-gap:28px;align-items:start} html.vc-wide.vc-has-pane #resultCard{grid-template-columns:minmax(0,1fr) clamp(340px,30vw,440px)} html.vc-wide #resultCard > h2{display:none !important} html.vc-wide #resultCard > #result{grid-column:1;min-width:0;padding:0 0 0 30px} html.vc-wide:not(.vc-has-pane) #resultCard > #result{padding:0 30px;max-width:900px;justify-self:center;width:100%} /* (2) แถบหัวติดบน */ html.vc-wide .vc-rbar:not([hidden]){display:flex;grid-column:1 / -1;position:sticky;top:64px;z-index:20;align-items:center;gap:16px;margin:0 0 22px;padding:12px 18px 12px 30px; background:rgba(17,17,19,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--k-line,rgba(255,255,255,.09));border-radius:18px 18px 0 0;font-family:var(--k-ff,Prompt),sans-serif} .vcb-t{display:flex;align-items:baseline;gap:8px;min-width:0} .vcb-t b{font:600 16px/1.2 var(--k-ff,Prompt),sans-serif;color:var(--k-tx,#ededef)} .vcb-t span{font-size:13px;color:var(--k-mu,#a3a3aa);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vcb-chips{display:flex;gap:8px;margin-left:auto} .vcb-c{display:inline-flex !important;align-items:center;gap:6px;min-height:32px !important;height:32px !important;padding:0 12px !important;border-radius:99px !important;border:1px solid transparent !important;font:500 12.5px/1 var(--k-ff,Prompt),sans-serif !important;cursor:pointer} .vcb-c::before,.vcb-c::after,.vcb-act button::before,.vcb-act button::after{display:none !important} .vcb-c b{font-size:14px;font-weight:700} .vcb-c.c-h{background:rgba(239,68,68,.13) !important;color:#fca5a5 !important;border-color:rgba(239,68,68,.3) !important} .vcb-c.c-c{background:rgba(245,158,11,.12) !important;color:#fcd34d !important;border-color:rgba(245,158,11,.3) !important} .vcb-c.c-i{background:rgba(59,130,246,.12) !important;color:#93c5fd !important;border-color:rgba(59,130,246,.3) !important} .vcb-act{display:flex;gap:6px;padding-left:14px;border-left:1px solid var(--k-line,rgba(255,255,255,.09))} .vcb-act button{min-height:34px !important;height:34px !important;padding:0 13px !important;border-radius:9px !important;border:1px solid var(--k-line2,rgba(255,255,255,.16)) !important;background:transparent !important;color:var(--k-tx,#ededef) !important;font:500 13px/1 var(--k-ff,Prompt),sans-serif !important;cursor:pointer} .vcb-act button:hover{background:rgba(255,255,255,.06) !important} /* (ค)+(4) หัวรายงานใหญ่: ข้อความชิดซ้าย · เข็มวัดด้านขวา */ html.vc-wide #result .rpt-head{display:grid !important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k g" "t g" "m g";column-gap:28px;align-items:center;text-align:left !important;padding:26px 28px !important;border-radius:18px !important; background:radial-gradient(120% 140% at 100% 0%,rgba(233,194,122,.1),transparent 55%),rgba(255,255,255,.025) !important;border:1px solid var(--k-line,rgba(255,255,255,.09)) !important;margin-bottom:18px !important} html.vc-wide #result .rpt-head > .rpt-kicker{grid-area:k;text-align:left !important;margin:0 !important;justify-content:flex-start !important} html.vc-wide #result .rpt-head > .rpt-title{grid-area:t;text-align:left !important;font-size:28px !important;margin:6px 0 !important;line-height:1.25 !important} html.vc-wide #result .rpt-head > .rpt-meta{grid-area:m;text-align:left !important;margin:0 !important;font-size:14px !important;max-width:none !important} .vc-rg{grid-area:g;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:180px} .vc-rg svg{width:150px;height:88px;overflow:visible} .vc-rg .t,.vc-rg .a{fill:none;stroke-width:9;stroke-linecap:round} .vc-rg .t{stroke:rgba(255,255,255,.1)} .vc-rg .a{stroke:url(#vcRgG);stroke-dasharray:1;stroke-dashoffset:1;animation:vcRgA 1.1s cubic-bezier(.3,1.2,.5,1) .2s forwards} .vc-rg .n{transform-origin:50px 52px;transform:rotate(-90deg);animation:vcRgN 1.2s cubic-bezier(.3,1.5,.5,1) .2s forwards} .vc-rg .n line{stroke:#f5f5f4;stroke-width:3.2;stroke-linecap:round}.vc-rg .n circle{fill:#f5f5f4} @keyframes vcRgA{to{stroke-dashoffset:calc(1 - var(--f,0))}} @keyframes vcRgN{to{transform:rotate(calc(-90deg + var(--f,0) * 180deg))}} .vc-rg-l{font:700 15px/1.2 var(--k-ff,Prompt),sans-serif} .vc-rg.r-h .vc-rg-l{color:#fca5a5}.vc-rg.r-c .vc-rg-l{color:#fcd34d}.vc-rg.r-l .vc-rg-l{color:#93c5fd} .vc-rg-s{font-size:12px;color:var(--k-mu,#a3a3aa)} html.vc-wide #result .cb-tiles{gap:14px !important} html.vc-wide #result .cb-tile{padding:18px 18px 16px !important;min-height:112px} html.vc-wide #result .cb-tile b{font-size:40px !important;line-height:1.05 !important} html.vc-wide #result .vc-demo-note{margin-bottom:18px !important} /* (3) ช่องสัญญาด้านขวา ติดอยู่กับที่ */ html.vc-wide .vc-cpane:not([hidden]){display:flex;flex-direction:column;grid-column:2;grid-row:2 / span 2;position:sticky;top:136px;max-height:calc(100vh - 160px);margin-right:24px;border-radius:16px;overflow:hidden; background:#f8f3e8;color:#2a2620;box-shadow:0 24px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)} .vcp-hd{display:flex;flex-direction:column;gap:2px;padding:14px 18px 12px;border-bottom:1px solid #e6dcc8;background:#f3ecdc} .vcp-hd b{font:700 15px/1.3 Taviraj,Prompt,serif;color:#1e1a14} .vcp-hd span{font:400 12px/1.3 Prompt,sans-serif;color:#8a7f6a} .vcp-body{flex:1;overflow:auto;padding:12px 14px 16px;overscroll-behavior:contain} .vcp-ln{position:relative;margin:0 0 2px !important;padding:6px 8px;border-radius:8px;font:400 14px/1.65 Sarabun,Prompt,sans-serif !important;color:#3a342a !important;transition:background .25s,box-shadow .25s} .vcp-ln.cont{padding-top:0} .vcp-ln.has{cursor:pointer;background:linear-gradient(transparent 0,transparent 100%)} .vcp-ln.has.r-h{background:rgba(248,113,113,.16);box-shadow:inset 3px 0 0 #ef4444} .vcp-ln.has.r-c{background:rgba(251,191,36,.2);box-shadow:inset 3px 0 0 #f59e0b} .vcp-ln.has.r-l{background:rgba(96,165,250,.16);box-shadow:inset 3px 0 0 #3b82f6} .vcp-ln.has:hover,.vcp-ln.has:focus-visible{outline:none;filter:brightness(.97);box-shadow:inset 3px 0 0 currentColor,0 0 0 2px rgba(0,0,0,.08)} .vcp-ln.on{animation:vcpFlash 1.4s ease-out} @keyframes vcpFlash{0%,30%{box-shadow:inset 3px 0 0 #1f2937,0 0 0 3px rgba(16,185,129,.55)}100%{}} .vcp-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:rgba(0,0,0,.07);font:600 10.5px/1.5 Prompt,sans-serif;font-style:normal;color:#6b5f4a;vertical-align:1px} .vcp-ft{margin:0 !important;padding:8px 16px 10px;border-top:1px solid #e6dcc8;font:400 11px/1.3 Prompt,sans-serif !important;color:#9a8f7a !important} } @media (min-width:1024px) and (max-width:1199px){ html.vc-wide.vc-has-pane #resultCard{grid-template-columns:minmax(0,1fr)} html.vc-wide .vc-cpane:not([hidden]){display:none} } @media (prefers-reduced-motion:reduce){.vc-rg .a{animation:none;stroke-dashoffset:calc(1 - var(--f,0))}.vc-rg .n{animation:none;transform:rotate(calc(-90deg + var(--f,0) * 180deg))}} @media (min-width:1024px){html.vc-art.vc-wide[data-view="desk"][data-desk="check"] main > #resultCard > :is(h2,.rs-guide){display:none !important}} @media (min-width:1024px){html.vc-wide #result :is(details.item,#issueIndex,.miss,.rpt-head){scroll-margin-top:140px}} @media (min-width:1024px) and (max-width:1199px){html.vc-wide #resultCard > #result{padding:0 30px !important}} /* ===== v237 หน้าตรวจบนคอมไม่โล่ง (≥1024 · มือถือไม่แตะ) ===== */ .vc-steps,.vc-rprev,.vc-tips,.vc-deskbg{display:none} @media (min-width:1024px){ /* (2)+(ข) แถบขั้นตอนแทนช่องว่างใต้หัวเว็บ */ html.vc-deskck main > .vc-steps{display:flex;grid-row:5;grid-column:2 / -2;align-items:center;justify-content:center;gap:0;margin:calc(64px + 22px) 0 0;padding:10px 14px;border-radius:99px;justify-self:center; background:rgba(255,255,255,.03);border:1px solid var(--k-line,rgba(255,255,255,.08));font-family:var(--k-ff,Prompt),sans-serif;position:relative;z-index:2} html.vc-deskck.vc-spa[data-view="desk"][data-desk="check"] #checkCard{margin-top:18px !important} html.vc-deskck.vc-spa[data-view="desk"][data-desk="check"] main > #resultCard{margin-top:18px !important} html.vc-art.vc-spa.vc-wide.vc-deskck[data-view="desk"][data-desk="check"] main > #checkCard{margin-top:18px !important} .vcs-s{display:inline-flex !important;align-items:center;gap:8px;min-height:36px !important;height:36px !important;padding:0 12px 0 6px !important;border:0 !important;border-radius:99px !important;background:transparent !important;color:var(--k-mu,#8f8f96) !important;font:500 13.5px/1 var(--k-ff,Prompt),sans-serif !important;cursor:pointer;transition:background .2s,color .2s} .vcs-s::before,.vcs-s::after{display:none !important} .vcs-s i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;font:700 12px/1 var(--k-ff,Prompt),sans-serif;font-style:normal;transition:all .25s} .vcs-s:hover{color:var(--k-tx,#ededef) !important;background:rgba(255,255,255,.04) !important} .vcs-s.on{color:#f5f5f4 !important;background:rgba(255,255,255,.07) !important} .vcs-s.on i{background:#f0e6d2;border-color:#f0e6d2;color:#1c1712;box-shadow:0 0 0 4px rgba(240,230,210,.12)} .vcs-s.done{color:#6ee7b7 !important} .vcs-s.done i{background:rgba(52,211,153,.16);border-color:#34d399;color:transparent;position:relative} .vcs-s.done i::after{content:"";position:absolute;width:9px;height:5px;border:2px solid #34d399;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)} .vcs-ln{display:block;width:clamp(24px,4vw,64px);height:2px;margin:0 4px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden} .vcs-ln::after{content:"";position:absolute;inset:0;background:#34d399;transform:scaleX(0);transform-origin:left;transition:transform .5s ease} .vcs-ln.done::after{transform:none} /* (1)+(ก) ตัวอย่างหน้าตาผลตรวจแทนรายการ 1-2-3 */ html.vc-deskck:not(.vc-ck-hasres) #resultCard > .rs-guide{display:none !important} html.vc-deskck:not(.vc-ck-hasres) #resultCard > .vc-rprev{display:block;margin:4px 0 16px} html.vc-deskck:not(.vc-ck-hasres) #resultCard > .vc-tips{display:block} html.vc-deskck:not(.vc-ck-hasres) #resultCard > #result:has(> .empty-art){display:none} .vrp-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px} .vrp-tag{padding:4px 10px;border-radius:99px;background:rgba(240,207,143,.12);border:1px solid rgba(240,207,143,.3);color:#f0cf8f;font:600 11.5px/1 var(--k-ff,Prompt),sans-serif} .vrp-src{font-size:11.5px;color:var(--k-mu,#8f8f96)} .vrp-card{position:relative;padding:16px;border-radius:16px;background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--k-line,rgba(255,255,255,.09));cursor:pointer;transition:border-color .2s,transform .25s;overflow:hidden} .vrp-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,rgba(17,17,19,.95));pointer-events:none} .vrp-card:hover{border-color:rgba(240,207,143,.35);transform:translateY(-2px)} .vrp-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .vrp-k{display:block;font:500 10px/1.2 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--k-mu,#8f8f96)} .vrp-t{display:block;margin-top:4px;font:600 17px/1.3 var(--k-ff,Prompt),sans-serif;color:var(--k-tx,#ededef)} .vrp-g{display:flex;flex-direction:column;align-items:center;gap:2px} .vrp-g svg{width:78px;height:46px;overflow:visible} .vrp-g .t,.vrp-g .a{fill:none;stroke-width:9;stroke-linecap:round} .vrp-g .t{stroke:rgba(255,255,255,.1)} .vrp-g .a{stroke:url(#vrpG);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,0))} .vrp-g .n{transform-origin:50px 52px;transform:rotate(calc(-90deg + var(--f,0) * 180deg))} .vrp-g .n line{stroke:#f5f5f4;stroke-width:3.5;stroke-linecap:round}.vrp-g .n circle{fill:#f5f5f4} .vrp-g em{font:700 11px/1 var(--k-ff,Prompt),sans-serif;font-style:normal;color:#fca5a5} .vrp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0} .vrp-tiles span{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;font:500 11.5px/1.2 var(--k-ff,Prompt),sans-serif} .vrp-tiles b{font-size:22px;font-weight:700;line-height:1.1} .vrp-tiles .t-h{background:rgba(239,68,68,.12);color:#fca5a5}.vrp-tiles .t-c{background:rgba(245,158,11,.12);color:#fcd34d}.vrp-tiles .t-l{background:rgba(59,130,246,.12);color:#93c5fd} .vrp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .vrp-list li{display:flex;flex-direction:column;gap:2px;padding:9px 11px 10px 13px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 3px 0 0 var(--c)} .vrp-list li.r-h{--c:#ef4444}.vrp-list li.r-c{--c:#f59e0b}.vrp-list li.r-l{--c:#3b82f6} .vrp-lv{font:600 10.5px/1.2 var(--k-ff,Prompt),sans-serif;color:var(--c)} .vrp-list b{font:600 13.5px/1.35 var(--k-ff,Prompt),sans-serif;color:var(--k-tx,#ededef)} .vrp-fx{font-size:12px;line-height:1.45;color:var(--k-mu,#a3a3aa);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .vrp-more{position:relative;z-index:1;margin-top:10px;font-size:12px;color:var(--k-mu,#8f8f96);text-align:center} .vrp-go{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px !important;height:auto !important;margin-top:12px;border:0 !important;border-radius:13px !important;background:linear-gradient(135deg,#34d399,#22d3ee) !important;color:#04281b !important;font:700 14px/1 var(--k-ff,Prompt),sans-serif !important;cursor:pointer;box-shadow:0 12px 26px -14px rgba(52,211,153,.9)} .vrp-go::before,.vrp-go::after{display:none !important} .vrp-go b{transition:transform .2s}.vrp-go:hover b{transform:translateX(3px)} /* (4) การ์ดก่อนวางสัญญา */ .vc-tips{padding:16px 16px 6px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--k-line,rgba(255,255,255,.08))} .vct-h{display:block;margin:0 0 10px;font:600 14px/1.3 var(--k-ff,Prompt),sans-serif;color:var(--k-tx,#ededef)} .vc-tips ul{list-style:none;margin:0;padding:0} .vc-tips li{display:flex;gap:11px;padding:0 0 12px} .vc-tips li > i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(240,207,143,.1);border:1px solid rgba(240,207,143,.22)} .vc-tips li svg{width:16px;height:16px;fill:none;stroke:#e9c27a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .vc-tips li > span{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.45;color:var(--k-mu,#a3a3aa)} .vc-tips li > span b{font:600 13px/1.35 var(--k-ff,Prompt),sans-serif;color:var(--k-tx,#ededef)} /* (3) พื้นหลังมีมิติ */ html.vc-deskck .vc-deskbg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} html.vc-deskck main{position:relative;z-index:1} .vc-deskbg .g1,.vc-deskbg .g2{position:absolute;border-radius:50%;filter:blur(20px)} .vc-deskbg .g1{width:900px;height:620px;left:50%;top:6%;transform:translateX(-62%);background:radial-gradient(closest-side,rgba(233,194,122,.075),transparent)} .vc-deskbg .g2{width:700px;height:520px;right:-6%;bottom:-10%;background:radial-gradient(closest-side,rgba(52,211,153,.045),transparent)} .vc-deskbg .fp{position:absolute;top:90px;bottom:0;width:calc((100vw - 1400px) / 2 - 20px);min-width:0;margin:0;overflow:hidden;font:400 13px/2.1 Sarabun,Prompt,sans-serif;color:rgba(236,226,206,.045);text-align:justify; -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 70%,transparent)} .vc-deskbg .fp.l{left:24px}.vc-deskbg .fp.r{right:24px} /* (ค) การ์ดลองตัวอย่าง: ป้ายฟรีชิดชื่อ · ชิปบรรทัดเดียว */ html.vc-deskck #checkCard .vc-try{grid-template-columns:minmax(0,1fr) auto !important} html.vc-deskck #checkCard .vc-try-main{justify-content:flex-start !important} html.vc-deskck #checkCard .vc-try-tx{flex:0 1 auto !important} html.vc-deskck #checkCard .vc-try-free{align-self:center !important;margin-left:4px} html.vc-deskck #checkCard .vc-try-chips{flex-wrap:nowrap !important;max-width:none !important} html.vc-deskck #checkCard .vc-try-c,html.vc-deskck #checkCard .vc-try-all{padding-left:11px !important;padding-right:11px !important;white-space:nowrap} /* (ง) ปุ่มอัปโหลดซ้ำ: ซ่อนตอนกล่องว่าง (มีลิงก์อัปโหลดในกล่องแล้ว) */ html.vc-deskck #checkCard:has(#input:placeholder-shown) .ta-actions .file-pick{display:none !important} } @media (min-width:1024px) and (max-width:1279px){ html.vc-deskck #checkCard .vc-try{grid-template-columns:1fr !important} .vc-deskbg .fp{display:none} } @media (prefers-reduced-motion:reduce){.vrp-card,.vcs-ln::after{transition:none}} /* ===== v238 คอม (≥768): เน้น "ข้อ N" + ตัวเลขในกล่องสัญญา เหมือนมือถือ ===== */ .vc-dmir{display:none} @media (min-width:768px){ html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap{position:relative} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-dhl .vc-dmir{display:block;position:absolute;z-index:0;overflow:hidden;box-sizing:border-box;border-style:solid;border-color:transparent;pointer-events:none;color:#e7e5e4} .vc-dmir-in{white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;will-change:transform} .vc-dmir .hk{color:#a9d1fb;background:linear-gradient(transparent 16%,rgba(96,165,250,.16) 16%,rgba(96,165,250,.16) 88%,transparent 88%);border-radius:2px} .vc-dmir .hn{color:#f2d7a0;background:linear-gradient(transparent 62%,rgba(240,207,143,.16) 62%,rgba(240,207,143,.16) 92%,transparent 92%)} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-dhl #input{position:relative;z-index:1;color:transparent !important;-webkit-text-fill-color:transparent !important;caret-color:#ededef;background-color:transparent !important} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-dhl #input::selection{background:rgba(147,197,253,.35);-webkit-text-fill-color:transparent} html.vc-art[data-view="desk"][data-desk="check"] #checkCard .ta-wrap.vc-dhl .vc-dmir{background:var(--k-in,#0d0d0f)} } /* ===== v239 ปากกาเซ็นแบบใหม่ (มือถือ + คอม) ===== */ /* (2) ลายเซ็นบนเส้น "ผู้เช่า" */ .hxl-sign .hxs-ln{position:relative;overflow:visible} .hxl-sig{position:absolute;left:4%;bottom:-2px;width:80%;height:22px;overflow:visible;pointer-events:none} .hxl-sig path{fill:none;stroke:#23306e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1; filter:drop-shadow(0 0 .6px rgba(60,80,200,.55));transition:stroke 1.4s ease,filter 1.4s ease} .hxl-sig.dry path{stroke:#1d2550;filter:none} /* (1)+(ก) ปากกาหมึกซึม: หัวทองอยู่ที่จุด (left,top) · ด้ามเอียงลงขวา (ไม่บังข้อความด้านบน) */ .hx-live .hxl-sign .hxl-pen{position:absolute !important;left:0;top:0;right:auto !important;bottom:auto !important;width:88px !important;height:13px !important;margin:-6.5px 0 0 0;z-index:4;pointer-events:none; transform-origin:0 50% !important;opacity:0;transform:translate(60px,30px) rotate(14deg) scale(1.06);animation:none !important; transition:transform .5s cubic-bezier(.2,.85,.3,1),opacity .3s,filter .5s !important;filter:drop-shadow(9px 12px 5px rgba(0,0,0,.16)) !important} .hx-live .hxl-sign .hxl-pen svg{display:block;width:100%;height:100%;overflow:visible} /* (4) เงาตามความสูง: ลอย = เงาห่าง/จาง · แตะกระดาษ = เงาชิด/คม */ .hx-live.pen .hxl-sign .hxl-pen{opacity:1;transform:translate(3px,-5px) rotate(14deg);filter:drop-shadow(5px 7px 3px rgba(0,0,0,.24)) !important} .hx-live.sign .hxl-sign .hxl-pen{transform:translate(0,0) rotate(14deg);filter:drop-shadow(1.5px 2px 1px rgba(0,0,0,.42)) !important;transition:transform .18s ease-out,filter .2s,opacity .2s !important} /* (3)+(ข) ตราปั๊ม: สะดุ้งยกขึ้นนิดเดียว แล้วเลื่อนออกขวาตามแนวเส้นลงชื่อ */ .hx-live.slam .hxl-sign .hxl-pen{opacity:0;transform:translate(150px,8px) rotate(10deg);filter:drop-shadow(10px 13px 6px rgba(0,0,0,.12)) !important;animation:hxlPenJolt .75s cubic-bezier(.3,.6,.4,1) forwards !important;transition:none !important} @keyframes hxlPenJolt{0%{opacity:1;transform:translate(0,0) rotate(14deg)}16%{opacity:1;transform:translate(-3px,-9px) rotate(5deg)}55%{opacity:1;transform:translate(60px,-4px) rotate(9deg)}100%{opacity:0;transform:translate(150px,8px) rotate(10deg)}} .hx-live.held .hxl-sign .hxl-pen{opacity:0 !important;animation:none !important} /* (5)+(ค) หัวปากกาไฮไลต์: ปากกาเน้นข้อความหัวตัดเฉียง ฝาสีตามระดับ */ .hxl-tx::after{width:24px !important;height:9px !important;top:50% !important;margin-top:-6px;border-radius:0 2px 2px 0 !important;transform:rotate(-18deg) !important;transform-origin:0 50%;box-shadow:1px 2px 2px rgba(0,0,0,.28) !important; clip-path:polygon(0 30%,5px 0,100% 0,100% 100%,5px 100%); background:linear-gradient(90deg,var(--hd) 0 5px,#f4f1ea 5px 7px,var(--nb) 7px 70%,color-mix(in srgb,var(--nb) 70%,#000) 70% 74%,var(--nb) 74%) !important} .hx-live.scan .hxl-ln.hit .hxl-tx::after{animation:hxlMarker .55s cubic-bezier(.45,.05,.3,1) !important} @keyframes hxlMarker{0%{left:-2px;opacity:1}88%{opacity:1}100%{left:calc(100% - 4px);opacity:0}} .hxl-tx{overflow:visible !important} .hxl-ln .hxl-tx{white-space:nowrap} .hxl-tx > .hxl-tt{display:block;overflow:hidden;text-overflow:ellipsis} @media (prefers-reduced-motion:reduce){.hx-live .hxl-sign .hxl-pen{display:none !important}} .hxl-ln .hxl-tx,.hxl-ln .hxl-tt{padding-left:0 !important;text-indent:0 !important} /* ===== v241 สติกเกอร์แทนตรายาง (มือถือ + คอม) ===== */ /* (1)+(ข)+(ค) ป้ายมุมมนพื้นทึบ ขอบขาวไดคัท เงาบาง — ไม่มีลายจุด ไม่มีขอบสองชั้น */ .hx-live .hxl-ln .hxl-st,.hx-live .hxl-ln .hxl-st.s-h,.hx-live .hxl-ln .hxl-st.s-c,.hx-live .hxl-ln .hxl-st.s-l{ display:inline-flex !important;align-items:center;justify-content:flex-start;gap:4px;width:100%;height:18px;box-sizing:border-box;padding:0 7px 0 2px !important;border:0 !important;border-radius:6px !important; font:700 9.5px/1 Prompt,sans-serif !important;letter-spacing:0 !important;color:#fff !important;-webkit-text-fill-color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18) !important; background:var(--sk) !important;box-shadow:0 0 0 1.6px #fff,0 1.5px 2.5px 1.6px rgba(60,40,20,.28) !important;filter:none !important;mix-blend-mode:normal;overflow:hidden;position:relative} .hx-live .hxl-ln .hxl-st.s-h{--sk:linear-gradient(180deg,#ef4b4b,#c81e1e)} .hx-live .hxl-ln .hxl-st.s-c{--sk:linear-gradient(180deg,#f59e0b,#d97706)} .hx-live .hxl-ln .hxl-st.s-l{--sk:linear-gradient(180deg,#4f8ff7,#2563eb)} .hx-live .hxl-ln .hxl-st::before{content:none !important;display:none !important} /* (2) ไอคอนในวงกลมขาว */ .hx-live .hxl-st .hxl-si{flex:none;width:14px !important;height:14px !important;padding:2.5px;box-sizing:border-box;border-radius:50%;background:#fff;stroke-width:2 !important} .hx-live .hxl-st.s-h .hxl-si{stroke:#c81e1e !important}.hx-live .hxl-st.s-c .hxl-si{stroke:#c2410c !important}.hx-live .hxl-st.s-l .hxl-si{stroke:#1d4ed8 !important} /* (ง)+(4) คำยาวย่อเอง · สูงน้อยกว่าบรรทัด · เอียงนิดเดียว */ .hx-live .hxl-st > span{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hx-live .hxl-ln .hxl-st.s-long{font-size:8.6px !important;letter-spacing:-.01em !important} .hx-live .hxl-ln .hxl-st.s-xl{font-size:8px !important;letter-spacing:-.02em !important} .hx-live .hxl-ln{min-height:22px} /* (3) แปะแล้วเด้ง + แสงวาบหนึ่งครั้ง */ .hx-live .hxl-ln .hxl-st{transform:rotate(var(--rot,0deg)) !important;opacity:0} .hx-live .hxl-ln.hit .hxl-st{opacity:1;animation:hxlStick .5s cubic-bezier(.3,1.6,.5,1) !important} @keyframes hxlStick{0%{opacity:0;transform:translateY(-10px) scale(1.25) rotate(calc(var(--rot,0deg) - 6deg))}55%{opacity:1;transform:translateY(1px) scale(.96) rotate(var(--rot,0deg))}78%{transform:scale(1.03) rotate(var(--rot,0deg))}100%{opacity:1;transform:rotate(var(--rot,0deg))}} .hx-live .hxl-ln .hxl-st::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg) translateX(-120%);pointer-events:none} .hx-live .hxl-ln.hit .hxl-st::after{animation:hxlShine .7s ease-out .35s 1} @keyframes hxlShine{to{transform:skewX(-18deg) translateX(560%)}} .hx-live.done:not(.held) .hxl-ln.hit .hxl-st{animation:hxlTapSk 2.4s ease-in-out .6s 1 !important} @keyframes hxlTapSk{0%,40%,100%{transform:rotate(var(--rot,0deg))}20%{transform:rotate(var(--rot,0deg)) scale(1.08)}} .hx-live .hxl-ln.hit .hxl-st:hover,.hx-live .hxl-ln.hit .hxl-st:focus-visible{background:var(--sk) !important;filter:brightness(1.08) !important;outline:2px solid rgba(0,0,0,.25);outline-offset:2px} @media (min-width:768px){.hx-live .hxl-ln .hxl-st,.hx-live .hxl-ln .hxl-st.s-h,.hx-live .hxl-ln .hxl-st.s-c,.hx-live .hxl-ln .hxl-st.s-l{height:19px;font-size:10px !important}} @media (prefers-reduced-motion:reduce){.hx-live .hxl-ln.hit .hxl-st,.hx-live .hxl-ln.hit .hxl-st::after{animation:none !important}} /* สระ/วรรณยุกต์บนไม่โดนตัด (เช่น "ดอกเบี้ย") */ .hx-live .hxl-ln .hxl-st{line-height:1.6 !important} .hx-live .hxl-st > span{line-height:1.6;padding-top:1px} /* ===== v243 ตรา "อ่านก่อนเซ็น!" แบบตรายางจริง (มือถือ + คอม) ===== */ /* (3)+(ก) แถวลงชื่อสูงขึ้น ตราอยู่ทับลายเซ็นครึ่งทาง ไม่ทับแถบอธิบายสี */ .hx-live .hxl-sign{min-height:34px;align-items:flex-end;margin-top:12px !important;margin-bottom:4px !important} .hx-live .hxl-sign .hxl-bigst{left:27% !important;top:auto !important;bottom:3px;z-index:3;font-size:16px !important;padding:5px 12px 6px !important;border-width:2.2px !important;border-radius:7px !important;color:#c4202c !important; box-shadow:inset 0 0 0 2px #fbf6ea,inset 0 0 0 3.4px currentColor !important;mix-blend-mode:multiply;transform:translate(-50%,0) rotate(-8deg);opacity:0;animation:none; /* (2)+(ค) หมึกเข้มจางไม่เท่ากัน (มาสก์ไล่ระดับ) — ไม่ใช้ลายจุด */ -webkit-mask-image:linear-gradient(104deg,#000 0%,rgba(0,0,0,.72) 22%,#000 41%,rgba(0,0,0,.82) 63%,#000 80%,rgba(0,0,0,.7) 100%);mask-image:linear-gradient(104deg,#000 0%,rgba(0,0,0,.72) 22%,#000 41%,rgba(0,0,0,.82) 63%,#000 80%,rgba(0,0,0,.7) 100%); text-shadow:0 0 .6px currentColor;filter:blur(1.2px)} .hx-live .hxl-sign .hxl-bigst::before{content:none !important;display:none !important} /* (1) ตรายางด้ามไม้ลงมากด: ลอยลง → กด (ยุบ) → ยกออก · หมึกปรากฏตอนแตะกระดาษ */ .hxl-tool,.hxl-tsh,.hxl-splat{position:absolute;pointer-events:none;opacity:0} .hxl-tool{left:27%;bottom:2px;width:54px;height:63px;margin-left:-27px;z-index:5;transform-origin:50% 100%} .hxl-tool svg{display:block;width:100%;height:100%;overflow:visible} .hxl-tsh{left:27%;bottom:0;width:62px;height:16px;margin-left:-31px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,25,10,.45),transparent);z-index:2} .hx-live.slam .hxl-tool{animation:hxlTool 1.25s cubic-bezier(.4,0,.2,1) forwards} .hx-live.slam .hxl-tsh{animation:hxlTsh 1.25s cubic-bezier(.4,0,.2,1) forwards} @keyframes hxlTool{0%{opacity:0;transform:translate(26px,-96px) rotate(10deg) scale(1.12)}14%{opacity:1}34%{transform:translate(4px,-26px) rotate(-4deg) scale(1.04)}42%{transform:translate(0,0) rotate(-8deg) scaleY(.9) scaleX(1.04)}56%{transform:translate(0,0) rotate(-8deg) scaleY(.94)}68%{opacity:1;transform:translate(-2px,-22px) rotate(-10deg)}100%{opacity:0;transform:translate(-14px,-110px) rotate(-14deg) scale(1.1)}} @keyframes hxlTsh{0%{opacity:0;transform:scale(1.9)}34%{opacity:.5;transform:scale(1.3)}42%,56%{opacity:.95;transform:scale(.95)}70%{opacity:.4;transform:scale(1.4)}100%{opacity:0;transform:scale(2.1)}} .hx-live.slam .hxl-sign .hxl-bigst{animation:hxlInk .7s ease-out .52s forwards !important} @keyframes hxlInk{0%{opacity:.5;filter:blur(1.2px);transform:translate(-50%,0) rotate(-8deg) scale(1.03)}35%{opacity:.98;filter:blur(.5px)}100%{opacity:.92;filter:blur(0);transform:translate(-50%,0) rotate(-8deg)}} /* (4) จังหวะกระแทก: จุดหมึกกระเด็น + กระดาษสะเทือนตอนแตะ */ .hxl-splat{left:27%;bottom:15px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;z-index:2;color:rgba(196,32,44,.7); box-shadow:-62px -10px 0 0 currentColor,-54px 8px 0 -.5px currentColor,-47px -16px 0 .4px currentColor,58px -8px 0 0 currentColor,66px 6px 0 -.5px currentColor,49px 14px 0 .3px currentColor,-8px -20px 0 -.4px currentColor,12px 19px 0 -.6px currentColor,72px -14px 0 -.8px currentColor,-70px 12px 0 -.8px currentColor} .hx-live.slam .hxl-splat{animation:hxlSplat .55s ease-out .52s forwards} @keyframes hxlSplat{0%{opacity:0;transform:scale(.45)}40%{opacity:1}100%{opacity:.75;transform:scale(1)}} .hx-live.slam .hxl-stack{animation:hxlThud2 .35s ease-out .52s !important} @keyframes hxlThud2{0%,100%{transform:none}30%{transform:translateY(2.5px) scale(.993)}60%{transform:translateY(-1px)}} /* ปากกาสะดุ้งตอนตราแตะกระดาษพอดี */ .hx-live.slam .hxl-sign .hxl-pen{animation:hxlPenJolt .75s cubic-bezier(.3,.6,.4,1) .48s both !important} /* แผ่นอธิบายเปิดอยู่ / โหมดลดการเคลื่อนไหว: เห็นแค่รอยตรา */ .hx-live.held .hxl-tool,.hx-live.held .hxl-tsh,html[data-calm] .hxl-tool,html[data-calm] .hxl-tsh{display:none} .hx-live.held .hxl-sign .hxl-bigst,html[data-calm] .hx-live.slam .hxl-sign .hxl-bigst{animation:none !important;opacity:.92 !important;filter:none} .hx-live.held .hxl-splat,html[data-calm] .hx-live.slam .hxl-splat{animation:none;opacity:.75} @media (prefers-reduced-motion:reduce){.hxl-tool,.hxl-tsh{display:none}.hx-live.slam .hxl-sign .hxl-bigst{animation:none !important;opacity:.92 !important;filter:none}.hx-live.slam .hxl-splat{animation:none;opacity:.75}} @media (max-width:767px){.hx-live .hxl-sign .hxl-bigst{font-size:15px !important}} /* ===== v245 แถบดัชนีโผล่ขอบกระดาษ + ตราย้ายมุมขวาบน (มือถือ + คอม) ===== */ /* เว้นที่ขวาของกระดาษให้แถบโผล่ · กระดาษไม่ตัดของที่ล้นขอบ */ .hx-live{--fo:48px} .hx-live .hxl-stack{margin-right:var(--fo)} html.vc-art .hx-live .hxl-paper{overflow:visible !important;--pr:16px;padding-right:var(--pr) !important} .hx-live .hxl-wm{overflow:hidden;max-width:100%} /* บรรทัด: ข้อความเต็มความกว้าง เหลือที่ให้ส่วนโปร่งของแถบ */ .hx-live .hxl-ln{display:flex !important;position:relative;padding-right:26px !important} .hx-live .hxl-ln .hxl-tx{flex:1;min-width:0} /* (1) แถบดัชนี: ส่วนกาวโปร่งแสงทับขอบกระดาษ + ปลายทึบมีไอคอนกับคำ โผล่ออกนอกกระดาษ */ .hx-live .hxl-ln .hxl-st,.hx-live .hxl-ln .hxl-st.s-h,.hx-live .hxl-ln .hxl-st.s-c,.hx-live .hxl-ln .hxl-st.s-l{ position:absolute !important;top:50%;right:calc(-1 * (var(--pr) + var(--fo) - 3px));width:calc(var(--fo) + var(--pr) + 22px) !important;max-width:none !important;height:18px !important;margin:-9px 0 0 !important; display:flex !important;align-items:center;justify-content:flex-end;gap:3px;padding:0 6px 0 0 !important;border-radius:2px 4px 4px 2px !important;box-shadow:none !important; background:linear-gradient(90deg,var(--ft) 0,var(--ft) calc(100% - var(--fo) - 2px),var(--fs) calc(100% - var(--fo) - 2px)) !important; filter:drop-shadow(0 1px 1.2px rgba(60,40,20,.28)) !important;font:700 9px/1.5 Prompt,sans-serif !important;color:#fff !important;-webkit-text-fill-color:#fff;text-shadow:none !important;overflow:hidden; transform:rotate(var(--rot,0deg)) !important;transform-origin:100% 50%;grid-column:auto !important;justify-self:auto !important} .hx-live .hxl-ln .hxl-st.s-h{--ft:rgba(239,68,68,.22);--fs:#e5484d} .hx-live .hxl-ln .hxl-st.s-c{--ft:rgba(245,158,11,.26);--fs:#e8920c} .hx-live .hxl-ln .hxl-st.s-l{--ft:rgba(59,130,246,.22);--fs:#3b7cf0} .hx-live .hxl-st > span{flex:0 1 auto;max-width:calc(var(--fo) - 8px);text-align:left;font-size:8.6px;letter-spacing:-.01em;padding-top:1px} .hx-live .hxl-ln .hxl-st.s-long > span,.hx-live .hxl-ln .hxl-st.s-xl > span{font-size:7.6px !important;letter-spacing:-.03em} .hx-live .hxl-st .hxl-si{display:none} .hx-live .hxl-ln .hxl-st::after{left:auto;right:100%} /* แปะ: เลื่อนเข้าจากขวาแล้วติด */ @keyframes hxlStick{0%{opacity:0;transform:translateX(14px) rotate(calc(var(--rot,0deg) + 4deg))}60%{opacity:1;transform:translateX(-2px) rotate(var(--rot,0deg))}100%{opacity:1;transform:rotate(var(--rot,0deg))}} @keyframes hxlTapSk{0%,40%,100%{transform:rotate(var(--rot,0deg))}20%{transform:translateX(-3px) rotate(var(--rot,0deg))}} .hx-live .hxl-ln.hit .hxl-st:hover,.hx-live .hxl-ln.hit .hxl-st:focus-visible{background:linear-gradient(90deg,var(--ft) 0,var(--ft) calc(100% - var(--fo) - 2px),var(--fs) calc(100% - var(--fo) - 2px)) !important;filter:drop-shadow(0 1px 1.2px rgba(60,40,20,.28)) brightness(1.08) !important;outline:none} /* หัวกระดาษชิดซ้าย เปิดที่ว่างมุมขวาบนให้ตรา */ html.vc-art .hx-live .hxl-h{text-align:left !important} .hx-live .hxl-meta{text-align:left !important;max-width:62%} .hx-live .hxl-hint{left:var(--pl,20px) !important;transform:translate(0,4px) !important} .hx-live.slam:not(.held) .hxl-hint{transform:none !important} /* (ก) ตรา "อ่านก่อนเซ็น!" มุมขวาบน */ .hx-live .hxl-paper > .hxl-bigst{position:absolute;left:auto !important;right:10px;top:12px !important;bottom:auto !important;font-size:13px !important;padding:4px 9px 5px !important; transform:rotate(9deg);opacity:0;animation:none} .hx-live.slam .hxl-paper > .hxl-bigst{animation:hxlInk2 .7s ease-out .52s forwards !important} @keyframes hxlInk2{0%{opacity:.5;filter:blur(1.2px);transform:rotate(9deg) scale(1.04)}35%{opacity:.98;filter:blur(.5px)}100%{opacity:.92;filter:blur(0);transform:rotate(9deg)}} .hx-live .hxl-paper > .hxl-tool{left:auto;right:calc(10px + 34px);bottom:auto;top:-30px;margin-left:0;margin-right:-27px} .hx-live .hxl-paper > .hxl-tsh{left:auto;right:calc(10px + 20px);bottom:auto;top:20px;margin:0} .hx-live .hxl-paper > .hxl-splat{left:auto;right:58px;bottom:auto;top:24px} .hx-live.slam .hxl-paper > .hxl-tool{animation:hxlTool2 1.25s cubic-bezier(.4,0,.2,1) forwards} @keyframes hxlTool2{0%{opacity:0;transform:translate(-20px,-80px) rotate(-6deg) scale(1.12)}14%{opacity:1}34%{transform:translate(-4px,-20px) rotate(4deg) scale(1.04)}42%{transform:translate(0,0) rotate(9deg) scaleY(.9) scaleX(1.04)}56%{transform:translate(0,0) rotate(9deg) scaleY(.94)}68%{opacity:1;transform:translate(4px,-20px) rotate(11deg)}100%{opacity:0;transform:translate(24px,-100px) rotate(16deg) scale(1.1)}} .hx-live.held .hxl-paper > .hxl-bigst,html[data-calm] .hx-live.slam .hxl-paper > .hxl-bigst{animation:none !important;opacity:.92 !important;filter:none} @media (prefers-reduced-motion:reduce){.hx-live.slam .hxl-paper > .hxl-bigst{animation:none !important;opacity:.92 !important;filter:none}} /* แถวลงชื่อกลับมาเตี้ยเท่าเดิม (ตราไม่อยู่ตรงนี้แล้ว) */ .hx-live .hxl-sign{min-height:0 !important;margin-top:10px !important;margin-bottom:2px !important} @media (max-width:767px){.hx-live{--fo:44px} html.vc-art .hx-live .hxl-paper{--pr:12px}} .hx-live{--fo:60px} @media (max-width:767px){.hx-live{--fo:58px}} .hx-live .hxl-st > span{font-size:8.4px;max-width:calc(var(--fo) - 9px)} .hx-live .hxl-ln .hxl-st.s-long > span{font-size:7.8px !important} .hx-live .hxl-ln .hxl-st.s-xl > span{font-size:7.2px !important} /* ===== v247 หน้าแรกบนโน้ตบุ๊ก/คอม (≥1024 · มือถือไม่แตะ) ===== */ .vc-scue{display:none} @media (min-width:1024px){ /* (ค)+(3) เลื่อนลงได้ */ html.vc-spa[data-view="home"],html.vc-spa[data-view="home"] body{overflow-x:hidden !important;overflow-y:auto !important;height:auto !important} html.vc-spa[data-view="home"] main > .hero{height:auto !important;min-height:100svh !important;padding-bottom:56px !important} /* (ฉ)+(1) สองคอลัมน์: ข้อความชิดซ้าย · การ์ดขวา */ .hero.hx-wow{--cw:clamp(370px,31vw,440px);--gx:max(4vw,calc((100vw - 1320px) / 2))} html.vc-art .hero.hx-wow .hero-copy{text-align:left !important;align-items:flex-start !important;margin-left:var(--gx) !important;margin-right:0 !important;width:auto !important;max-width:calc(100vw - var(--gx) * 2 - var(--cw) - 56px) !important;padding-left:0 !important;padding-right:0 !important} html.vc-art .hero.hx-wow .hero-copy > *{margin-left:0 !important;text-align:left !important} html.vc-art .hero.hx-wow .hero-title{font-size:clamp(54px,6.4vw,96px) !important;text-align:left !important} html.vc-art .hero.hx-wow .hero-title .ht-l2.hs-on{margin-left:0 !important} html.vc-art .hero.hx-wow .hero-title .hs-ink{left:0;transform:translate(0,-52%)} html.vc-art .hero.hx-wow .dx-cta-row{justify-content:flex-start !important} html.vc-art .hero.hx-wow .hx-free,html.vc-art .hero.hx-wow .hero-lead{text-align:left !important;max-width:520px} html.vc-art .hero.hx-wow .dx-kicker,html.vc-art .hero.hx-wow .hero-kicker{justify-content:flex-start !important} .hero.hx-wow .hx-live.side{position:absolute;right:var(--gx);width:var(--cw);margin:0;--fo:64px} /* (5) ตัวหนังสือในการ์ดใหญ่ขึ้น */ .hx-live.side .hxl-ln{font-size:12.6px !important;min-height:24px} html.vc-art .hx-live.side .hxl-h{font-size:17px !important} .hx-live.side .hxl-st > span{font-size:9.4px} .hx-live.side .hxl-ln .hxl-st.s-long > span{font-size:8.6px !important} .hx-live.side .hxl-ln .hxl-st.s-xl > span{font-size:8px !important} .hx-live.side .hxl-ln .hxl-st{height:20px !important;margin-top:-10px !important} /* (2) แบบกระชับเมื่อจอเตี้ย */ .hx-live.side.compact{padding:10px !important} .hx-live.side.compact :is(.hxl-own,.hxl-note,.hxl-key,.hxl-meta){display:none !important} .hx-live.side.compact .hxl-top{margin-bottom:6px} html.vc-art .hx-live.side.compact .hxl-paper{padding-top:12px !important;padding-bottom:18px !important} .hx-live.side.compact .hxl-ln{min-height:21px;font-size:12px !important} .hx-live.side.compact .hxl-foot{margin-top:8px} .hx-live.side.compact .hxl-sign{margin-top:6px !important} /* (ง)+(4) ป้ายแว่นขยาย: มุมล่างซ้ายของจอแรก ใกล้แว่น */ .hero.hx-wow .hx-hunt{left:var(--gx) !important;right:auto !important;top:calc(100svh - 64px) !important;bottom:auto !important;transform:translateY(6px) !important} .hero.hx-wow .hx-hunt.on{transform:none !important} /* (3) ลูกศรเลื่อนดูต่อ */ .vc-scue{display:flex;position:absolute;left:50%;top:calc(100svh - 58px);z-index:5;flex-direction:column;align-items:center;gap:4px;min-height:0 !important;height:auto !important;padding:4px 10px !important;border:0 !important;background:none !important;color:#a8a29e !important;font:500 12px/1 Prompt,sans-serif !important;cursor:pointer;transform:translateX(-50%);transition:opacity .3s} .vc-scue::before,.vc-scue::after{display:none !important} .vc-scue i{width:18px;height:18px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) scale(.6);animation:vcScue 1.6s ease-in-out infinite} .vc-scue.gone{opacity:0;pointer-events:none} @keyframes vcScue{0%,100%{transform:translateY(-2px) rotate(45deg) scale(.6);opacity:.5}50%{transform:translateY(3px) rotate(45deg) scale(.6);opacity:1}} html:not([data-view="home"]) .vc-scue,html[data-view="desk"] .vc-scue{display:none} /* การ์ด 3 ใบเว้นจากจอแรก */ html.vc-art .hero.hx-wow .dx-points.tp-cards{margin-top:max(24px,calc(100svh - 100% )) !important} } @media (min-width:1024px) and (prefers-reduced-motion:reduce){.vc-scue i{animation:none}} @media (min-width:1024px){ html.vc-art .hero.hx-wow .hero-main{justify-items:start !important;justify-content:start !important} html.vc-art .hero.hx-wow .hero-copy{margin-left:max(0px,calc(var(--gx) - 64px)) !important;width:min(660px,calc(100vw - var(--gx) * 2 - var(--cw) - 56px)) !important;justify-self:start !important} } @media (min-width:1024px){ html.vc-art .hero.hx-wow .hero-title :is(.ht-l,.ht-l2){display:block !important;text-align:left !important;margin-left:0 !important;margin-right:auto !important;justify-content:flex-start !important;transform:none} } @media (min-width:1024px){ .hero.hx-wow .hx-hunt.flow{position:static !important;margin:16px 0 0 !important;transform:none !important;width:fit-content;opacity:0;transition:opacity .4s} .hero.hx-wow .hx-hunt.flow.on{opacity:1} } @media (min-width:1024px){.hero.hx-wow .hx-tip{transition:opacity .18s !important}} /* ===== v249 ไฮไลต์ชุดใหม่ + แถบขอบซ้ายแทน "!" (มือถือ + คอม) ===== */ /* (4)+(ข) สีเดียวกันทั้งไฮไลต์และปลายแถบ */ .hx-live .hxl-ln.r-h{--hl:rgba(229,62,92,.30);--hd:rgba(229,62,92,.42);--nb:#e53e5c;--lv:#e53e5c} .hx-live .hxl-ln.r-c{--hl:rgba(236,150,20,.34);--hd:rgba(236,150,20,.5);--nb:#ec9614;--lv:#ec9614} .hx-live .hxl-ln.r-l{--hl:rgba(59,125,240,.26);--hd:rgba(59,125,240,.4);--nb:#3b7df0;--lv:#3b7df0} .hx-live .hxl-ln .hxl-st.s-h{--ft:rgba(229,62,92,.2);--fs:#e53e5c} .hx-live .hxl-ln .hxl-st.s-c{--ft:rgba(236,150,20,.22);--fs:#ec9614} .hx-live .hxl-ln .hxl-st.s-l{--ft:rgba(59,125,240,.2);--fs:#3b7df0} .hxl-key .k-h{background:#e53e5c}.hxl-key .k-c{background:#ec9614}.hxl-key .k-l{background:#3b7df0} /* (5)+(ก) ไฮไลต์จบก่อนถึงแถบ */ .hx-live .hxl-ln{padding-right:32px !important} .hx-live .hxl-ln.hit .hxl-tx::before{width:calc(100% + 2px) !important} /* (6) เฉพาะ "สำคัญ" เป็นไฮไลต์เต็ม · ควรระวัง/ข้อสังเกต เป็นขีดเส้นใต้ */ .hx-live .hxl-ln.r-c .hxl-tx::before,.hx-live .hxl-ln.r-l .hxl-tx::before{top:auto !important;bottom:1px;height:2.4px !important;border-radius:2px !important;transform:none !important; background:var(--lv) !important;-webkit-mask-image:none !important;mask-image:none !important;opacity:.85;mix-blend-mode:normal} .hx-live .hxl-ln.r-l .hxl-tx::before{background:repeating-linear-gradient(90deg,var(--lv) 0 5px,transparent 5px 8px) !important} .hx-live .hxl-ln.r-h .hxl-tx::before{background:linear-gradient(90deg,var(--hd) 0,var(--hl) 6px,var(--hl) calc(100% - 8px),var(--hd) 100%) !important;opacity:1} /* (1) แถบสีแนวตั้งที่ขอบซ้ายแทน "!" */ .hx-live .hxl-ln .hxl-mk{position:absolute;left:-11px;top:3px;bottom:3px;width:3px;height:auto;margin:0;border-radius:2px;background:var(--lv);font-size:0;color:transparent; transform:scaleY(0);transform-origin:50% 0;opacity:1;transition:transform .35s cubic-bezier(.3,1.3,.5,1) .1s} .hx-live .hxl-ln.hit .hxl-mk{transform:scaleY(1)} /* (ค) ปากกาเอียงน้อยลง + แถบอธิบายสีห่างจากเส้นลงชื่อ ไม่โดนทับ */ .hx-live.pen .hxl-sign .hxl-pen{transform:translate(3px,-5px) rotate(5deg)} .hx-live.sign .hxl-sign .hxl-pen{transform:translate(0,0) rotate(5deg)} @keyframes hxlPenJolt{0%{opacity:1;transform:translate(0,0) rotate(5deg)}16%{opacity:1;transform:translate(-3px,-9px) rotate(-3deg)}55%{opacity:1;transform:translate(60px,-4px) rotate(2deg)}100%{opacity:0;transform:translate(150px,6px) rotate(3deg)}} .hx-live .hxl-key{margin-top:14px !important} /* (ง) บรรทัดทำที่ไม่โดนตัด */ .hx-live .hxl-meta{max-width:66%;font-size:9px} /* ===== v250 ฉากเปิดผลตัวอย่างแบบใหม่ (มือถือ + คอม) ===== */ .vc-ds2{position:fixed;inset:0;z-index:2147483060;display:grid;place-items:center;padding:16px;background:rgba(6,7,8,.72);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);opacity:0;transition:opacity .3s;font-family:Prompt,Sarabun,sans-serif} .vc-ds2.in{opacity:1} .vc-ds2.out{opacity:0;transition:opacity .45s ease .1s;pointer-events:none} html.vc-dsc-open :is(.vc-bn,.vc-fpill,.vc-stick,.hx-lens,.hx-pool,.hx-tip,.hx-hunt,.vc-cursor,.vc-scue){opacity:0 !important;pointer-events:none !important} .d2-card{width:min(460px,92vw);display:flex;flex-direction:column;align-items:stretch;gap:16px} /* กระดาษแบบหน้าแรก */ .d2-stack{position:relative;margin-right:44px;transform:translateY(18px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.1),opacity .35s} .vc-ds2.in .d2-stack{transform:none;opacity:1} .vc-ds2.out .d2-stack{transform:translateY(-34vh) scale(.55);opacity:0;transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .4s ease .12s} .d2-stack::before,.d2-stack::after{content:"";position:absolute;inset:0;border-radius:6px;background:#efe6d4;box-shadow:0 10px 22px -14px rgba(0,0,0,.9)} .d2-stack::before{transform:rotate(-2deg) translate(-3px,4px);background:#e9dfca} .d2-stack::after{transform:rotate(1.5deg) translate(3px,3px)} .d2-clip{position:absolute;z-index:3;top:-13px;left:26px;width:11px;height:30px;border:2.4px solid #d8b46a;border-bottom:0;border-radius:6px 6px 0 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))} .d2-paper{position:relative;z-index:1;padding:18px 16px 16px 24px;border-radius:6px;color:#2a2620; background:radial-gradient(120% 90% at 30% 0%,#fffdf6 0%,#f8f1e2 70%,#f1e7d2 100%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 36px -20px rgba(0,0,0,.95),0 0 0 1px rgba(90,70,40,.12)} .d2-wm{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) rotate(-22deg);font:700 60px/1 Taviraj,Prompt,serif;letter-spacing:.18em;color:rgba(170,135,80,.07);pointer-events:none;white-space:nowrap} .d2-paper h5{margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid rgba(120,95,55,.22);font:700 17px/1.3 Taviraj,Prompt,serif;color:#1e1a14;text-align:left} .d2-paper p{position:relative;display:flex;align-items:center;min-height:26px;margin:0 0 2px;padding-right:30px;font:400 13px/1.5 Sarabun,Prompt,sans-serif;color:#9a8f7b;transition:color .25s} .d2-paper p.seen{color:#2f2a22} .d2-tx{position:relative;flex:1;min-width:0;isolation:isolate} .d2-tx > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .d2-paper p.r-h{--lv:#e53e5c;--hl:rgba(229,62,92,.3)}.d2-paper p.r-c{--lv:#ec9614}.d2-paper p.r-l{--lv:#3b7df0} .d2-tx::before{content:"";position:absolute;z-index:-1;left:-3px;width:0;transition:width .5s cubic-bezier(.45,.05,.3,1)} .d2-paper p.r-h .d2-tx::before{top:38%;height:56%;border-radius:3px 9px 4px 10px / 6px 4px 8px 5px;transform:skewX(-10deg);background:var(--hl);mix-blend-mode:multiply} .d2-paper p.r-c .d2-tx::before{bottom:2px;height:2.4px;border-radius:2px;background:var(--lv)} .d2-paper p.r-l .d2-tx::before{bottom:2px;height:2.4px;background:repeating-linear-gradient(90deg,var(--lv) 0 5px,transparent 5px 8px)} .d2-paper p.hit .d2-tx::before{width:calc(100% + 2px)} .d2-mk{position:absolute;left:-13px;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--lv);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.3,.5,1) .1s} .d2-paper p.hit .d2-mk{transform:scaleY(1)} /* แถบดัชนีโผล่ขอบขวา */ .d2-fl{position:absolute;top:50%;right:-60px;width:78px;height:20px;margin-top:-10px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;box-sizing:border-box;border-radius:2px 4px 4px 2px; background:linear-gradient(90deg,color-mix(in srgb,var(--lv) 22%,transparent) 0 18px,var(--lv) 18px);filter:drop-shadow(0 1px 1.2px rgba(60,40,20,.28));color:#fff;font:700 9.6px/1.5 Prompt,sans-serif;font-style:normal; opacity:0;transform:translateX(14px)} .d2-fl span{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .d2-paper p.hit .d2-fl{opacity:1;transform:none;transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.5,1)} .d2-scan{position:absolute;left:0;right:0;top:0;height:44px;margin-top:-44px;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent,rgba(233,194,122,.14) 70%,rgba(233,194,122,.45) 96%,transparent);border-bottom:2px solid #e9c27a;filter:drop-shadow(0 0 6px rgba(233,194,122,.6))} .vc-ds2.in .d2-scan{animation:hxlScan 1.7s linear .42s both} /* หัว + ตัวนับ */ .d2-h{display:flex;align-items:center;justify-content:space-between;gap:12px} .d2-h b{font:600 18px/1.3 Prompt,sans-serif;color:#fff;white-space:nowrap} .d2-cnt{flex:none;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font:500 13.5px/1.2 Prompt,sans-serif;color:#e7e5e4;white-space:nowrap} .d2-cnt em{font-style:normal;font-weight:700;color:#fca5a5;display:inline-block;min-width:.7em} .d2-cnt.pop em{animation:vcPop .3s cubic-bezier(.3,1.8,.5,1)} /* (3) ขั้นตอน */ .d2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .d2-steps li{position:relative;display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font:500 12.5px/1.25 Prompt,sans-serif;color:#8b8b93;transition:all .3s} .d2-steps li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.6px solid currentColor;box-sizing:border-box} .d2-steps li.on{color:#f5f5f4;border-color:rgba(233,194,122,.4);background:rgba(233,194,122,.08)} .d2-steps li.on::before{border-color:#e9c27a;border-top-color:transparent;animation:d2Spin .8s linear infinite} .d2-steps li.done{color:#6ee7b7;border-color:rgba(52,211,153,.3)} .d2-steps li.done::before{border-color:#34d399;background:#34d399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%2304281b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} @keyframes d2Spin{to{transform:rotate(360deg)}} .d2-note{margin:0;text-align:center;font:400 11.5px/1.4 Prompt,sans-serif;color:#78716c} @media (max-width:420px){.d2-steps li{font-size:11px;padding:8px 7px;gap:5px}.d2-steps li::before{width:14px;height:14px}.d2-paper p{font-size:12.2px;min-height:24px}.d2-h b{font-size:16px}} @media (prefers-reduced-motion:reduce){.d2-steps li.on::before{animation:none}.vc-ds2 .d2-scan{animation:none}} .d2-fl.lg{font-size:8.2px;letter-spacing:-.02em;width:84px;right:-66px}.d2-fl.lg span{max-width:64px} @media (min-width:1024px){html.vc-wide #result{scroll-margin-top:190px}} /* ===== v252 กระดาษย่อในคลังสัญญาตัวอย่าง แบบหน้าแรก ===== */ /* (ก) ตัดแถบเขียวขอบบนกระดาษ + เส้นเขียวขอบซ้ายการ์ด */ .vsl-item::before{display:none !important} .vsl-thumb.v2 .vsl-th-p{border-top:0 !important} /* (ค)+(4) ไอคอนไปอยู่ในป้ายหมวด ไม่ทับกระดาษ */ .vsl-thumb.v2 .vsl-th-ic{display:none !important} .vsl-tag{display:inline-flex !important;align-items:center;gap:5px} .vsl-tag-ic{width:15px;height:15px;flex:none;overflow:visible} .vsl-tag-ic .w{fill:#eef0f3}.vsl-tag-ic .d{fill:#24242b}.vsl-tag-ic .a{fill:color-mix(in srgb,var(--a,#34d399) 80%,#fff)}.vsl-tag-ic .as{stroke:color-mix(in srgb,var(--a,#34d399) 80%,#fff);fill:none} /* (1)+(2)+(ง)+(ข) กระดาษครีมซ้อน · คลิปทอง · 5 บรรทัดตัวใหญ่ขึ้น · สีตามระดับ */ .vsl-thumb.v2{width:76px !important;height:92px !important;margin:4px 6px 2px 2px !important} .vsl-thumb.v2::before{background:#e9dfca !important;transform:rotate(-4deg) translate(-3px,3px) !important;border-radius:4px} .vsl-thumb.v2 .vsl-th-p{background:radial-gradient(120% 90% at 30% 0%,#fffdf6 0%,#f8f1e2 70%,#f1e7d2 100%) !important;box-shadow:0 10px 18px -10px rgba(0,0,0,.9),0 0 0 1px rgba(90,70,40,.12) !important;transform:rotate(1.2deg)} .vsl-thumb.v2 .tclip{position:absolute;z-index:3;top:-6px;left:12px;width:5px;height:14px;border:1.6px solid #d8b46a;border-bottom:0;border-radius:3px 3px 0 0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))} .vsl-thumb.v2 .vsl-th-t{width:200% !important;padding:13px 12px 10px 16px !important;transform:scale(.5) !important;color:#3a342a !important;font:400 12px/1.5 Sarabun,Prompt,sans-serif !important} .vsl-thumb.v2 .vsl-th-t b{text-align:left !important;font:700 14px/1.3 Taviraj,Prompt,serif !important;color:#1e1a14 !important;margin:0 0 7px !important;padding-bottom:6px !important;border-bottom:1px solid rgba(120,95,55,.25) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vsl-thumb.v2 .tl{position:relative;display:block;margin:0 0 5px;white-space:nowrap;overflow:hidden} .vsl-thumb.v2 .tl em{font-style:normal;position:relative;padding:0 1px} .vsl-thumb.v2 .tl.r-h{--lv:#e53e5c}.vsl-thumb.v2 .tl.r-c{--lv:#ec9614}.vsl-thumb.v2 .tl.r-l{--lv:#3b7df0} .vsl-thumb.v2 .tl.r-h em{background:linear-gradient(transparent 36%,rgba(229,62,92,.32) 36%,rgba(229,62,92,.32) 92%,transparent 92%)} .vsl-thumb.v2 .tl.r-c em{box-shadow:inset 0 -3px 0 var(--lv)} .vsl-thumb.v2 .tl.r-l em{background:repeating-linear-gradient(90deg,var(--lv) 0 6px,transparent 6px 10px) bottom/100% 3px no-repeat} .vsl-thumb.v2 .tl > i{display:none} .vsl-thumb.v2 .tl[class*="r-"] > i{display:block;position:absolute;left:-9px;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--lv)} .vsl-thumb.v2 .tl[class*="r-"]{overflow:visible} .vsl-item:active .vsl-thumb.v2 .vsl-th-p{transform:rotate(-1deg) translateY(-2px)} /* (3) สีชุดเดียวกันทั้งหน้า */ .vsl-bar-s i.h{background:#e53e5c !important}.vsl-bar-s i.c{background:#ec9614 !important}.vsl-bar-s i.l{background:#3b7df0 !important} .vsl-bar-l .h::before{background:#e53e5c !important}.vsl-bar-l .c::before{background:#ec9614 !important}.vsl-bar-l .l::before{background:#3b7df0 !important} .vsl-bar-l .h{color:#f7a1b0 !important}.vsl-bar-l .c{color:#f6c46e !important} .vsl-thumb.v2 .vsl-th-t b{display:block !important;height:auto !important;width:auto !important;background:none !important;border-radius:0 !important} .vsl-thumb.v2 .tl{height:auto !important} .vsl-thumb.v2 .tl em{display:inline !important;font:inherit !important;color:inherit !important;margin:0 !important;letter-spacing:0 !important} /* ===== v253 กระดาษย่อแต่ละใบไม่ซ้ำ + แก้ตัดคำ/แถบ/ชื่อ/กรอบปุ่ม ===== */ /* (ง) กล่องเลือกไม่โฟกัสปุ่มเองตอนเปิด → ไม่มีกรอบซ้อน · การ์ดรับโฟกัสแทน */ .vsl-card:focus{outline:none} /* (ก) ข้อความจางที่ขอบขวา ไม่ตัดกึก */ .vsl-thumb.v2 .tl{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 98%);mask-image:linear-gradient(90deg,#000 78%,transparent 98%);overflow:hidden !important;padding-left:12px;margin-left:-12px} /* (ข) แถบขอบซ้ายเห็นเป็นเส้นชัด */ .vsl-thumb.v2 .tl[class*="r-"] > i{left:2px !important;top:1px !important;bottom:1px !important;width:6px !important;border-radius:3px} /* (ค) ชื่อสัญญาสองบรรทัดได้ · เว้นที่ด้านบนให้ตัวยึด */ .vsl-thumb.v2 .vsl-th-t{padding-top:22px !important} .vsl-thumb.v2 .vsl-th-t b{white-space:normal !important;display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px !important;line-height:1.25 !important} .vsl-thumb.v2 .tclip{display:none} /* (4) จำนวนแผ่น + องศาต่างกัน */ .vsl-thumb.v2 .vsl-th-p{transform:rotate(var(--tr,1deg)) !important} .vsl-thumb.v2.n1::before{display:none !important} .vsl-thumb.v2.n3::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:#ddd2bc;transform:rotate(4deg) translate(3px,2px);box-shadow:0 6px 12px -8px rgba(0,0,0,.8)} .vsl-thumb.v2{isolation:isolate} .vsl-thumb.v2::before{z-index:-1} /* (3) สีกระดาษ */ .vsl-thumb.v2{--pp:#fbf6ea;--pp2:#f1e7d2} .vsl-thumb.v2.p-white{--pp:#ffffff;--pp2:#f2f1ee} .vsl-thumb.v2.p-mist{--pp:#f3f6fa;--pp2:#e3e9f1} .vsl-thumb.v2.p-kraft{--pp:#f6ead2;--pp2:#e8d6b2} .vsl-thumb.v2.p-ledger{--pp:#f2f8ef;--pp2:#dfebd8} .vsl-thumb.v2 .vsl-th-p{background:linear-gradient(180deg,var(--pp),var(--pp2)) !important} /* (1) แบบเอกสารตามประเภท */ .vsl-thumb.v2.c-rent .vsl-th-p{background:repeating-linear-gradient(180deg,transparent 0 8.5px,rgba(120,140,170,.18) 8.5px 9px) 0 14px/100% calc(100% - 14px) no-repeat,linear-gradient(180deg,var(--pp),var(--pp2)) !important} .vsl-thumb.v2.c-sale .vsl-th-p{box-shadow:inset 0 0 0 2.5px var(--pp),inset 0 0 0 3.2px rgba(120,95,55,.45),inset 0 0 0 4.5px var(--pp),inset 0 0 0 5px rgba(120,95,55,.35),0 10px 18px -10px rgba(0,0,0,.9) !important} .vsl-thumb.v2.c-employment .vsl-th-p{background:linear-gradient(180deg,#2f4f6f 0 7px,#c9a24a 7px 8px,transparent 8px),linear-gradient(180deg,var(--pp),var(--pp2)) !important} .vsl-thumb.v2.c-service .vsl-th-p{background:linear-gradient(rgba(90,130,170,.12) 1px,transparent 1px) 0 0/6px 6px,linear-gradient(90deg,rgba(90,130,170,.12) 1px,transparent 1px) 0 0/6px 6px,linear-gradient(180deg,var(--pp),var(--pp2)) !important} .vsl-thumb.v2.c-loan .vsl-th-p{background:repeating-linear-gradient(45deg,rgba(150,110,60,.07) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(150,110,60,.07) 0 2px,transparent 2px 5px),linear-gradient(180deg,var(--pp),var(--pp2)) !important} .vsl-thumb.v2.c-other .vsl-th-p,.vsl-thumb.v2.c-unsure .vsl-th-p{border-left:3px double rgba(200,80,80,.35) !important} .tdeco{position:absolute;pointer-events:none;font-style:normal} .tdeco.t-secret{right:3px;top:9px;padding:1px 4px;border:1.2px solid rgba(200,40,50,.55);border-radius:2px;color:rgba(200,40,50,.65);font:800 7px/1.1 Prompt,sans-serif;transform:rotate(12deg)} .tdeco.t-sig{left:6px;right:6px;bottom:5px;display:flex;gap:6px} .tdeco.t-sig i{flex:1;height:0;border-bottom:1px dotted rgba(90,70,40,.55)} /* (2) ตัวยึดกระดาษคนละแบบ */ .vsl-thumb.v2 .tbind{position:absolute;z-index:4;pointer-events:none} .vsl-thumb.v2.b-clip .tbind{top:-6px;left:10px;width:5px;height:14px;border:1.6px solid #d8b46a;border-bottom:0;border-radius:3px 3px 0 0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))} .vsl-thumb.v2.b-staple .tbind{top:4px;left:6px;width:9px;height:2px;background:#a7a9b0;box-shadow:0 0 0 .4px #6b6e75,6px 4px 0 0 #a7a9b0;transform:rotate(-35deg)} .vsl-thumb.v2.b-binder .tbind{top:-5px;left:50%;width:18px;height:8px;margin-left:-9px;border-radius:2px 2px 1px 1px;background:linear-gradient(180deg,#2a2a2e,#111);box-shadow:0 1px 2px rgba(0,0,0,.5)} .vsl-thumb.v2.b-binder .tbind::before{content:"";position:absolute;left:3px;right:3px;top:-6px;height:7px;border:1.3px solid #9aa0a8;border-bottom:0;border-radius:4px 4px 0 0} .vsl-thumb.v2.b-pin .tbind{top:-2px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#d62f3a 60%,#8f1720);box-shadow:1px 2px 2px rgba(0,0,0,.45)} .vsl-thumb.v2.b-tape .tbind{top:-4px;left:-5px;width:22px;height:8px;background:rgba(235,230,210,.6);border:.5px solid rgba(0,0,0,.06);transform:rotate(-30deg);box-shadow:0 1px 1px rgba(0,0,0,.12)} .vsl-thumb.v2.b-fold .vsl-th-p{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)} .vsl-thumb.v2.b-fold .tbind{top:0;right:0;width:12px;height:12px;background:linear-gradient(225deg,transparent 50%,#e2d6bd 50%,#f4ecda);box-shadow:-1px 1px 2px rgba(0,0,0,.2);transform:rotate(var(--tr,0deg));transform-origin:-200% 300%} .vsl-thumb.v2.b-tape .tbind{background:rgba(250,245,225,.85) !important;border:.6px solid rgba(120,100,60,.25) !important;width:24px;height:9px;box-shadow:0 1px 2px rgba(0,0,0,.25) !important} .vsl-thumb.v2 .vsl-th-p > .tdeco.t-secret{display:block !important;height:auto !important;background:none !important;z-index:3} .vsl-thumb.v2 .vsl-th-p > .tdeco.t-sig{display:flex !important;height:auto !important;background:none !important} .vsl-thumb.v2.b-tape .tbind{background:repeating-linear-gradient(90deg,rgba(205,200,185,.9) 0 3px,rgba(225,220,205,.9) 3px 6px) !important;border:.6px solid rgba(110,95,60,.35) !important} .vsl-thumb.v2 .vsl-th-p > .tdeco.t-secret{top:auto !important;bottom:6px;right:4px;font-size:8px;background:rgba(255,255,255,.6) !important} /* ===== v254 สติกเกอร์ประเภทมุมขวาบนของการ์ด (แทนป้ายเทา) ===== */ .vsl-item{position:relative} .vsl-item .vsl-tag{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0 !important;margin:-1px !important;border:0 !important} .vsl-stk{position:absolute;top:-9px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;border-radius:9px;background:var(--sk);color:#fff; font:700 12px/1.2 Prompt,sans-serif;white-space:nowrap;box-shadow:0 0 0 2px #fff,0 4px 8px 1px rgba(0,0,0,.45);transform:rotate(var(--sr,3deg));pointer-events:none} .vsl-stk svg{width:16px;height:16px;flex:none;padding:2px;box-sizing:content-box;border-radius:50%;background:#fff;overflow:visible} .vsl-stk svg .w{fill:#eef0f3}.vsl-stk svg .d{fill:#24242b}.vsl-stk svg .a{fill:var(--sk)}.vsl-stk svg .as{stroke:var(--sk);fill:none} .vsl-stk.k-rent{--sk:#14b892}.vsl-stk.k-sale{--sk:#8b5cf6}.vsl-stk.k-employment{--sk:#2f5f9e}.vsl-stk.k-service{--sk:#0e9fb0} .vsl-stk.k-loan{--sk:#c99a2e}.vsl-stk.k-shareholder{--sk:#d6408f}.vsl-stk.k-nda{--sk:#4b4f58}.vsl-stk.k-other,.vsl-stk.k-unsure{--sk:#8a8f99} .vsl-item:hover .vsl-stk,.vsl-item.is-cur .vsl-stk{transform:rotate(var(--sr,3deg)) translateY(-1px)} /* ให้มีที่ด้านบนการ์ดสำหรับสติกเกอร์ที่โผล่ขอบ */ .vsl-list{padding-top:12px !important} .vsl-list > .vsl-item + .vsl-item{margin-top:6px} @media (min-width:1024px){.vsl-stk{top:8px;right:12px;font-size:11.5px;padding:3px 9px 3px 5px}.vsl-stk svg{width:14px;height:14px}} /* ===== v259 กระดาษสัญญาตัวอย่าง: สีตามระดับจริง (สำคัญ=แดง · ควรระวัง=เหลือง · เล็กน้อย=ฟ้า) + ไฮไลต์เฉพาะคำที่เป็นกับดัก ===== */ .vsl-doc p.is-risk{--hl:rgba(250,214,80,.62);--ul:rgba(214,158,30,.4);--dot:#e2a21c;--nb:#fff1c9;--nl:#f0d17a;--nc:#8a5a00} .vsl-doc p.is-risk.lv-h{--hl:rgba(255,140,128,.5);--ul:rgba(220,70,60,.34);--dot:#e5484d;--nb:#fde6e3;--nl:#f3b0a8;--nc:#a12a20} .vsl-doc p.is-risk.lv-l{--hl:rgba(147,197,253,.55);--ul:rgba(59,130,246,.32);--dot:#3b82f6;--nb:#e6f0fe;--nl:#a9c8f5;--nc:#1e4e9c} .vsl.hl-on .vsl-doc p.is-risk mark{background:linear-gradient(transparent 50%,var(--hl) 50%,var(--hl) 94%,transparent 94%);color:#1d1a15;font-weight:500;padding:0 1px;border-radius:1px} .vsl.hl-on .vsl-doc p.is-risk::before{background:var(--dot)} .vsl.hl-on .vsl-doc p.is-risk .vsl-note{background:var(--nb);border-color:var(--nl);color:var(--nc)} @media (min-width:1024px){ .vsl.vsl-split .vsl-doc p.is-risk .vsl-pn{background:var(--dot)} .vsl.vsl-split .vsl-doc p.is-risk.lv-h.is-hot{background:rgba(255,140,128,.16);box-shadow:0 0 0 1px rgba(229,72,77,.32)} .vsl.vsl-split .vsl-doc p.is-risk.lv-l.is-hot{background:rgba(147,197,253,.18);box-shadow:0 0 0 1px rgba(59,130,246,.3)} } /* ===== v260 กระดาษ: แถบสีขอบซ้ายแทนจุด/เส้นใต้ · โน้ตปากกาลายมือแทนป้าย · ท้ายสัญญามีเส้นลงชื่อ + ตรา "ตัวอย่าง" ===== */ .vsl-doc p.is-risk{--ink:#a8650a} .vsl-doc p.is-risk.lv-h{--ink:#c2302a} .vsl-doc p.is-risk.lv-l{--ink:#2a5aa8} /* 1) แถบแนวตั้งสีตามระดับ ครอบทั้งข้อและโน้ต */ .vsl.hl-on .vsl-doc p.is-risk::before{left:-13px;top:.45em;bottom:.3em;width:3px;height:auto;border-radius:3px;opacity:.85} /* 2) โน้ตปากกาลายมือ: ไม่มีกรอบ เอียงนิดๆ มีลูกศรชี้ขึ้นไปที่คำไฮไลต์ */ .vsl.hl-on .vsl-doc p.is-risk .vsl-note{display:block;width:max-content;max-width:100%;margin:2px 0 4px 4px;padding:0 0 0 22px;position:relative; background:none !important;border:0 !important;border-radius:0;color:var(--ink) !important; font:400 16px/1.4 Sriracha,Charmonman,cursive !important;letter-spacing:.005em;transform:rotate(-1.4deg);transform-origin:0 50%} .vsl.hl-on .vsl-doc p.is-risk .vsl-note::before{content:"";position:absolute;left:4px;top:-5px;width:12px;height:14px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;border-bottom-left-radius:9px;opacity:.85} .vsl.hl-on .vsl-doc p.is-risk .vsl-note::after{content:"";position:absolute;left:1px;top:-6px;width:6px;height:6px;border-left:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);transform-origin:50% 50%;opacity:.85} /* 3) ท้ายสัญญา */ .vsl-sign{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px 22px;margin:30px 0 6px;padding-top:22px;border-top:1px dashed #ddd5c5;font-family:Taviraj,Sarabun,serif;color:#5a544a} .vsl-sg{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0} .vsl-sl{display:block;width:100%;height:30px;border-bottom:1px solid #b9b0a0} .vsl-sg small{font-size:12.5px;white-space:nowrap} .vsl-sd{grid-column:1/-1;text-align:center;font-size:12.5px;color:#8a8273;letter-spacing:.02em} .vsl-stamp{position:absolute;right:4%;top:-6px;display:flex;flex-direction:column;align-items:center;padding:6px 14px 5px;border:2.5px double rgba(194,48,42,.55);border-radius:8px; color:rgba(194,48,42,.6);font-style:normal;transform:rotate(-9deg);pointer-events:none;mix-blend-mode:multiply} .vsl-stamp b{font:700 17px/1.1 Prompt,Sarabun,sans-serif;letter-spacing:.12em} .vsl-stamp small{font:500 9.5px/1.3 Prompt,Sarabun,sans-serif;letter-spacing:.08em} @media (max-width:767px){.vsl-sign{gap:22px 16px;margin-top:26px}.vsl-stamp{right:0;top:-12px}} /* ===== v262 กระดาษสัญญาตัวอย่าง: เหมือนเอกสารจริง · โหมด ต้นฉบับ/ไฮไลต์/ฉบับแก้ · เส้นเชื่อมการ์ด ===== */ /* หัวกระดาษ + เลขหน้า */ .vsl-dhead{display:flex;justify-content:space-between;gap:12px;margin:-4px 0 14px;padding-bottom:8px;border-bottom:1px solid #e7e0d0;font:500 11px/1.4 Prompt,Sarabun,sans-serif;letter-spacing:.04em;color:#a39a86} .vsl-dfoot{margin:22px 0 0;text-align:center;font:500 11px/1 Prompt,sans-serif;letter-spacing:.2em;color:#b5ad9b} /* ซ่อนแถบเลื่อนในกระดาษ (ยังเลื่อนได้ตามปกติ) + ขอบบน/ล่างจางลงแทนการตัดกลางบรรทัด */ .vsl .vsl-doc{scrollbar-width:none !important;-ms-overflow-style:none} .vsl .vsl-doc::-webkit-scrollbar{display:none} .vsl-paper.fade-end .vsl-doc{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent)} .vsl-paper.fade-top .vsl-doc{-webkit-mask-image:linear-gradient(180deg,transparent,#000 40px);mask-image:linear-gradient(180deg,transparent,#000 40px)} .vsl-paper.fade-top.fade-end .vsl-doc{-webkit-mask-image:linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(180deg,transparent,#000 40px,#000 calc(100% - 64px),transparent)} /* ปุ่มเลือกมุมมอง */ .vsl-mode{flex:none;display:inline-flex;padding:3px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);gap:2px} .vsl-mode button{display:inline-flex;align-items:center;gap:6px;min-height:0 !important;padding:7px 12px;border:0;border-radius:99px;background:transparent;color:#a9a6a0;font:500 12.5px/1 Prompt,Sarabun,sans-serif;cursor:pointer;white-space:nowrap} .vsl-mode button::before,.vsl-mode button::after{display:none !important} .vsl-mode button:hover{color:#ece9e2} .vsl-mode button.is-on{background:#f6f3ec;color:#1d1a15;font-weight:600;box-shadow:0 2px 8px -3px rgba(0,0,0,.6)} .vsl-mode i{width:10px;height:10px;border-radius:3px;flex:none} .vsl-mode .m-hl{background:#f6d860} .vsl-mode .m-fix{background:#3fbf7f} .vsl-mode button:focus-visible{outline:2px solid #f0c46a;outline-offset:1px} /* โหมด "ฉบับแก้": ขีดฆ่าคำอันตราย + ข้อความที่ควรขอแก้สีเขียว (แบบ track changes) */ .vsl-doc ins{display:none;text-decoration:none} .vsl.fix-on .vsl-doc p.is-risk mark{background:none !important;color:#b5403a !important;font-weight:400 !important;text-decoration:line-through;text-decoration-color:rgba(194,48,42,.75);text-decoration-thickness:1.5px} .vsl.fix-on .vsl-doc p.is-risk ins{display:inline;margin-left:4px;padding:1px 4px;border-radius:3px;background:rgba(63,191,127,.16);color:#17683f;font-weight:500;box-shadow:inset 0 -1.5px 0 rgba(23,104,63,.45)} .vsl.fix-on .vsl-doc p.is-risk .vsl-note{display:none !important} .vsl.fix-on .vsl-doc p.is-risk::before{background:#3fbf7f !important} .vsl.fix-on .vsl-doc p.is-risk .vsl-pn{background:#2f9e68 !important} .vsl.fix-on .vsl-doc::before{content:"ข้อความสีเขียว = ตัวอย่างข้อความที่ควรขอแก้ไขก่อนเซ็น · ไม่ใช่คำแนะนำทางกฎหมาย";display:block;margin:0 0 14px;padding:8px 12px;border-radius:8px;background:#eaf6ef;border:1px solid #bfe3cf;color:#1f6b45;font:500 12px/1.55 Prompt,Sarabun,sans-serif} /* ต้นฉบับ: กระดาษเปล่า ไม่มีเลข/แถบ */ .vsl:not(.hl-on) .vsl-doc .vsl-pn{display:none !important} /* เลขเดียวกันทั้งกระดาษและการ์ด (เลขข้อ) */ .vsl-rc-n{font-size:11.5px !important} .vsl-rc.is-flash{animation:vslCardFlash 1.1s ease} @keyframes vslCardFlash{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 3px rgba(240,196,106,.55)}} .vsl-link{display:none} /* เส้นเชื่อมใช้เฉพาะคอม — มือถือห้ามกินพื้นที่ */ /* คอม: ชี้ข้อบนกระดาษ = ชี้ได้ (กดแล้วการ์ดเด้ง) */ @media (min-width:1024px){ .vsl.vsl-split.hl-on .vsl-doc p[data-c]{cursor:pointer} .vsl.vsl-split .vsl-vbody{position:relative} .vsl.vsl-split .vsl-paper{margin-right:22px} .vsl.vsl-split .vsl-doc{max-width:720px} .vsl.vsl-split .vsl-link{display:block;position:absolute;left:0;top:0;pointer-events:none;z-index:5;overflow:visible;opacity:0;transition:opacity .15s} .vsl-link.is-on{opacity:1} .vsl-link path{fill:none;stroke:#e2a21c;stroke-width:1.8;stroke-dasharray:5 4;stroke-linecap:round} .vsl-link circle{fill:#e2a21c;stroke:#fdfcf8;stroke-width:1.5} .vsl-link[data-lv="h"] path{stroke:#ef4444}.vsl-link[data-lv="h"] circle{fill:#ef4444} .vsl-link[data-lv="l"] path{stroke:#3b82f6}.vsl-link[data-lv="l"] circle{fill:#3b82f6} .vsl.fix-on .vsl-link path{stroke:#3fbf7f}.vsl.fix-on .vsl-link circle{fill:#3fbf7f} .vsl.vsl-split .vsl-rc.is-hot{transform:translateX(-4px)} .vsl.vsl-split .vsl-rc{transition:transform .15s,border-color .15s,background .15s} } @media (max-width:767px){ .vsl-mode button{padding:6px 9px;font-size:11.5px} .vsl-mode i{display:none} .vsl-dhead{font-size:10px;margin-bottom:10px} .vsl.fix-on .vsl-doc::before{font-size:11px} } @media (prefers-reduced-motion:reduce){.vsl-rc.is-flash{animation:none}}