/* หน้าแรกแบบแอป (แนว 7-Eleven / ALL ONLINE) · ชุดสี Berry Red / Champagne / Navy · 22 ก.ย. 2569 */
.kj-home{--kb:#C32148;--kbd:#9F1937;--kc:#F7E7CE;--kn:#172A46;display:flex!important;flex-direction:column;gap:14px!important;max-width:1100px;margin:0 auto}
.kj-home .app-search-wrap{display:none}
/* แบนเนอร์เลื่อน */
.kj-banner{position:relative;margin:0 -2px}
.kj-banner-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:20px;scrollbar-width:none;box-shadow:0 8px 24px #172A4622}
.kj-banner-track::-webkit-scrollbar,.kj-grid-track::-webkit-scrollbar{display:none}
.kj-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:230px;display:flex;align-items:center;overflow:hidden;color:#fff;text-decoration:none}
.kj-slide img{position:absolute;right:0;top:0;height:100%;width:58%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.kj-slide.s1{background:linear-gradient(120deg,#C32148 0%,#9F1937 60%,#7a1230 100%)}
.kj-slide.s2{background:linear-gradient(120deg,#172A46 0%,#23406a 100%)}
.kj-slide.s3{background:linear-gradient(120deg,#E0A53B 0%,#C32148 100%)}
.kj-slide.s4{background:linear-gradient(120deg,#2f6f8f 0%,#172A46 100%)}
.kj-slide-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:22px 20px;max-width:64%}
.kj-slide-copy small{font-size:11px;font-weight:800;letter-spacing:.04em;background:#ffffff26;align-self:flex-start;padding:3px 10px;border-radius:99px}
.kj-slide-copy strong{font-size:26px;line-height:1.2;font-weight:900;text-shadow:0 2px 8px #0003}
.kj-slide-copy strong b{font-size:38px;color:var(--kc)}
.kj-slide-copy em{font-style:normal;font-size:13px;opacity:.95}
.kj-slide-btn{align-self:flex-start;margin-top:6px;background:#fff;color:var(--kb);font-weight:900;font-size:13px;padding:8px 16px;border-radius:99px;box-shadow:0 3px 10px #0002}
.kj-banner-dots,.kj-grid-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.kj-banner-dots i,.kj-grid-dots i{width:16px;height:4px;border-radius:4px;background:#172A4622;transition:.2s}
.kj-banner-dots i.on{background:var(--kb);width:26px}
.kj-grid-dots i.on{background:#E0A53B;width:26px}
/* 3 การ์ดใหญ่ */
.kj-big3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kj-big{background:#fff;border-radius:18px;box-shadow:0 4px 16px #172A4617;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 6px 12px;gap:4px;color:var(--kn);text-decoration:none;border:1px solid #F0E3D2;transition:transform .15s}
.kj-big:active{transform:scale(.97)}
.kj-big b{font-size:15px;font-weight:900;color:var(--kb)}
.kj-big small{font-size:12px;color:#5b6474}
.kj-big-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:4px}
.kj-big-ic svg{width:30px;height:30px}
.berry{background:#C32148;color:#fff}.navy{background:#172A46;color:#fff}.gold{background:#F7E7CE;color:#9F1937}
.kj-big-ic.berry{box-shadow:0 0 0 6px #F9E3E8}.kj-big-ic.navy{box-shadow:0 0 0 6px #E3E8F0}.kj-big-ic.gold{box-shadow:0 0 0 6px #FFF4E3}
/* ไอคอนทางลัด */
.kj-grid-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.kj-grid-page{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px;padding:4px 2px}
.kj-ico{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--kn)}
.kj-ico-box{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;box-shadow:0 3px 8px #172A461c}
.kj-ico-box svg{width:30px;height:30px}
.kj-ico-label{font-size:13px;line-height:1.25;text-align:center;font-weight:600}
/* แถบเรียนสดวันนี้ */
.kj-live{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #F0E3D2;border-radius:16px;padding:12px 14px;box-shadow:0 3px 12px #172A4612}
.kj-live>div{flex:1;display:flex;flex-direction:column}.kj-live b{font-size:15px;color:var(--kn)}.kj-live span{font-size:12px;color:#5b6474}
.kj-live-dot{width:12px;height:12px;border-radius:50%;background:#e02d4f;box-shadow:0 0 0 0 #e02d4f88;animation:kjpulse 1.6s infinite;flex:none}
@keyframes kjpulse{70%{box-shadow:0 0 0 10px #e02d4f00}100%{box-shadow:0 0 0 0 #e02d4f00}}
.kj-live-btn{background:var(--kb);color:#fff!important;font-weight:800;font-size:14px;padding:9px 16px;border-radius:99px;text-decoration:none;white-space:nowrap}
/* หัวข้อ */
.kj-bar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#172A46,#2a4670);color:#fff;border-radius:99px;padding:10px 18px;margin-top:6px}
.kj-bar h2{font-size:17px;margin:0;color:#fff;font-weight:900}.kj-bar a{color:#fff;font-size:13px;text-decoration:none;font-weight:700}
/* แพ็กเกจแบบคูปอง */
.kj-coupons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kj-coupon{display:flex;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 12px #172A4614;text-decoration:none;color:var(--kn);min-height:118px}
.kj-coupon-left{flex:0 0 78px;background:var(--kb);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;-webkit-mask:radial-gradient(circle 6px at 0 12px,#0000 98%,#000) 0 -6px/100% 18px repeat-y;mask:radial-gradient(circle 6px at 0 12px,#0000 98%,#000) 0 -6px/100% 18px repeat-y}
.kj-coupon-left small{font-size:11px;opacity:.9}.kj-coupon-left b{font-size:17px;font-weight:900}
.kj-coupon-body{flex:1;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-left:2px dashed #E8D8C7;position:relative}
.kj-coupon-body i{position:absolute;top:8px;right:8px;font-style:normal;font-size:10px;font-weight:800;background:#F7E7CE;color:#9F1937;padding:2px 7px;border-radius:99px}
.kj-coupon-body strong{font-size:20px;font-weight:900;color:var(--kn)}.kj-coupon-body>span{font-size:11.5px;color:#5b6474}
.kj-coupon-btn{align-self:flex-end;margin-top:auto;background:#172A46;color:#fff!important;font-weight:800;font-size:12px!important;padding:6px 13px;border-radius:8px}
.kj-home .lt-home-card{margin:0}
/* แถบเมนูล่าง: ปุ่มกลางยกขึ้น */
.kj-tabbar #app-cart-badge{display:none!important}
.kj-tabbar a,.kj-tabbar button{font-size:11px!important}
.kj-tab-center{position:relative}
.kj-tab-fab{width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#C32148,#9F1937);color:#fff;display:grid!important;place-items:center;margin-top:-30px;box-shadow:0 6px 16px #C3214866;border:4px solid #fff}
.kj-tab-fab svg{width:28px!important;height:28px!important}
.kj-tabbar .kj-tab-center.active{background:none!important}
@media(min-width:901px){.kj-slide{min-height:300px}.kj-slide-copy{padding:36px 40px}.kj-slide-copy strong{font-size:36px}.kj-slide-copy strong b{font-size:50px}.kj-slide-copy em{font-size:15px}
 .kj-grid-page{grid-template-columns:repeat(6,1fr)}.kj-coupons{grid-template-columns:repeat(4,1fr)}.kj-big{padding:20px 10px}.kj-big b{font-size:18px}}
@media(max-width:600px){.kj-slide{min-height:200px}.kj-slide img{width:55%}.kj-slide-copy{max-width:72%;padding:18px 16px}.kj-slide-copy strong{font-size:21px}.kj-slide-copy strong b{font-size:30px}.kj-slide-copy em{font-size:11.5px}
 .kj-big b{font-size:13.5px}.kj-big small{font-size:11px}.kj-big-ic{width:50px;height:50px}.kj-big-ic svg{width:26px;height:26px}
 .kj-ico-box{width:56px;height:56px;border-radius:16px}.kj-ico-label{font-size:12px}
 .kj-coupons{grid-template-columns:1fr}}
.kj-home .app-shortcuts[hidden]{display:none!important}
.kj-tabbar{overflow:visible!important}.kj-tab-center,.kj-tab-center span{overflow:visible!important}
@media(max-width:600px){.kj-coupon{min-height:84px}.kj-coupon-left{flex-basis:70px}.kj-coupon-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 8px}.kj-coupon-body strong{flex:1 0 100%;font-size:18px}.kj-coupon-body>span:not(.kj-coupon-btn){flex:1}.kj-coupon-btn{margin-top:0}}
.app-bottom-nav.kj-tabbar a span.kj-tab-fab{display:grid!important;place-items:center}
@media(min-width:901px){.kj-grid-track{display:grid;grid-template-columns:repeat(6,1fr);gap:18px 8px;overflow:visible}.kj-grid-page{display:contents}.kj-grid-dots{display:none}}
/* 22 ก.ย. 2569 รอบ 3: ตัดเมนูซ้ำ — การ์ดใหญ่ 3 ใบ + ไอคอนลัด 5 อันที่ไม่ซ้ำ (ใหญ่ขึ้น) */
.kj-home .lt-home-card{display:none!important}
.kj-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;background:#fff;border:1px solid #F0E3D2;border-radius:20px;padding:18px 10px;box-shadow:0 4px 16px #172A4612}
.kj-grid5 .kj-ico-box{width:74px!important;height:74px!important;border-radius:22px!important}
.kj-grid5 .kj-ico-box.art svg{width:56px!important;height:56px!important}
.kj-grid5 .kj-ico-label{font-size:14px;font-weight:800}
@media(max-width:600px){.kj-grid5{grid-template-columns:repeat(5,1fr);gap:4px;padding:14px 4px}.kj-grid5 .kj-ico-box{width:58px!important;height:58px!important;border-radius:17px!important}.kj-grid5 .kj-ico-box.art svg{width:44px!important;height:44px!important}.kj-grid5 .kj-ico-label{font-size:11.5px}}
@media(max-width:360px){.kj-grid5{grid-template-columns:repeat(3,1fr);row-gap:12px}}
/* 22 ก.ย. 2569 รอบ 4: การ์ดใหญ่ + ไอคอนลัดแบบแอป 7-Eleven — กรอบสี่เหลี่ยมมนใหญ่ โทนสีเดียว (Berry Red) */
.kj-home .kj-big3{gap:12px}
.kj-home .kj-big{border-radius:22px;border:0;box-shadow:0 6px 18px #172A461f;padding:18px 8px 14px;gap:6px;justify-content:center;min-height:150px}
.kj-home .kj-big b{color:var(--kb);font-size:17px}
.kj-home .kj-big small{color:#6b7280}
.kj-home .kj-big .kj-big-ic.art{width:74px!important;height:74px!important;border-radius:22px!important;box-shadow:0 4px 10px #C3214833!important;background:linear-gradient(150deg,#E4466B,#C32148)!important}
.kj-home .kj-big .kj-big-ic.art svg{width:56px!important;height:56px!important}
.kj-home .kj-grid5{background:none;border:0;box-shadow:none;padding:6px 0;gap:10px}
.kj-home .kj-grid5 .kj-ico-box.art{width:84px!important;height:84px!important;border-radius:22px!important;background:linear-gradient(150deg,#E4466B,#C32148)!important;box-shadow:0 4px 10px #C3214833}
.kj-home .kj-grid5 .kj-ico-box.art svg{width:60px!important;height:60px!important}
.kj-home .kj-grid5 .kj-ico-label{font-weight:600;color:var(--kn);font-size:15px}
@media(min-width:901px){.kj-home .kj-big{min-height:190px}.kj-home .kj-big .kj-big-ic.art{width:92px!important;height:92px!important;border-radius:26px!important}.kj-home .kj-big .kj-big-ic.art svg{width:68px!important;height:68px!important}.kj-home .kj-big b{font-size:20px}
 .kj-home .kj-grid5 .kj-ico-box.art{width:96px!important;height:96px!important;border-radius:26px!important}.kj-home .kj-grid5 .kj-ico-box.art svg{width:68px!important;height:68px!important}}
@media(max-width:600px){.kj-home .kj-big3{gap:8px}.kj-home .kj-big{min-height:128px;border-radius:18px;padding:12px 4px 10px}.kj-home .kj-big b{font-size:14px}.kj-home .kj-big .kj-big-ic.art{width:60px!important;height:60px!important;border-radius:18px!important}.kj-home .kj-big .kj-big-ic.art svg{width:46px!important;height:46px!important}
 .kj-home .kj-grid5{gap:4px}.kj-home .kj-grid5 .kj-ico-box.art{width:60px!important;height:60px!important;border-radius:17px!important}.kj-home .kj-grid5 .kj-ico-box.art svg{width:46px!important;height:46px!important}.kj-home .kj-grid5 .kj-ico-label{font-size:12px}}
/* หน้าแรก: แสดงปกหนังสือเต็มเล่ม ไม่ครอป */
.kj-home .app-book-art{height:auto!important;aspect-ratio:3/4;padding:10px!important;background:linear-gradient(160deg,#FBF1E4,#F7E7CE)!important}
.kj-home .app-book-photo{border-radius:5px 8px 8px 5px;box-shadow:0 6px 12px #172A4633;object-fit:cover}