/* หน้าแรกแบบใหม่ (V3.156) — ย้ายจากแบบร่าง v5 ที่เจ้าของเคาะ (scripts/solutions/make_home_mockup2.py)
โหลดเฉพาะหน้าแรก และโหลดหลัง main.css (block head_last) ลำดับเดียวกับแบบร่าง */
main,body.nl main{max-width:none;padding:0} /* main.css จำกัด 1080px — หน้าแรกเป็นแถบเต็มขอบจอ
body.nl main: กฎ "ขอบ 28px ทุกหน้า" (main.css) แรงกว่า main เฉย ๆ -> เคยทำให้สไลด์มีขอบขาวซ้ายขวาบนจอคอม */
:root{ --ink:#070e1a; --ink2:#0e1a2e; --paper:#fff; --mute:#5b6b80;
--hair:rgba(10,20,36,.09); --gold:#e5ae12; --blue:#2563b8;
/* เจ้าของเทียบกับ toathailand.com แล้วบอกว่ากว้างขนาดนี้กำลังดีกับจอคอม
เว็บเขาใช้ 1400px ส่วนของเราเดิม --maxw อยู่ที่ 1080px แคบกว่ามาก
ทับตรงนี้ให้หัวเว็บกับท้ายเว็บที่ดึงมาจากของจริงกว้างตามไปด้วย */
--maxw:1400px }
body{background:var(--paper);color:#111c2e;font-family:Sarabun,sans-serif}
section{margin:0} /* main.css ใส่ margin 2.2rem ให้ section ทุกตัว ทำให้แถบไม่ติดกัน */
.w{max-width:1400px;margin:0 auto;padding:0 28px}
.band{padding:112px 0}
.band+.band{border-top:1px solid var(--hair)} /* เส้นผมแทนการเปลี่ยนสีพื้น */
.band.tight{padding:76px 0}
.eyb{display:inline-block;font:600 .7rem/1 Sarabun,sans-serif;letter-spacing:2.6px;
text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.eyb-on{background:var(--gold);color:#1a1200;padding:7px 13px;border-radius:3px;letter-spacing:1.8px}
.hd{text-align:center;max-width:720px;margin:0 auto 54px}
.hd h2{font-family:Prompt,sans-serif;font-weight:600;font-size:2.55rem;line-height:1.16;
letter-spacing:-.6px;margin:0 0 .7rem}
.hd p{margin:0;color:var(--mute);font-size:1rem;line-height:1.75}
.hd-l{text-align:left;margin-left:0}
.ghost{display:inline-block;border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;
padding:15px 30px;font:600 .94rem/1 Sarabun,sans-serif;transition:.2s}
.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.ghost-d{display:inline-block;border:1px solid rgba(10,20,36,.22);color:var(--ink);
text-decoration:none;padding:15px 30px;font:600 .94rem/1 Sarabun,sans-serif;transition:.2s}
.ghost-d:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.solid{display:inline-block;background:var(--gold);color:#1a1200;text-decoration:none;
padding:15px 30px;font:700 .94rem/1 Sarabun,sans-serif;transition:.2s}
.solid:hover{filter:brightness(1.08)}
.more{color:#111c2e;text-decoration:none;font:600 .92rem/1 Sarabun,sans-serif;
border-bottom:1px solid var(--hair);padding-bottom:5px}
/* --- 1 แถบสื่อสาร --- */
input[name=bn]{position:absolute;opacity:0;pointer-events:none}
.bn{position:relative;overflow:hidden;background:var(--ink);min-height:600px}
/* จังหวะสไลด์ (keyframes + หน่วงเวลาแต่ละใบ) สร้างตามจำนวนใบใน services/home.py slide_css()
แล้วฝังในหน้า — ที่นี่เก็บแค่หน้าตา */
.bn-s{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;opacity:0;--d:0s}
/* ภาพซูมเข้าตลอดช่วงที่ตัวเองโชว์ แล้วรีเซ็ตตอนที่มองไม่เห็นแล้ว */
.bn-bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}
.bn-s:before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(7,14,26,.94) 0%,rgba(7,14,26,.78) 38%,rgba(7,14,26,.18) 78%)}
.bn-in{max-width:1400px;margin:0 auto;padding:0 28px;width:100%;color:#fff;
position:relative;z-index:2;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* ข้อความไล่กันขึ้นมาทีละชิ้น หลังภาพเข้าที่แล้ว */
.bn-in>*{opacity:0}
.bn-in>.eyb{animation-delay:calc(var(--d) + .20s)}
.bn-in>h1,.bn-in>h2{animation-delay:calc(var(--d) + .40s)}
.bn-in>p{animation-delay:calc(var(--d) + .60s)}
.bn-in>a{animation-delay:calc(var(--d) + .80s)}
/* กดจุดเมื่อไร = หยุดเล่นเอง แล้วค้างที่ใบนั้น */
input[name=bn]:checked~.bn .bn-s{animation:none;opacity:0}
input[name=bn]:checked~.bn .bn-bg{animation:none;transform:scale(1.04)}
input[name=bn]:checked~.bn .bn-in>*{animation:none;opacity:1;transform:none}
/* .bn นำหน้า = ชนะกฎจังหวะที่ฝังในหน้า (ซึ่งมาทีหลัง) */
@media(prefers-reduced-motion:reduce){
.bn .bn-s,.bn .bn-bg,.bn .bn-in>*,.bn .bn-dots label{animation:none}
.bn .bn-s:nth-child(1){opacity:1}.bn .bn-in>*{opacity:1;transform:none}
}
.bn-in h1,.bn-in .bn-h{font-family:Prompt,sans-serif;font-weight:600;font-size:3.1rem;line-height:1.12;
letter-spacing:-1.2px;margin:0 0 1rem;max-width:20ch}
.bn-in p{margin:0 0 2.2rem;max-width:44ch;font-size:1.08rem;line-height:1.7;color:rgba(255,255,255,.8)}
/* จุดสไลด์ตรงแนวเดียวกับตัวหนังสือ (กว้าง 1400 ขอบใน 28) */
.bn-dots{position:absolute;left:calc(50% - 700px + 28px);bottom:56px;display:flex;gap:0}
.bn-dots label{width:52px;height:2px;background:rgba(255,255,255,.3);cursor:pointer;
margin-right:10px;transition:.2s}
input[name=bn]:checked~.bn .bn-dots label{animation:none}
@media(max-width:1400px){.bn-dots{left:28px}}
/* --- หมวดสินค้า (แถบดำ การ์ดขาวลอย) --- */
/* V3.156 รื้อใหม่ (เจ้าของ 11 พ.ย. "ดู world class หรือยัง"): เดิมเป็นกล่องมีกรอบ 4 ใบ ข้างในมีกล่องเทาอีก 4 ช่อง
(กล่องซ้อนกล่อง · มือถือช่องรูปเหลือ 55px ชื่อหมวดตัดกลางคำ) + ช่องปลอม "ดูสินค้าทั้งหมด"
ใหม่: ชั้นเดียว ไม่มีกรอบนอก · ช่องรูปใหญ่ขึ้น มุมมน · ชื่อหมวดตัวใหญ่ขึ้น · ลิงก์ดูทั้งหมดเป็นปุ่มใต้กริด
รูป = รูปตัวแทนหมวดที่คัดแล้ว (static/images/home/cat/) ทีมเปลี่ยนเองได้ที่ /admin/home */
.ct-g{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 36px}
.cc h3{font-family:Prompt,sans-serif;font-weight:600;font-size:1.12rem;line-height:1.35;
margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--hair);color:#111c2e}
.cc-g{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}
.cc-i{text-decoration:none;color:#111c2e;display:flex;flex-direction:column}
.cc-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:10px;
background:#f3f5f8;margin-bottom:10px;overflow:hidden;transition:background .25s}
.cc-ph img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply;
transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.cc-i:hover .cc-ph{background:#eaeef4}
.cc-i:hover .cc-ph img{transform:scale(1.06)}
.cc-n{display:block;font-size:.95rem;font-weight:500;line-height:1.35}
.cc-i:hover .cc-n{color:var(--blue)}
.ct-all{text-align:center;margin-top:44px}
/* --- 4 Configurator (แถบรูปเต็มขอบ) --- */
.rcg-in{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.rcg h2{font-family:Prompt,sans-serif;font-weight:600;font-size:2.5rem;line-height:1.16;
letter-spacing:-1px;margin:0 0 1rem}
.rcg p{margin:0 0 2rem;color:var(--mute);font-size:1.02rem;line-height:1.75;max-width:44ch}
.rcg-im{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center}
.rcg-im:after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,14,26,0) 55%,rgba(7,14,26,.35) 100%)}
.stp{display:flex;flex-direction:column;margin-top:38px}
.stp div{display:flex;gap:20px;align-items:baseline;padding:18px 0;
border-top:1px solid var(--hair)}
.stp div:last-child{border-bottom:1px solid var(--hair)}
.stp b{font-family:Prompt,sans-serif;font-weight:300;font-size:1.5rem;color:var(--gold);
min-width:32px;letter-spacing:-1px}
.stp span{font-size:1rem;line-height:1.55;color:#2a3850}
.tl-band{padding:62px 0}
.tl-hd{margin-bottom:24px;max-width:760px}
.tl-hd .eyb{margin-bottom:10px}
.tl-hd h2{font-family:Prompt,sans-serif;font-weight:600;font-size:1.42rem;margin:0 0 .45rem;
letter-spacing:-.3px}
.tl-hd p{margin:0;color:var(--mute);font-size:.92rem;line-height:1.7}
.tl-g{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:10px}
.tl{display:block;text-decoration:none;color:#111c2e}
/* จอคอมจำลอง: กรอบจอเข้ม + คอ + ฐาน ให้เห็นว่าเป็นโปรแกรมที่ใช้งานจริง */
.mon{display:block;margin-bottom:18px;transition:transform .35s cubic-bezier(.22,.7,.3,1)}
a.tl:hover .mon{transform:translateY(-4px)}
.mon-scr{display:block;padding:7px 7px 10px;border-radius:10px;
background:linear-gradient(180deg,#1d2636,#0b111b);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 30px -14px rgba(10,22,40,.5)}
.mon-scr img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
border-radius:3px;background:#fff}
.mon-neck{display:block;width:15%;height:22px;margin:0 auto;
background:linear-gradient(90deg,#a9b2bf,#dde1e7 50%,#a9b2bf)}
.mon-base{display:block;width:40%;height:6px;margin:0 auto;border-radius:6px 6px 2px 2px;
background:linear-gradient(180deg,#d6dbe2,#a7afbb)}
.tl b{display:block;font-weight:600;font-size:.98rem;line-height:1.4}
a.tl:hover b{color:var(--blue)}
.tl b .nw{white-space:nowrap}
/* 4 จออยู่แถวเดียวเสมอ เจ้าของไม่อยากให้ตกเป็น 2 คอลัมน์แล้วจอขยายใหญ่ */
@media(max-width:1100px){.tl-g{gap:20px}.tl b{font-size:.9rem}}
@media(max-width:600px){.tl-g{grid-template-columns:repeat(2,1fr);gap:26px 14px}
.bt-gh span{display:none} /* จอมือถือ ชื่อไทย+อังกฤษรวมกันยาวเกินบรรทัด */}
/* --- 5 Bento --- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* ชื่อกลุ่มเหนือแต่ละกริด: ตัวเล็ก เรียบ ไม่แย่งสายตาจากการ์ด */
.bt-grp+.bt-grp{margin-top:46px}
.bt-gh{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.bt-gh b{font-family:Prompt,sans-serif;font-weight:600;font-size:1.12rem;color:#111c2e;
letter-spacing:-.2px;white-space:nowrap}
.bt-gh span{font:600 .64rem/1 Sarabun,sans-serif;letter-spacing:1.8px;text-transform:uppercase;
color:var(--mute);white-space:nowrap}
.bt-gh:after{content:"";flex:1;height:1px;background:var(--hair);align-self:center}
.bt{position:relative;min-height:188px;overflow:hidden;text-decoration:none;color:#fff;
display:flex;align-items:flex-end}
.bt-bg{position:absolute;inset:0;background-size:cover;background-position:center;
transition:transform .7s cubic-bezier(.3,0,.2,1)}
.bt:after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,12,22,0) 24%,
rgba(6,12,22,.55) 62%,rgba(6,12,22,.93) 100%)}
.bt-big:after,.bt-wide:after{background:
linear-gradient(180deg,rgba(6,12,22,0) 30%,rgba(6,12,22,.88) 100%),
linear-gradient(90deg,rgba(6,12,22,.72) 0%,rgba(6,12,22,0) 58%)}
.bt:hover .bt-bg{transform:scale(1.06)}
.bt-big{grid-column:span 2;grid-row:span 2;min-height:386px}
.bt-wide{grid-column:span 4;min-height:210px}
.bt-half{grid-column:span 2}
.bt-tx{position:relative;z-index:2;padding:22px 24px}
.bt-tx em{display:block;font-style:normal;font:600 .64rem/1 Sarabun,sans-serif;
letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.bt-tx h3{font-family:Prompt,sans-serif;font-weight:500;margin:0;font-size:1.05rem;line-height:1.3}
.bt-big .bt-tx h3,.bt-wide .bt-tx h3{font-size:1.65rem;font-weight:600;letter-spacing:-.5px}
.bt-tx p{margin:.6rem 0 0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:44ch}
/* ================= ลูกเล่นตอนเอาเมาส์วางการ์ดโซลูชั่น =================
ยกข้อความทั้งก้อนขึ้นเป็นชิ้นเดียว ไม่ยืดความสูงของกล่อง
ส่วนที่ซ่อนถูกถอดออกจากผังหน้า ผังจึงไม่ถูกคำนวณใหม่ ตัวหนังสือไม่กระตุก */
.bt-tx{width:100%;transition:transform .45s cubic-bezier(.22,.7,.3,1);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bt-rv{position:absolute;left:24px;right:24px;top:calc(100% - 22px);opacity:0;
transform:translateY(6px);
transition:opacity .3s ease .05s,transform .45s cubic-bezier(.22,.7,.3,1) .05s}
.bt:hover .bt-rv,.bt:focus-visible .bt-rv{opacity:1;transform:translateY(0)}
/* ระยะยกเป็นเลขเต็มพิกเซล ตัวหนังสือจะได้ไม่ตกร่องครึ่งพิกเซลแล้วดูฟุ้ง */
.bt:hover .bt-tx,.bt:focus-visible .bt-tx{transform:translateY(-32px)}
.bt:not(.bt-big):not(.bt-wide):hover .bt-tx,
.bt:not(.bt-big):not(.bt-wide):focus-visible .bt-tx{transform:translateY(-74px)}
/* เงาด้านล่างเข้มขึ้น ให้ตัวหนังสืออ่านง่ายตอนคำโปรยคลี่ออก */
.bt:after{transition:background .4s}
.bt:hover:after{background:linear-gradient(180deg,rgba(6,12,22,.08) 10%,
rgba(6,12,22,.68) 55%,rgba(6,12,22,.96) 100%)}
.bt-big:hover:after,.bt-wide:hover:after{background:
linear-gradient(180deg,rgba(6,12,22,.05) 12%,rgba(6,12,22,.94) 100%),
linear-gradient(90deg,rgba(6,12,22,.78) 0%,rgba(6,12,22,0) 58%)}
/* ใบเล็ก: คำโปรยตัดเหลือ 2 บรรทัดเป๊ะ ก้อนที่ซ่อนจะได้สูงเท่ากันทุกใบ */
.bt:not(.bt-big):not(.bt-wide) .bt-rv p{margin:0 0 9px;font-size:.86rem;line-height:1.55;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bt-big .bt-rv,.bt-wide .bt-rv{padding-top:10px}
.bt-go{display:block;font:600 .82rem/1.6 Sarabun,sans-serif;color:var(--gold);letter-spacing:.3px}
/* จอสัมผัสที่กว้างพอ (แท็บเล็ต) ไม่มีการวางเมาส์ -> แสดงไว้เลย · มือถือใช้การ์ดอีกแบบ (ท้ายไฟล์) */
@media(hover:none) and (min-width:601px){
.bt-rv{opacity:1;transform:none}
.bt-tx{transform:translateY(-32px)}
.bt:not(.bt-big):not(.bt-wide) .bt-tx{transform:translateY(-74px)}
}
@media(prefers-reduced-motion:reduce){
.bt-bg,.bt:after,.bt-tx,.bt-rv{transition:none}
}
/* --- 6 ยี่ห้อ --- */
.bw-hd{text-align:center;margin:54px 0 10px;position:relative}
.bw-hd:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair)}
.bw-hd .eyb{position:relative;background:#fff;padding:0 18px;margin:0}
.bw{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--hair);
border:1px solid var(--hair);margin-top:18px}
.bl{display:flex;align-items:center;justify-content:center;height:94px;background:#fff;
text-decoration:none;transition:background .25s}
.bl:hover{background:#fafbfd}
.bl img{animation-name:blFloat;animation-timing-function:ease-in-out;
animation-iteration-count:infinite;will-change:transform}
@keyframes blFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bl img{max-height:36px;max-width:118px;object-fit:contain;
transition:transform .35s cubic-bezier(.25,.8,.3,1),filter .3s ease}
.bl:hover img{transform:scale(1.18);filter:drop-shadow(0 6px 14px rgba(15,45,87,.22))}
@media(prefers-reduced-motion:reduce){.bl img{animation:none}}
/* --- 8 ติดต่อ --- */
.ctc{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ctc h2{font-family:Prompt,sans-serif;font-weight:600;font-size:2.4rem;line-height:1.18;
letter-spacing:-.8px;margin:0 0 1rem}
.ctc>div>p{margin:0 0 2rem;color:var(--mute);font-size:1.02rem;line-height:1.75;max-width:40ch}
.ctc dl{margin:0;display:grid;grid-template-columns:120px 1fr;gap:0}
.ctc dt,.ctc dd{padding:17px 0;border-top:1px solid var(--hair);margin:0}
.ctc dt{color:var(--mute);font-size:.88rem;letter-spacing:.8px}
.ctc dd{font-size:1rem}
@media(max-width:1000px){
.band{padding:70px 0}.hd h2{font-size:1.95rem}
.bn,.bn-s{min-height:440px}.bn-in h1,.bn-in .bn-h{font-size:2.1rem;letter-spacing:-.6px}
.ct-g{grid-template-columns:repeat(2,1fr);gap:36px 28px}
.rcg-in,.ctc{grid-template-columns:1fr;gap:34px}.rcg h2{font-size:1.9rem}
.rcg-im{aspect-ratio:16/10}
.bento{grid-template-columns:repeat(2,1fr)}
.bt-big{grid-column:span 2;grid-row:auto;min-height:260px}.bt-wide{grid-column:span 2}
.bw{grid-template-columns:repeat(3,1fr)}.bl{height:76px}
.bl img{max-height:30px;max-width:92px}
.tl b{font-size:.84rem}
}
/* แถบบอกแอดมินว่ากำลังดูตัวอย่าง (ลูกค้าไม่เห็น) */
.hp-note{background:#1a1200;color:#f5d36b;font:600 .86rem/1.5 Sarabun,sans-serif;text-align:center;padding:9px 16px}
.hp-note a{color:#fff}
/* ===== มือถือ (≤600px): การ์ดโซลูชัน รูปบน ข้อความล่างบนพื้นขาว (V3.156) =====
เจ้าของ 10 พ.ย.: "เวลาแสดงผ่านมือถือ ตัวหนังสือมันลายตา"
เดิม: ไม่มีการวางเมาส์ -> โชว์คำโปรย+ปุ่มค้าง แล้วยกข้อความ 4 ชั้นขึ้นทับรูป ในการ์ดกว้าง ~170px
หลัก UX: จอเล็กห้ามวางตัวหนังสือทับรูปที่รายละเอียดเยอะ -> ข้อความบนพื้นเรียบ อ่านได้ทุกรูป
ทั้งใบกดได้อยู่แล้ว ปุ่ม "ดูรายละเอียด" จึงตัดออก · ป้ายอังกฤษตัดออก (ตัวเล็กมาก ตัดบรรทัด ไม่ช่วยตัดสินใจ) */
@media(max-width:600px){
.bento{gap:18px 12px}
.bt,.bt-big{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible;
color:#111c2e;background:none}
.bt:after,.bt-big:after{display:none}
.bt-bg{position:relative;inset:auto;display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.bt-big .bt-bg{aspect-ratio:16/9}
.bt:hover .bt-bg{transform:none}
.bt-tx,.bt:hover .bt-tx,.bt:focus-visible .bt-tx{position:relative;padding:9px 1px 0;transform:none}
.bt-tx em,.bt-rv{display:none}
/* แตะบนมือถือ = เบราว์เซอร์ถือว่า "เมาส์วางค้าง" -> กฎยกข้อความ -74px ของจอคอม (.bt:not(..):hover) ทำงาน
ข้อความกระโดดขึ้นไปทับรูป (เจ้าของเห็น 10 พ.ย.) · ต้องเขียนแรงเท่ากฎนั้นและมาทีหลังถึงจะชนะ */
.bt:not(.bt-big):not(.bt-wide):hover .bt-tx,.bt:not(.bt-big):not(.bt-wide):focus-visible .bt-tx,
.bt-big:hover .bt-tx,.bt-big:focus-visible .bt-tx{transform:none}
.bt-tx h3{font-size:.95rem;font-weight:600;line-height:1.38;color:#111c2e;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bt-big .bt-tx h3{font-size:1.22rem;letter-spacing:-.2px}
.bt-big .bt-tx p{margin:.35rem 0 0;font-size:.9rem;line-height:1.55;color:#5b6b80;max-width:none;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* หมวดสินค้าบนมือถือ: กลุ่มเรียงลงมา แต่ละหมวดเป็นแถว รูปซ้าย ชื่อขวา 2 คอลัมน์ (กดง่าย ชื่อไม่ถูกตัดกลางคำ) */
.ct-g{grid-template-columns:1fr;gap:26px}
.cc h3{font-size:1.02rem;margin-bottom:10px;padding-bottom:9px}
.cc-g{gap:10px 12px}
.cc-i{flex-direction:row;align-items:center;gap:10px;min-height:52px}
.cc-ph{flex:none;width:52px;margin:0;border-radius:8px}
.cc-n{font-size:.94rem}
.ct-all{margin-top:30px}
/* สไลด์: ข้อความกินเต็มความกว้าง แต่เงาเดิมมืดเฉพาะซ้าย -> ฝั่งขวาทับรูปส่วนสว่าง ใช้เงาไล่บนลงล่างทั้งแผ่น */
.bn-s:before{background:linear-gradient(180deg,rgba(7,14,26,.62) 0%,rgba(7,14,26,.78) 55%,rgba(7,14,26,.9) 100%)}
.bn-in h1,.bn-in .bn-h{font-size:1.8rem;line-height:1.2}
.bn-in p{font-size:1rem}
}
/* ===== ลูกเล่นตอนเลื่อน/แตะ (V3.156) — เจ้าของ: มือถือ "ไม่มีเอฟเฟคดึงดูดความสนใจ" =====
แบบเว็บแถวหน้า (Apple/Sonos/Bose): ไม่มีเมาส์วางบนมือถือ -> ผูกลูกเล่นกับการเลื่อนจอและการแตะแทน
.rv/.in ใส่โดย static/js/home.js · ไม่มีสคริปต์ = ไม่ซ่อนอะไร */
.rv-on .rv{opacity:0;transform:translateY(26px);
transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1);
transition-delay:calc(var(--i,0) * 70ms)}
.rv-on .rv.in{opacity:1;transform:none}
/* โลโก้ยี่ห้อขยับลอยอยู่แล้ว -> ปรากฏแค่จางเข้า ไม่เลื่อน (กันกระตุกซ้อนกัน) */
.rv-on .bl.rv{transform:none;transition-delay:calc(var(--i,0) * 35ms)}
@media(max-width:600px){
/* รูปซูมออกช้า ๆ ตอนการ์ดเข้าจอ (Sonos/Bose) */
.rv-on .bt.rv .bt-bg{transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.7,.25,1)}
.rv-on .bt.rv.in .bt-bg{transform:scale(1)}
/* แตะแล้วยุบนิดหนึ่งเหมือนปุ่มในแอป (Apple/Airbnb) */
.bt,.cc-i,.tl,.bl,.ghost,.solid{-webkit-tap-highlight-color:transparent}
/* ต้องแรงกว่า .rv-on .rv.in{transform:none} ไม่งั้นการ์ดที่ปรากฏแล้วกดไม่ยุบ */
.bt:active,.cc-i:active,.tl:active,
.rv-on .bt.rv.in:active,.rv-on .tl.rv.in:active{transform:scale(.97);transition:transform .12s ease}
.bt-bg{transform-origin:center}
}
@media(prefers-reduced-motion:reduce){
.rv-on .rv,.rv-on .bt.rv .bt-bg{opacity:1;transform:none;transition:none}
}
/* ===== เครื่องมือออกแบบ: ถอดขาจอ + ชื่อกึ่งกลางใต้จอของตัวเอง (V3.156 · เจ้าของ "ขาจอดูไม่สวย") =====
เหลือกรอบจอเข้ม ยังดูเป็นซอฟต์แวร์บนหน้าจอ แต่ไม่เกะกะ · ทุกขนาดจอเหมือนกัน */
.mon-neck,.mon-base{display:none}
.mon{margin-bottom:14px}
.mon-scr{padding:7px;border-radius:10px}
.tl b{text-align:center}
/* ===== รูปเป็น ![]()
แทนพื้นหลัง (V3.156 · SEO/ความเร็ว) =====
พื้นหลัง CSS = โหลดทุกรูปทันทีที่เปิดหน้า (แม้อยู่ล่างจอ) + Google Images เก็บไม่ได้ (ไม่มี alt)
![]()
โหลดเมื่อเลื่อนใกล้ถึง + มีคำบรรยายรูปจากหน้า Solution · หน้าตาเหมือนเดิม */
.bn-bg,.bt-bg{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.rcg-im{overflow:hidden}
.rcg-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){ .bt-bg{height:auto} }
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ล2: แถวติดต่อที่กดได้ (โทร อีเมล LINE หน้าเกี่ยวกับเรา) — สีเดิม มีเส้นใต้บางบอกว่ากดได้ */
.ctc dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(17,28,46,.28);padding-bottom:1px;
transition:color .2s,border-color .2s}
.ctc dd a:hover{color:var(--blue);border-bottom-color:var(--blue)}
/* ===== เก็บความสม่ำเสมอ (V3.156 · ผลตรวจเลย์เอาต์ 11 พ.ย.) =====
1 หัวข้อของทุกส่วนขนาดเดียวกัน — เดิม 41 / 40 / 41 / 23 / 38px และบนมือถือ "ปรึกษาทีมงาน" ใหญ่สุดทั้งหน้า
(เว็บที่วัดเทียบใช้ขนาดเดียวทั้งหน้า: Biamp 48 · Logitech 52 · Thomann 36) */
.hd h2,.rcg h2,.ctc h2,.tl-hd h2{font-size:2.5rem;line-height:1.16;letter-spacing:-.6px;font-weight:600}
.tl-band{padding:112px 0}
.tl-hd{margin-bottom:40px}
.tl-hd .eyb{margin-bottom:18px}
.tl-hd h2{margin:0 0 .7rem}
.tl-hd p{font-size:1rem;line-height:1.75}
@media(max-width:1000px){
.hd h2,.rcg h2,.ctc h2,.tl-hd h2{font-size:1.9rem;letter-spacing:-.4px}
.tl-band{padding:70px 0}.tl-hd{margin-bottom:26px}
}
/* 2 ไม่มีตัวหนังสือเล็กกว่า 12px — เดิมป้ายอังกฤษ 10–11px รวม 25 จุด (Shure Logitech Biamp Q-SYS Yealink ไม่มีเลย) */
.eyb{font-size:.75rem;letter-spacing:2.2px}
.bt-gh span{font-size:.75rem;letter-spacing:1.5px}
.bt-tx em{font-size:.75rem;letter-spacing:1.3px}
/* 3 ขอบซ้ายขวาบนมือถือ 20px เท่าหัวเว็บและหน้าอื่น (เดิมหน้าแรก 28 หัวเว็บ 16) */
@media(max-width:719px){
.w,.bn-in{padding-left:20px;padding-right:20px}
.bn-dots{left:20px}
}
/* ลิงก์ในแถวติดต่อ: พื้นที่แตะสูงพอสำหรับนิ้ว (เดิมสูง 23px) */
.ctc dd a{display:inline-block;padding:11px 0 10px;margin:-11px 0 -11px}
/* ===== ตารางยี่ห้อ: โลโก้ใหญ่เท่ากันทางสายตา (V3.156) — ขนาดของแต่ละโลโก้คำนวณใน services/home.py logo_box() ส่งมาเป็น --w/--h
โลโก้ที่วัดไม่ได้ (ลิงก์นอก /static/) ใช้เพดานเดิม · พื้นขาวของไฟล์รูปกลืนกับช่องด้วย multiply */
.bl img{max-width:132px;max-height:52px;width:var(--w,auto);height:var(--h,auto);mix-blend-mode:multiply}
@media(max-width:1000px){
.bl img{max-width:98px;max-height:38px;width:calc(var(--w) * .74);height:calc(var(--h) * .74)}
}