:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#16a34a;
  --brand2:#10b981;
  --warn:#f59e0b;
  --shadow: 0 10px 25px rgba(15,23,42,.08);

  /* ✅ HERO tuning */
  --hero-left:#0b1220;
  --hero-right:#3b2f2f;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Kanit",Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

/* container */
.container{max-width:1200px;margin:0 auto;padding:20px}

/* topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px; max-width:1200px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800;
}
.brand .dot{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 20px rgba(16,185,129,.25);
}
.brand span{font-size:20px}
.actions{display:flex; align-items:center; gap:10px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:#fff;
}
.badge b{font-weight:800}

/* layout */
.layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:start;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.p{padding:16px}
.h{
  font-weight:800;
  margin:0 0 10px 0;
}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:12px 0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;            /* ✅ กันแตกบรรทัดในปุ่ม */
}
.btn.primary{
  background:linear-gradient(135deg,var(--warn),#fb923c);
  border:none;
  color:#111827;
}
.btn.green{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;
  color:white;
}

/* search */
.search-bar .btn,
.search-bar button,
.search-bar a {
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}
.input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
}

/* =========================
   ✅ HERO (ปรับให้เหมือนรูปที่ 2)
   ========================= */
.hero{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);

  /* ✅ ให้ภาพ/พื้นหลังเต็มกรอบ */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  /* ✅ fallback ถ้าไม่มีภาพ */
  background-image:
    linear-gradient(135deg, rgba(11,18,32,.78), rgba(11,18,32,.25)),
    radial-gradient(1200px 400px at 0% 0%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(900px 350px at 100% 0%, rgba(245,158,11,.14), transparent 60%),
    linear-gradient(135deg, var(--hero-left, #0b1220), var(--hero-right, #3b2f2f));

  color:#fff;

  /* ✅ ความสูงแบบแบนเนอร์ */
  min-height:120px;
}

/* overlay บางๆ ให้ตัวหนังสืออ่านง่าย ถ้าใช้รูปพื้นหลังจริง */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.08) 100%);
  pointer-events:none;
}

.hero .inner{
  position:relative;
  z-index:1;

  /* ✅ จัดแนวแบบแบนเนอร์: ซ้ายข้อความ ขวาปุ่ม */
  padding:16px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* ✅ ลดตัวอักษรให้เหมือนรูปที่ 2 */
.hero .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  font-weight:800;
  font-size:12px;
  line-height:1;
}

.hero h1{
  margin:8px 0 0 0;
  font-size:18px;          /* ✅ ลดจาก 26 */
  line-height:1.15;
  letter-spacing:.1px;
}
.hero p{
  margin:6px 0 0 0;
  font-size:12px;          /* ✅ ลดลง */
  color:rgba(255,255,255,.85);
}

/* ปุ่มบน hero ให้ดูเหมือนแบนเนอร์ */
.hero .btn.primary{
  height:40px;
  padding:0 14px;
  border-radius:14px;
  font-weight:900;
}

/* =========================
   grid products
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.product{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(15,23,42,.06);
  display:flex; flex-direction:column;
}
.product .body{ padding:14px; }

/* ✅ รูปเต็มกรอบทุกขนาด */
.product .img{
  display:block;
  width:100%;
  overflow:hidden;
  background:#0b1220;
  aspect-ratio: 1 / 1;          /* ✅ ทำกรอบรูปให้คงที่ */
}
.product .img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* name */
.product .name{font-weight:800; line-height:1.25}

/* ✅ meta จัดระยะราคา/แท็ก */
.product .meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.product .meta .price{
  font-weight:900;
  color:var(--brand);
  line-height:1.15;
}
.old-price{
  color:#94a3b8;
  text-decoration:line-through;
  font-weight:800;
  font-size:13px;
  display:block;               /* ✅ ให้ราคาเดิมลงบรรทัดใหม่ */
  margin-top:6px;              /* ✅ ห่างจากราคาใหม่ */
}

/* tags */
.tag{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  white-space:nowrap;
}
.tag.sale{background:#fff7ed;color:#9a3412}
.tag.new{background:#ecfdf5;color:#065f46}

/* ✅ ปุ่มให้เท่ากัน + ไม่ตกบรรทัด */
.product .body > div:last-child{
  display:flex !important;
  gap:12px;
  margin-top:12px;
}
.product .body > div:last-child > a.btn,
.product .body > div:last-child > form{
  flex:1 !important;
}
.product .body > div:last-child > form .btn{
  width:100% !important;
}
.product .body > div:last-child .btn{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

/* categories */
.catlist a{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 10px;
  border-radius:12px;
}
.catlist a:hover{background:#f3f4f6}
.catlist .active{background:#ecfdf5;border:1px solid #bbf7d0}

/* pager */
.pager{
  display:flex; gap:8px; justify-content:center;
  margin-top:16px;
}
.pager a{
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:#fff; font-weight:800;
}

/* footer */
.footer{
  margin-top:28px; padding:22px 0; color:var(--muted);
  text-align:center;
}

/* ✅ images generic */
img { max-width: 100%; height: auto; }

/* responsive */
@media (max-width:1100px){
  .grid{grid-template-columns: repeat(3,1fr);}
  .layout{grid-template-columns: 300px 1fr;}

  .hero{ min-height:115px; }
  .hero h1{ font-size:17px; }
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;}
  .grid{grid-template-columns: repeat(2,1fr);}

  .topbar .row{
    flex-wrap: wrap;
    gap:10px;
  }
  .actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap: wrap;
    gap:8px;
  }
  .badge{
    padding:8px 10px;
    border-radius:12px;
  }

  /* ✅ Hero มือถือให้เป็นแบนเนอร์จริง */
  .hero .inner{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:14px;
  }
  .hero h1{ font-size:16px; }
  .hero p{ font-size:12px; }
  .hero .btn.primary{ height:38px; }
}
@media (max-width:520px){
  .container{ padding:12px; }
  .grid{grid-template-columns:1fr;}

  .topbar .row{ padding:12px 12px; }
  .brand span{ font-size:18px; }
  .brand .dot{ width:30px; height:30px; border-radius:10px; }

  .btn, .badge{ min-height:42px; }

  /* ✅ มือถือ: ตัวอักษรเล็ก + banner เต็ม */
  .hero{ min-height:105px; border-radius:16px; }
  .hero .inner{ padding:12px; }
  .hero .pill{ font-size:11px; padding:6px 9px; }
  .hero h1{ font-size:15px; }
  .hero p{ font-size:11px; }

  .product .body{ padding:12px; }
  .product .name{ font-size:16px; }
}

/* ===== Admin Dashboard UI : Cyber / Neon ===== */
body:has(.admin-wrap){
  background:
    radial-gradient(900px 360px at 95% -10%, rgba(151,71,255,.32), transparent 62%),
    radial-gradient(700px 380px at -12% 8%, rgba(0,211,255,.18), transparent 58%),
    linear-gradient(180deg,#050b18 0%,#07101f 44%,#050914 100%) !important;
  color:#eaf2ff; min-height:100vh;
}
.admin-wrap{max-width:1220px;margin:0 auto;padding:26px 18px 42px;}
.admin-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:18px;margin-bottom:18px;border:1px solid rgba(121,91,255,.35);border-radius:24px;background:linear-gradient(135deg,rgba(8,18,38,.92),rgba(20,12,50,.84)),radial-gradient(380px 150px at 100% 0%,rgba(173,61,255,.25),transparent 70%);box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);position:relative;overflow:hidden;}
.admin-top:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:translateX(-120%);animation:adminShine 7s linear infinite;pointer-events:none;}
@keyframes adminShine{to{transform:translateX(120%);}}
.admin-title h1{margin:0;font-size:26px;line-height:1;letter-spacing:.2px;color:#fff;text-shadow:0 0 22px rgba(77,214,255,.35);}
.admin-title .sub{color:#8edcff;margin-top:9px;font-size:13px;font-weight:700;}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;position:relative;z-index:1;}
.admin-nav a{min-height:44px;padding:0 15px;border-radius:15px;border:1px solid rgba(92,126,255,.45);background:linear-gradient(180deg,rgba(12,22,48,.88),rgba(8,14,31,.92));color:#f3f7ff;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 12px 30px rgba(0,0,0,.25);}
.admin-nav a:hover{transform:translateY(-2px);border-color:rgba(176,72,255,.8);box-shadow:0 0 22px rgba(126,68,255,.26),0 14px 34px rgba(0,0,0,.35);transition:.16s;}
.admin-nav a.primary{border:0;background:linear-gradient(135deg,#7b2cff,#16c8ff 55%,#00e0a4);color:#fff;box-shadow:0 0 26px rgba(71,130,255,.34),0 16px 34px rgba(0,0,0,.32);}
.admin-badge,.live-new-order-count{display:inline-flex;min-width:22px;height:22px;padding:0 7px;border-radius:999px;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff3b7a,#ff7a31);color:#fff;font-size:12px;font-weight:950;box-shadow:0 0 18px rgba(255,62,111,.45);vertical-align:middle;}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px;}
.kpi{border:1px solid rgba(92,126,255,.36);border-radius:22px;background:radial-gradient(220px 150px at 105% 88%,rgba(25,220,194,.18),transparent 70%),linear-gradient(145deg,rgba(12,24,52,.9),rgba(9,13,31,.95));box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);padding:18px;position:relative;overflow:hidden;min-height:150px;}
.kpi:before{content:"";position:absolute;inset:auto -62px -62px auto;width:178px;height:178px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(34,238,210,.28),rgba(151,71,255,.14) 45%,transparent 68%);}
.kpi:after{content:"";position:absolute;inset:0;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 36%);pointer-events:none;}
.kpi .row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:relative;z-index:1;}
.kpi .label{color:#9fbaff;font-weight:900;letter-spacing:.02em;}
.kpi .value{font-size:38px;font-weight:950;line-height:1;margin-top:12px;color:#f8fbff;text-shadow:0 0 26px rgba(110,175,255,.35);}
.kpi .hint{color:#8ba0c9;font-size:12px;margin-top:12px;font-weight:700;}
.kpi .icon{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(101,71,255,.26),rgba(29,214,255,.18));border:1px solid rgba(126,154,255,.38);font-size:20px;box-shadow:0 0 24px rgba(79,159,255,.22);}
.kpi.green .icon{background:linear-gradient(135deg,rgba(0,224,164,.28),rgba(22,200,255,.15));}
.kpi.orange .icon{background:linear-gradient(135deg,rgba(255,124,49,.24),rgba(255,52,133,.14));}
.kpi.blue .icon{background:linear-gradient(135deg,rgba(22,200,255,.24),rgba(123,44,255,.18));}
.new-order-banner{margin-bottom:16px;border:1px solid rgba(255,90,130,.55) !important;background:radial-gradient(520px 130px at 100% 0%,rgba(255,69,133,.22),transparent 70%),linear-gradient(135deg,rgba(45,14,35,.94),rgba(15,20,45,.94)) !important;color:#fff;box-shadow:0 0 28px rgba(255,61,120,.2),0 20px 50px rgba(0,0,0,.28);}
.new-order-banner .muted{color:#ffc7da;}
.panel-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px;}
.panel{border:1px solid rgba(92,126,255,.34);border-radius:22px;background:linear-gradient(145deg,rgba(11,23,50,.92),rgba(8,12,29,.97));box-shadow:0 22px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;}
.panel .head{padding:15px 16px;border-bottom:1px solid rgba(117,145,255,.18);display:flex;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(28,44,91,.42),rgba(68,23,109,.22));}
.panel .head .t{font-weight:950;color:#fff;text-shadow:0 0 18px rgba(77,214,255,.25);}
.panel .body{padding:14px 16px;}
.panel .muted,.muted{color:#8ba0c9;}
.admin-wrap .btn{border:1px solid rgba(92,126,255,.35);background:linear-gradient(180deg,rgba(17,33,70,.9),rgba(10,15,34,.96));color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.22);font-weight:950;}
.admin-wrap .btn.orange{border:0;background:linear-gradient(135deg,#ff3b7a,#ff7a31);color:#fff;box-shadow:0 0 22px rgba(255,62,111,.28),0 12px 26px rgba(0,0,0,.25);}
.table{width:100%;border-collapse:separate;border-spacing:0 9px;}
.table th,.table td{padding:11px 10px;text-align:left;font-size:14px;border-bottom:0;}
.table th{color:#7f98ce;font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.table tbody tr{background:rgba(255,255,255,.045);box-shadow:0 0 0 1px rgba(117,145,255,.12) inset;}
.table tbody tr td:first-child{border-radius:14px 0 0 14px;}
.table tbody tr td:last-child{border-radius:0 14px 14px 0;}
.table td{color:#eaf2ff;}
.status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:950;font-size:12px;border:1px solid rgba(255,255,255,.16);background:rgba(248,250,252,.08);color:#f8fbff;}
.status.pending{background:rgba(255,122,49,.13);color:#ffd6b8;border-color:rgba(255,122,49,.35);}
.status.paid{background:rgba(0,224,164,.12);color:#b7ffe9;border-color:rgba(0,224,164,.35);}
.status.packing{background:rgba(22,200,255,.12);color:#bceeff;border-color:rgba(22,200,255,.35);}
.status.shipped{background:rgba(151,71,255,.14);color:#e3d2ff;border-color:rgba(151,71,255,.42);}
.status.completed{background:rgba(0,224,164,.12);color:#b7ffe9;border-color:rgba(0,224,164,.35);}
.status.cancelled{background:rgba(255,59,122,.12);color:#ffc4d5;border-color:rgba(255,59,122,.38);}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.quick a{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:17px;border:1px solid rgba(92,126,255,.32);background:linear-gradient(145deg,rgba(17,33,70,.75),rgba(9,15,34,.9));box-shadow:0 12px 32px rgba(0,0,0,.24);color:#fff;font-weight:950;}
.quick a span{color:#8ba0c9;font-weight:800;font-size:12px;}
.quick a:hover{transform:translateY(-2px);border-color:rgba(22,200,255,.65);transition:.15s;}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr);}.panel-grid{grid-template-columns:1fr;}}
@media (max-width:620px){.admin-wrap{padding:8px 8px 28px;}.admin-top{border-radius:0 0 22px 22px;margin:0 -8px 14px;padding:18px 14px;}.admin-title h1{font-size:22px;}.admin-nav{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:8px;justify-content:stretch;}.admin-nav a{min-height:42px;padding:0 10px;font-size:12px;border-radius:13px;}.admin-nav a.primary{grid-column:span 2;}.kpi-grid{grid-template-columns:1fr;gap:12px;}.kpi{min-height:128px;padding:17px;border-radius:20px;}.kpi .value{font-size:32px;}.panel{border-radius:20px;}.panel .body{padding:10px;overflow-x:auto;}.table{min-width:720px;}.quick{grid-template-columns:1fr;}}
/* ===== Product Page ===== */
.pd-wrap{max-width:1200px;margin:0 auto;padding:20px;}
.pd-hero{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  overflow:hidden;
}
.pd-grid{display:grid;grid-template-columns: 1.05fr .95fr; gap:0;}
.pd-media{padding:18px;border-right:1px solid var(--line);     background: linear-gradient(135deg, #ffffff, #f7faff);}
.pd-media .frame{
  border-radius:16px; overflow:hidden;
  background:#0b1220; border:1px solid rgba(255,255,255,.12);
  aspect-ratio: 1 / 1;
  display:flex; align-items:center; justify-content:center;
}
.pd-media img{height:100%;object-fit:cover;display:block;}
.pd-info{padding:18px;background:#fff;}
.pd-title{margin:0;font-size:28px;line-height:1.2;font-weight:950;}
.pd-price{margin-top:10px;font-size:26px;font-weight:950;color:var(--brand);}
.pd-old{color:var(--muted);text-decoration:line-through;font-weight:800;margin-left:8px;font-size:15px;}
.pd-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.pd-tag{
  padding:7px 10px;border-radius:999px;font-weight:950;font-size:12px;
  border:1px solid var(--line); background:#f8fafc;color:#0f172a;
}
.pd-tag.new{background:#ecfdf5;color:#065f46;border-color:#bbf7d0;}
.pd-tag.sale{background:#fff7ed;color:#9a3412;border-color:#fed7aa;}
.pd-tag.stock{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}

.pd-desc{margin-top:14px;color:#334155;line-height:1.7;}
.pd-actions{
  margin-top:16px; display:flex; gap:10px; flex-wrap:wrap;
}
.pd-actions .btn{height:46px;border-radius:14px;font-weight:950;}
.pd-actions form{margin:0;}

.pd-buyrow{
  margin-top:14px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.qty{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:14px; padding:8px 10px; background:#fff;
}
.qty input{
  width:70px; border:none; outline:none; font-weight:900; text-align:center;
}
.qty button{
  width:34px;height:34px;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-weight:900;
}
.pd-meta{
  margin-top:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.pd-box{
  border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff;
}
.pd-box .k{color:var(--muted);font-weight:800;font-size:12px;}
.pd-box .v{font-weight:950;margin-top:4px;}

.pd-related{
  margin-top:16px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  padding:16px;
}
.pd-related .head{display:flex;justify-content:space-between;align-items:end;gap:10px;}
.pd-related .head .t{font-weight:950;font-size:16px;}
.pd-related .head .m{color:var(--muted);font-size:13px;}
.pd-related .grid{margin-top:12px;}

@media (max-width: 900px){
  .pd-grid{grid-template-columns:1fr;}
  .pd-media{border-right:none;border-bottom:1px solid var(--line);}
  .pd-title{font-size:22px;}
  .pd-price{font-size:22px;}
  .pd-meta{grid-template-columns:1fr;}
}

/* ===== Admin Form UI ===== */
.af-wrap{max-width:980px;margin:0 auto;padding:22px;}
.af-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.af-title{font-size:20px;font-weight:950;margin:0;}
.af-sub{color:var(--muted);font-size:13px;margin-top:4px;}

.af-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  overflow:hidden;
}
.af-card .head{
  padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
}
.af-card .head .t{font-weight:950;}
.af-card .body{padding:16px;}

.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.af-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media (max-width:900px){ .af-grid,.af-grid3{grid-template-columns:1fr;} }

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-weight:900;font-size:13px;}
.help{color:var(--muted);font-size:12px;line-height:1.45;}
.req{color:#ef4444;font-weight:950;margin-left:4px;}

.input, textarea, select{
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  padding:12px 12px !important;
  font-weight:700;
}
textarea{resize:vertical;min-height:120px;}

.af-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-weight:900;
}
.pill small{color:var(--muted);font-weight:800;}
.preview{
  padding:12px 14px;border-radius:16px;border:1px dashed #cbd5e1;background:#f8fafc;
}
.preview b{font-weight:950;}
.preview .ok{color:var(--brand);font-weight:950;}
.preview .warn{color:#b45309;font-weight:950;}
.af-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

/* ===== Cart overflow fix (mobile) ===== */
.cart-item, .cart-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.cart-item > *, .cart-row > *{
  min-width:0;                 /* สำคัญ: อนุญาตให้หด */
}

/* ชื่อสินค้า/รายละเอียด ให้ตัดบรรทัดไม่ล้น */
.cart-item .info, .cart-row .info{
  flex:1;
  min-width:0;
}
.cart-item .title, .cart-row .title{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ราคาด้านขวา ไม่ให้ดันล้น */
.cart-item .right, .cart-row .right,
.cart-item .line-total, .cart-row .line-total,
.cart-item .price-total, .cart-row .price-total{
  flex:0 0 auto;
  max-width:40%;
  text-align:right;
  white-space:nowrap;
}

/* ช่องจำนวน อย่าให้กว้างเกิน */
.cart-item input[type="number"],
.cart-row input[type="number"]{
  width:72px;
  max-width:72px;
}

/* มือถือ: จัดเป็น 2 บรรทัด (กันล้นชัวร์) */
@media (max-width:520px){
  .cart-item, .cart-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  /* รูป */
  .cart-item img, .cart-row img{
    width:54px;
    height:54px;
    border-radius:12px;
    object-fit:cover;
  }

  /* กล่องข้อมูลเต็มแถว */
  .cart-item .info, .cart-row .info{
    flex:1 1 calc(100% - 66px);
  }

  /* กล่องขวา (จำนวน+ราคารวม) ลงบรรทัดใหม่ */
  .cart-item .right, .cart-row .right,
  .cart-item .line-total, .cart-row .line-total,
  .cart-item .price-total, .cart-row .price-total{
    flex:1 1 100%;
    max-width:100%;
    text-align:right;
  }
}
/* ===== Cart Responsive Fix ===== */
.cart-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #e5e7eb;
}
.cart-row > *{ min-width:0; } /* สำคัญ: อนุญาตให้ย่อ */

.cart-img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:12px;
  flex:0 0 auto;
}

.cart-info{
  flex:1;
  min-width:0;
}
.cart-name{
  font-weight:900;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.cart-price{ margin-top:4px; }
.cart-old{
  margin-left:8px;
  text-decoration:line-through;
  color:#94a3b8;
  font-weight:800;
}

.cart-qty{
  flex:0 0 90px;
}
.cart-qty .input{
  width:100%;
}

.cart-line{
  flex:0 0 120px;
  text-align:right;
  font-weight:950;
  color:#16a34a;
  white-space:nowrap;
}

/* bottom area */
.cart-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}
.cart-left-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cart-summary{
  text-align:right;
  min-width:220px;
}
.cart-total{
  font-size:22px;
  font-weight:950;
  margin-top:4px;
}

/* ✅ มือถือ: ทำให้ไม่ล้นกรอบ */
@media (max-width:520px){
  .cart-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .cart-img{
    width:56px;
    height:56px;
  }

  .cart-info{
    flex:1 1 calc(100% - 68px);
  }

  .cart-qty{
    flex:0 0 110px;
  }

  .cart-line{
    flex:1 1 100%;
    text-align:right;
    padding-top:6px;
  }

  .cart-summary{
    width:100%;
    min-width:0;
  }
  .cart-summary .btn.green{
    width:100%;
  }
}
/* ===== FORCE FIX cart overflow (override inline width) ===== */
@media (max-width:520px){

  /* 1) บังคับให้แถวใน cart wrap */
  .card form > div[style*="display:flex"][style*="border-bottom"]{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  /* 2) รูปเล็กลง */
  .card form > div[style*="display:flex"][style*="border-bottom"] img{
    width:56px !important;
    height:56px !important;
    flex:0 0 auto !important;
  }

  /* 3) กล่องชื่อ/ราคา ให้กินพื้นที่ที่เหลือ */
  .card form > div[style*="display:flex"][style*="border-bottom"] > div[style*="flex:1"]{
    flex: 1 1 calc(100% - 68px) !important;
    min-width: 0 !important;
  }

  /* 4) ช่องจำนวน: ลดความกว้าง/ไม่ดันล้น */
  .card form > div[style*="display:flex"][style*="border-bottom"] input[type="number"]{
    width:110px !important;
    max-width:110px !important;
  }

  /* 5) ราคาขวาสุด (div width:120px) ให้ลงบรรทัดใหม่เต็มแถว */
  .card form > div[style*="display:flex"][style*="border-bottom"] > div[style*="width:120px"]{
    width:auto !important;
    flex: 1 1 100% !important;
    text-align:right !important;
    padding-top:6px !important;
    white-space:nowrap !important;
  }
}
.cat-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cat-actions .btn{flex:1;min-width:140px;white-space:nowrap;}
@media (max-width:520px){
  .cat-actions .btn{min-width:0;flex:1 1 100%;}
}

/* ===== HERO PRO (คงไว้ แต่ไม่ทับ hero หลักแบบพัง) ===== */
.hero.hero-anim{
  position:relative;
}
.hero.hero-anim:after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(600px 200px at 20% 30%, rgba(255,255,255,.08), transparent 60%);
  animation: heroShimmer 6s ease-in-out infinite;
  pointer-events:none;
}
.hero.hero-anim .inner{
  animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@keyframes heroShimmer{
  0%,100%{ transform:translateX(0); opacity:.65; }
  50%{ transform:translateX(30px); opacity:.9; }
}
/* ✅ Desktop: เพิ่มสูงบน-ล่างของ HERO อีกนิด (ไม่กระทบมือถือ) */
@media (min-width: 901px){
  .hero{
    min-height: 155px;          /* เดิมประมาณ 120 -> เพิ่มสูงขึ้น */
  }
  .hero .inner{
    padding: 22px 20px;         /* เพิ่มระยะบน-ล่าง */
    align-items: center;         /* ให้กึ่งกลางแนวตั้งสวย */
  }
}

/* ✅ Desktop ใหญ่ขึ้นอีกนิด */
@media (min-width: 1200px){
  .hero{
    min-height: 170px;
  }
  .hero .inner{
    padding: 26px 24px;
  }
}

/* ===== INDEX PRODUCT CARD: make like style #2 ===== */

/* การ์ดทั้งใบเป็น flex column เพื่อดันปุ่มลงล่าง */
.product{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* โซนรูปให้เท่ากัน */
.product .img{
  aspect-ratio: 1 / 1 !important;
}

/* โซนเนื้อหาต้องยืดได้ เพื่อให้ปุ่มอยู่ล่าง */
.product .body{
  display:flex !important;
  flex-direction:column !important;
  gap:10px;
  flex:1 1 auto !important;
}

/* ชื่อสินค้าให้กิน 2 บรรทัดเท่ากัน (กันการ์ดสูงไม่เท่ากัน) */
.product .name{
  min-height: 44px;              /* 2 บรรทัดประมาณนี้ */
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* meta (ราคา/แท็ก) ให้จัดระยะสม่ำเสมอ */
.product .meta{
  margin-top:auto;               /* ดัน meta ลงล่างก่อนปุ่ม */
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* ปุ่ม: ให้อยู่ล่างสุดเสมอ */
.product .body > div:last-child{
  margin-top:12px !important;
}

/* กันการ์ดเตี้ย/สูงต่างกันใน grid */
.grid{
  align-items:stretch !important;
}
/* =========================
   Category tree / collapse
   ========================= */
.cat-tree{display:flex;flex-direction:column;gap:8px}
.cat-tree-item{display:block}
.cat-tree-box{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.cat-tree-box[open]{background:#f8fafc}
.cat-tree-box summary{
  list-style:none;
  cursor:pointer;
  padding:0;
}
.cat-tree-box summary::-webkit-details-marker{display:none}
.cat-tree-summary,
.cat-tree-link.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
}
.cat-tree-summary::before{
  content:'▸';
  color:#475569;
  font-size:12px;
  flex:0 0 auto;
  transition:transform .18s ease;
}
.cat-tree-box[open] .cat-tree-summary::before{transform:rotate(90deg)}
.cat-tree-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  font-weight:700;
}
.cat-tree-link span,
.cat-tree-link:not(.row){flex:1}
.cat-tree-link b,
.cat-tree-summary b{
  min-width:28px;
  text-align:center;
  padding:3px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#0f172a;
  font-size:12px;
}
.cat-tree-link.active{
  color:#166534;
}
.cat-tree-link.active b{background:#dcfce7;color:#166534}
.cat-tree-box .cat-tree-link.active,
.cat-tree-link.row.active{
  background:#ecfdf5;
  border-radius:12px;
  padding:9px 10px;
}
.cat-tree-children{
  padding:0 10px 10px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.level-1>.cat-tree-box,.level-1>.cat-tree-link.row{box-shadow:0 4px 12px rgba(15,23,42,.04)}
.product-path{
  margin-top:7px;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
  min-height:34px;
}
.empty-products{
  grid-column:1 / -1;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:28px 18px;
  text-align:center;
  background:#f8fafc;
}
@media (max-width: 768px){
  .cat-tree-summary,
  .cat-tree-link.row,
  .cat-tree-link{font-size:14px}
  .cat-tree-children{padding-left:14px}
}


.ajax-loading{opacity:.55;pointer-events:none;transition:opacity .2s ease;}
.btn.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c;}
.btn.danger:hover{background:#ffe4e6;}
@media (max-width:700px){
  #productsContainer .product{scroll-margin-top:20px;}
  .btn.danger{width:100%;}
}
/* ??? 2 card ?????? ??????????? */
@media (max-width: 768px){
  .grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .card{
    width: 100%;
    padding: 10px;
  }

  .card img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* =========================================================
   SEEYOUSOON Cyber Space Theme
   เพิ่มธีมหน้าเว็บให้ใกล้กับภาพตัวอย่าง: ดำ/ม่วง/น้ำเงิน นีออน
   ========================================================= */
:root{
  --bg:#030711;
  --card:rgba(9,18,42,.82);
  --text:#eaf2ff;
  --muted:#8fa6cc;
  --line:rgba(100,137,255,.24);
  --brand:#8c2cff;
  --brand2:#16d8ff;
  --warn:#b64cff;
  --shadow:0 18px 45px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  --neon-purple:#bd38ff;
  --neon-blue:#16d8ff;
  --deep:#061022;
}

html{background:#030711;}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(680px 360px at 85% 6%, rgba(151,55,255,.36), transparent 62%),
    radial-gradient(620px 360px at 8% 18%, rgba(22,216,255,.16), transparent 58%),
    radial-gradient(720px 420px at 50% 84%, rgba(98,51,255,.16), transparent 65%),
    linear-gradient(180deg,#030711 0%,#061022 48%,#030711 100%);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 72%);
}

/* Topbar */
.topbar{
  border-bottom:0;
  background:linear-gradient(180deg,rgba(3,7,17,.94),rgba(3,7,17,.70));
  backdrop-filter:blur(14px);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.topbar .row{max-width:1120px;padding:16px 14px 12px;}
.brand{letter-spacing:.8px;text-transform:uppercase;color:#eef6ff;text-shadow:0 0 18px rgba(22,216,255,.35);}
.brand .dot{
  width:36px;height:36px;border-radius:12px;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 7%, transparent 8%),
    linear-gradient(135deg,#8f39ff,#20e3ff);
  box-shadow:0 0 20px rgba(154,61,255,.55),0 0 28px rgba(22,216,255,.28);
  transform:skew(-8deg);
}
.brand span{font-weight:950;font-style:italic;font-size:20px;}
.cart-icon svg{filter:drop-shadow(0 0 8px rgba(255,255,255,.45));}

.actions{gap:10px;}
.badge{
  color:#eaf2ff;
  background:linear-gradient(180deg,rgba(9,20,47,.88),rgba(5,12,30,.88));
  border:1px solid rgba(83,120,255,.32);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(155,55,255,.08);
  min-height:44px;
}
.badge:hover{border-color:rgba(183,63,255,.66);box-shadow:0 0 22px rgba(142,53,255,.18), inset 0 1px 0 rgba(255,255,255,.08);}
.badge b{color:#fff;}
.nav-ico{filter:drop-shadow(0 0 8px rgba(184,63,255,.55));}
.badge-line .line-dot,.line-dot{
  display:inline-flex;align-items:center;justify-content:center;
  height:22px;min-width:34px;padding:0 5px;border-radius:999px;
  background:#06c755;color:#fff;font-size:9px;font-weight:950;letter-spacing:-.4px;
  box-shadow:0 0 16px rgba(6,199,85,.38);
}

/* Layout */
.container{max-width:1120px;padding:14px;}
.layout{grid-template-columns:1fr 1.04fr;gap:14px;}
.side-stack{display:flex;flex-direction:column;gap:14px;min-width:0;}
.card{
  position:relative;
  overflow:hidden;
  color:var(--text);
  background:
    linear-gradient(180deg,rgba(12,25,58,.9),rgba(5,14,35,.92));
  border:1px solid rgba(77,111,255,.32);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(340px 120px at 14% 0%, rgba(177,55,255,.18), transparent 70%),
    radial-gradient(260px 110px at 96% 28%, rgba(22,216,255,.12), transparent 72%);
}
.card > *{position:relative;z-index:1;}
.p{padding:16px;}
.h{font-weight:950;font-size:22px;letter-spacing:.2px;color:#fff;text-shadow:0 0 20px rgba(22,216,255,.18);}
.muted{color:var(--muted);font-weight:650;}
.hr{background:linear-gradient(90deg,transparent,rgba(140,44,255,.55),rgba(22,216,255,.35),transparent);}

/* Contact card */
.store-intro{
  min-height:176px;
  border-color:rgba(187,59,255,.5);
  background:
    radial-gradient(180px 130px at 76% 44%, rgba(178,57,255,.36), transparent 62%),
    radial-gradient(210px 180px at 100% 0%, rgba(22,216,255,.16), transparent 70%),
    linear-gradient(135deg,rgba(9,20,47,.94),rgba(4,11,28,.96));
}
.store-intro::after{
  content:"🧑‍🚀";
  position:absolute;
  right:14px;
  bottom:4px;
  font-size:118px;
  line-height:1;
  filter:drop-shadow(0 0 24px rgba(179,60,255,.55));
  opacity:.96;
}
.intro-content{max-width:60%;}
.intro-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.store-intro .btn.green{box-shadow:0 0 22px rgba(22,216,255,.25), inset 0 1px 0 rgba(255,255,255,.14);}

/* Category */
.section-title{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-weight:950;font-size:18px;color:#fff;
}
.cube-ico{
  width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  color:#22e4ff;background:linear-gradient(135deg,rgba(141,45,255,.25),rgba(22,216,255,.2));
  box-shadow:0 0 18px rgba(151,55,255,.35);
}
.cat-tree{gap:9px;}
.cat-tree-box{
  background:rgba(4,16,40,.68);
  border:1px solid rgba(66,108,255,.22);
  border-radius:14px;
}
.cat-tree-box[open]{background:rgba(7,20,50,.78);}
.cat-tree-summary,.cat-tree-link.row{padding:12px 13px;}
.cat-tree-summary::before{color:#b942ff;text-shadow:0 0 12px rgba(185,66,255,.8);}
.cat-tree-link{color:#dce9ff;font-weight:850;}
.cat-tree-link b,.cat-tree-summary b{
  min-width:36px;
  padding:4px 9px;
  background:rgba(92,43,205,.58);
  color:#e9ddff;
  border:1px solid rgba(174,68,255,.23);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cat-tree-link.row,.cat-tree-box{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.cat-tree-box .cat-tree-link.active,.cat-tree-link.row.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(184,51,255,.72),rgba(91,36,180,.58));
  border:1px solid rgba(200,83,255,.52);
  box-shadow:0 0 22px rgba(159,55,255,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.cat-tree-link.active b{background:#4d2de2;color:#fff;}

/* Hero banner */
.hero{
  border-radius:18px;
  min-height:156px;
  border:1px solid rgba(188,57,255,.62);
  box-shadow:0 0 0 1px rgba(22,216,255,.13),0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  background-image:
    radial-gradient(240px 140px at 76% 42%, rgba(73,171,255,.28), transparent 66%),
    radial-gradient(260px 150px at 18% 50%, rgba(185,55,255,.28), transparent 70%),
    linear-gradient(135deg,rgba(10,22,55,.95),rgba(6,11,30,.96)) !important;
}
.hero::before{
  background:
    linear-gradient(100deg,rgba(8,15,40,.68) 0%,rgba(8,15,40,.22) 58%,rgba(10,20,55,.50) 100%),
    repeating-linear-gradient(115deg,transparent 0 16px,rgba(22,216,255,.06) 17px 18px);
}
.hero::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:168px;
  height:118px;
  opacity:.9;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(22,216,255,.9) 0 5%, transparent 6%),
    radial-gradient(ellipse at 50% 55%, rgba(142,54,255,.55) 0 22%, transparent 23%),
    linear-gradient(145deg,rgba(12,29,63,.95),rgba(35,65,121,.88));
  border:1px solid rgba(91,201,255,.35);
  border-radius:28px;
  box-shadow:0 0 28px rgba(184,63,255,.45), inset 0 1px 0 rgba(255,255,255,.16);
  transform:perspective(260px) rotateY(-18deg) rotateZ(-8deg);
}
.hero .inner{padding:22px;min-height:156px;}
.hero .pill{
  color:#e9d8ff;
  border-color:rgba(198,72,255,.34);
  background:rgba(109,34,200,.22);
  box-shadow:0 0 18px rgba(162,58,255,.18);
}
.hero h1{
  margin-top:10px;
  font-size:28px;
  color:#d7b9ff;
  text-shadow:0 0 18px rgba(184,64,255,.46);
}
.hero p{font-size:13px;color:#98b2e2;font-weight:750;}
.hero .btn.primary{
  position:relative;z-index:2;
  color:#fff;
  background:linear-gradient(135deg,#5336ff,#b737ff);
  border:1px solid rgba(126,225,255,.58);
  box-shadow:0 0 20px rgba(44,210,255,.32), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Buttons / inputs */
.btn{
  color:#eaf2ff;
  border:1px solid rgba(93,128,255,.28);
  background:linear-gradient(180deg,rgba(10,25,58,.94),rgba(8,15,38,.94));
  border-radius:14px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn.green{
  color:#fff;
  background:linear-gradient(135deg,#0dbb63,#188bff 58%,#a232ff);
  border:1px solid rgba(93,232,255,.42);
}
.input{
  min-height:45px;
  color:#eaf2ff;
  background:rgba(3,12,31,.82);
  border:1px solid rgba(79,117,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.input::placeholder{color:#758bb4;}
.search-panel{background:linear-gradient(180deg,rgba(8,20,48,.92),rgba(5,14,35,.94));}
.search-bar form{width:100%;}
.search-bar .input{flex:1 1 280px;}

/* Product list */
#list .h,.section-title{letter-spacing:.2px;}
#list .h::before{content:"💠 ";filter:drop-shadow(0 0 8px rgba(22,216,255,.45));}
#list .muted{font-size:13px;}
.grid{grid-template-columns:repeat(3,1fr);gap:14px;}
.product{
  overflow:hidden;
  background:linear-gradient(180deg,rgba(11,25,56,.92),rgba(6,15,38,.96));
  border:1px solid rgba(70,111,255,.28);
  border-radius:18px;
  box-shadow:0 14px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
.product:hover{
  transform:translateY(-2px);
  border-color:rgba(185,60,255,.54);
  box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 24px rgba(138,56,255,.18);
}
.product .img{background:#061022;border-bottom:1px solid rgba(80,115,255,.22);}
.product .img img{transition:transform .25s ease;}
.product:hover .img img{transform:scale(1.04);}
.product .body{padding:12px;}
.product .name{color:#fff;font-size:15px;font-weight:950;min-height:40px;}
.product-path{color:#7f94bf;font-size:11px;min-height:30px;}
.product .meta .price{color:#45e6ff;text-shadow:0 0 14px rgba(69,230,255,.22);}
.old-price{color:#7084ac;}
.tag{border:1px solid rgba(255,255,255,.09);background:rgba(63,75,255,.18);color:#dcd7ff;}
.tag.sale{background:rgba(255,78,203,.13);color:#ffb9ee;}
.tag.new{background:rgba(30,232,144,.13);color:#8fffd0;}
.product .body > div:last-child .btn{height:40px;font-size:13px;}
.empty-products{background:rgba(5,15,37,.75);border-color:rgba(114,143,255,.34);}

/* Pager / footer */
.pager a{
  color:#eaf2ff;
  background:rgba(8,20,48,.88);
  border-color:rgba(83,120,255,.32);
}
.footer{color:#758bb4;}

/* Mobile fit like reference screenshot */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .topbar{position:relative;}
  .topbar .row{align-items:flex-start;}
  .actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }
  .badge{justify-content:center;padding:9px 8px;font-size:12px;min-width:0;}
  .badge b{font-size:12px;}
  .badge-line{white-space:nowrap;}
  .container{padding:10px 9px;}
  .layout{gap:12px;}
  .store-intro{min-height:172px;}
  .intro-content{max-width:58%;}
  .store-intro::after{font-size:112px;right:6px;bottom:0;}
  .hero{min-height:142px;}
  .hero .inner{min-height:142px;padding:18px;}
  .hero h1{font-size:23px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}
@media (max-width:520px){
  .topbar .row{padding:12px 8px;}
  .brand span{font-size:18px;}
  .actions{grid-template-columns:1fr 1fr 1fr;}
  .badge{border-radius:14px;min-height:40px;padding:8px 5px;gap:5px;}
  .badge-track b{font-size:0;}
  .badge-track b::after{content:"ติดตามออเดอร์";font-size:11px;}
  .badge-line{font-size:11px;}
  .p{padding:13px;}
  .h{font-size:19px;}
  .store-intro{min-height:164px;border-radius:18px;}
  .intro-content{max-width:62%;}
  .intro-actions{margin-top:18px;}
  .intro-actions .btn{width:100%;max-width:210px;height:42px;justify-content:flex-start;font-size:12px;}
  .store-intro::after{font-size:96px;right:0;bottom:8px;}
  .category-panel .section-title{font-size:17px;}
  .cat-tree{gap:8px;}
  .cat-tree-summary,.cat-tree-link.row{padding:10px 11px;}
  .hero{min-height:136px;border-radius:18px;}
  .hero .inner{min-height:136px;padding:16px;align-items:flex-end;}
  .hero h1{font-size:20px;max-width:240px;}
  .hero p{font-size:11px;}
  .hero::after{width:132px;height:88px;right:10px;top:20px;}
  .hero .btn.primary{height:38px;font-size:12px;padding:0 12px;}
  .search-bar form{display:grid !important;grid-template-columns:1fr 90px 76px;gap:8px !important;}
  .search-bar .input{grid-column:1 / -1;flex:auto;}
  .search-bar .btn{min-width:0;width:100%;}
  .grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;gap:9px;}
  .product{border-radius:14px;}
  .product .body{padding:9px;gap:7px;}
  .product .name{font-size:12px;min-height:32px;}
  .product-path{font-size:10px;min-height:24px;margin-top:0;}
  .product .meta{gap:5px;}
  .product .meta .price{font-size:12px;}
  .old-price{font-size:10px;margin-top:3px;}
  .tag{font-size:10px;padding:4px 6px;}
  .product .body > div:last-child{gap:6px !important;margin-top:8px !important;}
  .product .body > div:last-child > form{margin-left:0 !important;}
  .product .body > div:last-child .btn{height:34px;font-size:11px;padding:0 6px;border-radius:11px;}
}

/* =========================================================
   PRODUCT DETAIL - Cyber neon redesign
   ทำให้หน้ารายละเอียดสินค้าเข้ากับธีม SEEYOUSOON
   ========================================================= */
body{
  background:
    radial-gradient(900px 520px at 14% 4%, rgba(18,210,255,.13), transparent 56%),
    radial-gradient(760px 520px at 85% 12%, rgba(178,54,255,.20), transparent 58%),
    linear-gradient(180deg,#030814 0%,#061327 48%,#050916 100%) !important;
}
.pd-wrap{max-width:1180px;padding:22px 14px 34px;position:relative;}
.pd-wrap::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.34;background:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom, black, transparent 72%);}
.pd-hero,.pd-related{position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(13,25,60,.94), rgba(7,13,34,.96) 48%, rgba(28,10,61,.94)) !important;border:1px solid rgba(117,154,255,.36) !important;border-radius:26px !important;box-shadow:0 0 0 1px rgba(161,67,255,.20),0 28px 70px rgba(0,0,0,.48),0 0 45px rgba(126,56,255,.18),inset 0 1px 0 rgba(255,255,255,.10) !important;}
.pd-hero::before,.pd-related::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(430px 210px at 22% 5%, rgba(29,215,255,.15), transparent 70%),radial-gradient(430px 240px at 88% 10%, rgba(206,54,255,.18), transparent 70%),linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);}
.pd-grid{position:relative;z-index:1;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr) !important;}
.pd-media{padding:22px !important;border-right:1px solid rgba(107,150,255,.25) !important;background:radial-gradient(450px 300px at 50% 12%, rgba(39,220,255,.12), transparent 70%),linear-gradient(180deg, rgba(5,16,42,.70), rgba(4,10,28,.82)) !important;}
.pd-media .frame{position:relative;border-radius:24px !important;border:1px solid rgba(117,202,255,.42) !important;background:#050b1f !important;box-shadow:0 18px 45px rgba(0,0,0,.44),0 0 38px rgba(97,68,255,.20),inset 0 1px 0 rgba(255,255,255,.14) !important;}
.pd-media .frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 22%, transparent 74%, rgba(184,61,255,.12));}
.pd-media .frame img,#mainImage{width:100% !important;height:100% !important;object-fit:cover !important;display:block;}
.thumb-row{margin-top:14px !important;gap:10px !important;}
.thumb{width:72px !important;height:72px !important;border-radius:16px !important;border:2px solid rgba(99,139,255,.34) !important;background:#071331 !important;box-shadow:0 10px 24px rgba(0,0,0,.28) !important;opacity:.82;}
.thumb:hover,.thumb.active{opacity:1;border-color:#24e6ff !important;box-shadow:0 0 0 3px rgba(36,230,255,.16),0 0 26px rgba(166,55,255,.35) !important;}
.pd-info{padding:28px 26px !important;background:radial-gradient(420px 220px at 88% 0%, rgba(180,54,255,.15), transparent 68%),linear-gradient(180deg, rgba(9,20,48,.84), rgba(6,13,33,.92)) !important;color:#eaf2ff !important;}
.pd-tags{margin-top:0 !important;gap:9px !important;}
.pd-tag,.chip{color:#eaf2ff !important;background:rgba(8,20,50,.78) !important;border:1px solid rgba(111,153,255,.34) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(82,110,255,.09) !important;}
.pd-tag.sale{color:#ffcfef !important;background:rgba(255,77,199,.13) !important;border-color:rgba(255,104,218,.34) !important;}
.pd-tag.new,.pd-tag.stock{color:#8efcff !important;background:rgba(16,204,255,.12) !important;border-color:rgba(52,220,255,.38) !important;}
.pd-title{margin-top:13px !important;color:#f5f8ff !important;font-size:32px !important;line-height:1.18 !important;letter-spacing:-.35px;text-shadow:0 0 22px rgba(102,169,255,.22),0 0 28px rgba(190,65,255,.18) !important;}
.pd-price{margin-top:13px !important;font-size:31px !important;color:#59e7ff !important;text-shadow:0 0 22px rgba(60,221,255,.34) !important;}
.pd-old{color:#8090b8 !important;font-size:16px !important;opacity:.9;}
.pd-desc{margin-top:18px !important;color:#c8d7f0 !important;line-height:1.82 !important;font-size:15px;padding:16px 0 0;border-top:1px solid rgba(113,151,255,.20);}
.pd-meta{margin-top:16px !important;gap:12px !important;}
.pd-box{padding:14px !important;border-radius:18px !important;background:rgba(6,17,43,.76) !important;border:1px solid rgba(88,128,255,.28) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;}
.pd-box .k{color:#83a6d7 !important;font-size:12px !important;}.pd-box .v{color:#f2f7ff !important;}
.opt-row{margin-top:16px !important;gap:10px !important;}.opt-label{color:#9cb5e0 !important;width:auto !important;min-width:48px;}.chip{border-radius:14px !important;padding:10px 15px !important;}.chip-input:checked+.chip{color:#fff !important;border-color:#26e5ff !important;background:linear-gradient(135deg,rgba(19,201,255,.38),rgba(175,55,255,.36)) !important;box-shadow:0 0 0 3px rgba(38,229,255,.13),0 0 24px rgba(175,55,255,.28) !important;}
.pd-buyrow{margin-top:18px !important;gap:12px !important;}.qty{height:48px;padding:6px 8px !important;border-radius:16px !important;background:rgba(4,14,35,.84) !important;border:1px solid rgba(98,140,255,.34) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;}.qty input{color:#fff !important;background:transparent !important;width:58px !important;}.qty button{color:#fff !important;background:rgba(15,33,76,.95) !important;border-color:rgba(108,151,255,.38) !important;}.qty button:hover{border-color:#23e8ff !important;box-shadow:0 0 16px rgba(35,232,255,.25);}
.pd-buyrow .btn,.pd-actions .btn{min-height:48px;border-radius:16px !important;padding:0 18px !important;}.btn.green,.pd-buyrow .btn.green{background:linear-gradient(135deg,#09d68d 0%,#169cff 55%,#a535ff 100%) !important;border:1px solid rgba(105,237,255,.48) !important;color:#fff !important;box-shadow:0 0 22px rgba(28,185,255,.24), inset 0 1px 0 rgba(255,255,255,.20) !important;}.btn.primary,.pd-actions .btn.primary{background:linear-gradient(135deg,#b03cff 0%,#ff5fc8 48%,#ff8b48 100%) !important;border:1px solid rgba(255,207,255,.34) !important;color:#fff !important;box-shadow:0 0 24px rgba(194,67,255,.28), inset 0 1px 0 rgba(255,255,255,.20) !important;}.pd-actions{margin-top:12px !important;}
.pd-related{margin-top:18px !important;padding:18px !important;}.pd-related .head{position:relative;z-index:1;align-items:center !important;}.pd-related .head .t{color:#f2f7ff !important;font-size:18px !important;text-shadow:0 0 16px rgba(92,222,255,.18);}.pd-related .head .m{color:#83a1cf !important;}.pd-related .grid{position:relative;z-index:1;}.pd-related .product{background:linear-gradient(180deg,rgba(10,24,57,.92),rgba(5,14,36,.96)) !important;border-color:rgba(84,127,255,.30) !important;}
@media (max-width:900px){.pd-wrap{padding:18px 10px 28px !important;}.pd-grid{grid-template-columns:1fr !important;}.pd-media{padding:18px !important;border-right:0 !important;border-bottom:1px solid rgba(107,150,255,.24) !important;}.pd-info{padding:22px 18px 24px !important;}.pd-title{font-size:26px !important;}.pd-price{font-size:27px !important;}.pd-buyrow .btn,.pd-actions .btn{flex:1 1 auto;}}
@media (max-width:520px){.pd-wrap{padding:14px 8px 24px !important;}.pd-hero,.pd-related{border-radius:22px !important;}.pd-media{padding:14px !important;}.pd-media .frame{border-radius:18px !important;}.pd-media .frame::after{border-radius:18px;}.thumb{width:56px !important;height:56px !important;border-radius:13px !important;}.pd-info{padding:20px 16px 22px !important;}.pd-tags{gap:7px !important;}.pd-tag{font-size:11px !important;padding:7px 9px !important;}.pd-title{font-size:22px !important;margin-top:12px !important;}.pd-price{font-size:24px !important;}.pd-desc{font-size:14px !important;line-height:1.75 !important;}.pd-meta{grid-template-columns:1fr !important;}.pd-buyrow{display:grid !important;grid-template-columns:1fr 1fr;}.pd-buyrow .qty{grid-column:1 / -1;width:100%;justify-content:space-between;}.pd-buyrow .btn{width:100%;padding:0 10px !important;font-size:13px;}.pd-actions{display:grid !important;grid-template-columns:1fr 1fr;}.pd-actions .btn{width:100%;padding:0 10px !important;font-size:13px;}.opt-row{display:block !important;}.opt-label{display:block;margin-bottom:8px;padding-top:0 !important;}.chip{font-size:12px !important;padding:9px 12px !important;}.pd-related{padding:14px !important;}.pd-related .head .t{font-size:16px !important;}.pd-related .head .btn{height:40px;padding:0 12px !important;font-size:12px;}}

/* =========================================================
   FINAL OVERRIDE: Product form + desktop storefront polish
   ========================================================= */
body.admin-form-page{
  min-height:100vh;
  color:#eaf2ff;
  background:radial-gradient(820px 460px at 8% 0%, rgba(22,216,255,.16), transparent 62%),radial-gradient(780px 520px at 92% 8%, rgba(188,57,255,.22), transparent 62%),linear-gradient(180deg,#030711 0%,#061022 54%,#030711 100%) !important;
}
body.admin-form-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.42;
  background:linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom, #000, transparent 78%);
}
.admin-form-page .af-wrap{max-width:1180px;padding:22px 16px 42px;}
.admin-form-page .af-top{padding:4px 0 14px;border-bottom:1px solid rgba(120,154,255,.16);margin-bottom:18px;}
.admin-form-page .af-title{font-size:26px;color:#fff;letter-spacing:.2px;text-shadow:0 0 20px rgba(22,216,255,.28),0 0 28px rgba(188,57,255,.16);}
.admin-form-page .af-sub{color:#8fb7e9;font-weight:750;}
.admin-form-page .af-card{position:relative;overflow:hidden;color:#eaf2ff;background:linear-gradient(145deg,rgba(12,25,58,.96),rgba(6,13,34,.97) 52%,rgba(29,10,61,.92)) !important;border:1px solid rgba(117,154,255,.36) !important;border-radius:26px !important;box-shadow:0 28px 72px rgba(0,0,0,.48),0 0 46px rgba(126,56,255,.16),inset 0 1px 0 rgba(255,255,255,.10) !important;}
.admin-form-page .af-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 180px at 16% 0%, rgba(22,216,255,.15), transparent 70%),radial-gradient(460px 220px at 92% 0%, rgba(188,57,255,.18), transparent 70%),linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent);}
.admin-form-page .af-card > *{position:relative;z-index:1;}
.admin-form-page .af-card .head{padding:18px 20px;border-bottom:1px solid rgba(117,154,255,.20);background:linear-gradient(90deg,rgba(13,31,74,.74),rgba(69,24,112,.38)) !important;}
.admin-form-page .af-card .head .t,.admin-form-page .h{color:#fff;font-weight:950;text-shadow:0 0 18px rgba(22,216,255,.20);}
.admin-form-page .af-card .body{padding:22px 20px 24px;}
.admin-form-page .field label{color:#dce9ff;letter-spacing:.1px;}
.admin-form-page .muted,.admin-form-page .help{color:#91a9d2 !important;font-weight:750;}
.admin-form-page .input,.admin-form-page textarea,.admin-form-page select{min-height:48px;color:#f5f9ff !important;background:rgba(4,14,35,.86) !important;border:1px solid rgba(93,136,255,.34) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(188,57,255,.05) !important;outline:none !important;}
.admin-form-page .input:focus,.admin-form-page textarea:focus,.admin-form-page select:focus{border-color:rgba(34,228,255,.78) !important;box-shadow:0 0 0 3px rgba(34,228,255,.12),0 0 20px rgba(188,57,255,.16),inset 0 1px 0 rgba(255,255,255,.07) !important;}
.admin-form-page textarea{min-height:116px;}
.admin-form-page .hr{height:1px;margin:20px 0;background:linear-gradient(90deg,transparent,rgba(188,57,255,.62),rgba(22,216,255,.44),transparent) !important;}
.admin-form-page .preview,.admin-form-page #colorImageWrap{color:#dce9ff;background:rgba(5,16,42,.62) !important;border:1px dashed rgba(82,221,255,.36) !important;border-radius:18px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.admin-form-page .preview .ok{color:#44e7ff !important;text-shadow:0 0 14px rgba(68,231,255,.35);}
.admin-form-page .pill{color:#eaf2ff;background:rgba(6,18,45,.72) !important;border:1px solid rgba(96,137,255,.34) !important;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.admin-form-page .pill small{color:#8fb7e9 !important;}
.admin-form-page input[type="checkbox"]{accent-color:#22d8ff;}
.admin-form-page .af-actions{position:sticky;bottom:0;z-index:5;margin:22px -20px -24px;padding:16px 20px;background:linear-gradient(180deg,rgba(6,13,34,.18),rgba(5,10,27,.92));border-top:1px solid rgba(117,154,255,.18);backdrop-filter:blur(10px);}
.admin-form-page .af-actions .btn,.admin-form-page .af-top .btn{min-height:46px;border-radius:16px;}
.admin-form-page img[style*="max-width:220px"]{max-width:260px !important;border-radius:18px !important;border:1px solid rgba(82,221,255,.38) !important;box-shadow:0 16px 36px rgba(0,0,0,.35),0 0 28px rgba(188,57,255,.16);}
.admin-form-page .af-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.admin-form-page .af-grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:780px){.admin-form-page .af-wrap{padding:16px 10px 32px;}.admin-form-page .af-title{font-size:23px;}.admin-form-page .af-card{border-radius:22px !important;}.admin-form-page .af-card .head{align-items:flex-start;flex-direction:column;}.admin-form-page .af-card .body{padding:18px 14px 20px;}.admin-form-page .af-grid,.admin-form-page .af-grid3,.admin-form-page .af-grid[style]{grid-template-columns:1fr !important;}.admin-form-page .af-actions{margin:20px -14px -20px;padding:14px;}.admin-form-page .af-actions .btn{flex:1 1 100%;}}

/* หน้าร้าน Desktop: แก้ layout ไม่ให้สองคอลัมน์ใหญ่เท่ากัน */
@media (min-width:901px){
  .container{max-width:1240px !important;padding-left:18px !important;padding-right:18px !important;}
  .topbar .row{max-width:1240px !important;}
  .layout{grid-template-columns:300px minmax(0,1fr) !important;gap:18px !important;}
  .side-stack{position:sticky;top:88px;}
  .store-intro{min-height:190px;}
  .intro-content{max-width:78% !important;}
  .store-intro::after{font-size:104px !important;right:6px !important;bottom:0 !important;opacity:.82;}
  .category-panel{max-height:calc(100vh - 105px);overflow:auto;}
  .hero{min-height:168px !important;}
  .hero .inner{min-height:168px !important;padding:24px 26px !important;}
  .hero h1{font-size:31px !important;max-width:560px;}
  .hero p{font-size:14px !important;}
  .hero::after{width:190px !important;height:126px !important;right:28px !important;top:22px !important;}
  .search-panel{margin-top:16px !important;border-radius:20px;}
  .search-bar form{flex-wrap:nowrap !important;}
  .search-bar .input{flex:1 1 auto !important;}
  #list.card{border-radius:22px;}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important;}
  .product{border-radius:18px !important;}
  .product .name{font-size:14px !important;min-height:38px !important;}
  .product-path{font-size:11px;min-height:28px !important;}
  .product .body{padding:11px !important;}
  .product .body > div:last-child{display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important;}
  .product .body > div:last-child form{margin:0 !important;}
  .product .body > div:last-child .btn{width:100%;padding:0 8px;font-size:12px;}
}
@media (min-width:901px) and (max-width:1120px){.layout{grid-template-columns:270px minmax(0,1fr) !important;gap:14px !important;}.grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}.hero h1{font-size:26px !important;max-width:440px;}}

/* ==============================
   Neon border animation upgrade
   + replace astronaut with shuttle
   ============================== */
.store-intro,
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.store-intro > .neon-rail,
.hero > .neon-rail{
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  pointer-events:none;
  z-index:4;
  background:
    conic-gradient(from 0deg,
      rgba(0,0,0,0) 0deg,
      rgba(0,0,0,0) 20deg,
      rgba(39,231,255,.96) 42deg,
      rgba(182,76,255,.98) 68deg,
      rgba(0,0,0,0) 94deg,
      rgba(0,0,0,0) 208deg,
      rgba(255,106,214,.98) 232deg,
      rgba(45,223,255,.92) 258deg,
      rgba(0,0,0,0) 286deg,
      rgba(0,0,0,0) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:neonBorderSpin 6.2s linear infinite;
  filter:drop-shadow(0 0 8px rgba(42,223,255,.42)) drop-shadow(0 0 20px rgba(172,77,255,.28));
  opacity:.95;
}
.store-intro > .neon-rail::before,
.hero > .neon-rail::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:calc(18px - 8px);
  border:1px solid transparent;
  background:
    linear-gradient(90deg, rgba(34,228,255,.0), rgba(34,228,255,.28), rgba(182,76,255,.28), rgba(34,228,255,.0)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.55;
  animation:neonBorderPulse 2.4s ease-in-out infinite alternate;
}
@keyframes neonBorderSpin{
  to{transform:rotate(1turn);}
}
@keyframes neonBorderPulse{
  from{opacity:.24;filter:blur(.2px);}
  to{opacity:.62;filter:blur(0);}
}

.store-intro{
  border-color:rgba(188,59,255,.58) !important;
  box-shadow:0 0 0 1px rgba(34,228,255,.11), 0 18px 44px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.store-intro::after{
  content:"" !important;
  position:absolute;
  right:8px;
  bottom:-2px;
  width:128px;
  height:128px;
  background:url('../img/rocket-flat.gif') no-repeat center / contain;
  filter:drop-shadow(0 0 16px rgba(44,226,255,.34)) drop-shadow(0 0 22px rgba(179,63,255,.28));
  opacity:.98;
  transform:rotate(-12deg);
  animation:rocketFloat 4.6s ease-in-out infinite;
  z-index:1;
}
@keyframes rocketFloat{
  0%,100%{transform:translateY(0) rotate(-12deg);}
  50%{transform:translateY(-8px) translateX(2px) rotate(-9deg);}
}

.intro-content{
  position:relative;
  z-index:3;
  max-width:calc(100% - 168px) !important;
}
.store-intro .h,
.store-intro .muted,
.store-intro .intro-actions{position:relative;z-index:3;}

.hero{
  border-color:rgba(188,57,255,.58) !important;
}
.hero::before{
  background:
    linear-gradient(104deg,rgba(7,12,34,.70) 0%,rgba(7,12,34,.18) 56%,rgba(11,18,40,.54) 100%),
    repeating-linear-gradient(115deg,transparent 0 16px,rgba(34,228,255,.065) 17px 18px),
    linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.hero::after{
  content:"";
  position:absolute;
  right:20px;
  top:14px;
  width:150px;
  height:150px;
  opacity:.94;
  background:url('../img/rocket-flat.gif') no-repeat center / contain;
  border:none;
  box-shadow:none;
  filter:drop-shadow(0 0 12px rgba(34,228,255,.28)) drop-shadow(0 0 28px rgba(176,74,255,.25));
  transform:translateZ(0) rotate(12deg);
  animation:heroRocketFloat 6.2s ease-in-out infinite;
}
@keyframes heroRocketFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(12deg);}
  50%{transform:translate3d(-5px,-7px,0) rotate(9deg);}
}

.hero .inner,
.hero .inner > div,
.hero .btn.primary{position:relative;z-index:3;}
.hero h1{max-width:600px;}

@media (max-width:900px){
  .intro-content{max-width:calc(100% - 128px) !important;}
  .store-intro::after{
    width:98px;
    height:98px;
    right:-4px;
    bottom:4px;
  }
  .hero::after{
    width:100px !important;
    height:100px !important;
    right:8px !important;
    top:22px !important;
  }
}
@media (max-width:640px){
  .store-intro > .neon-rail,
  .hero > .neon-rail{padding:1.25px;}
  .store-intro > .neon-rail::before,
  .hero > .neon-rail::before{inset:8px;opacity:.42;}
  .intro-content{max-width:calc(100% - 110px) !important;}
  .store-intro::after{
    width:86px;
    height:86px;
    right:-8px;
    bottom:8px;
  }
  .hero::after{
    width:82px !important;
    height:82px !important;
    right:6px !important;
    top:24px !important;
    opacity:.86;
  }
}

/* ==============================
   Desktop fix: intro card too tall/narrow
   ============================== */
@media (min-width: 901px){
  .layout{grid-template-columns:320px minmax(0,1fr) !important;}
  .store-intro{
    min-height:158px !important;
    padding:18px !important;
  }
  .store-intro::after{
    width:94px !important;
    height:94px !important;
    right:-2px !important;
    bottom:-2px !important;
    opacity:.94;
  }
  .intro-content{
    max-width:100% !important;
    padding-right:88px;
  }
  .store-intro .h{
    font-size:18px;
    line-height:1.28;
    max-width:220px;
    margin-bottom:6px;
  }
  .store-intro .muted{
    max-width:230px;
    font-size:12px;
    line-height:1.55;
  }
  .intro-actions{
    margin-top:14px !important;
  }
  .intro-actions .btn{
    max-width:230px;
    height:42px;
    font-size:13px;
    padding:0 14px;
  }
}

@media (min-width: 1200px){
  .layout{grid-template-columns:330px minmax(0,1fr) !important;}
  .store-intro .h{max-width:240px;}
  .store-intro .muted{max-width:250px;}
  .intro-content{padding-right:98px;}
}

/* ==============================
   Mobile overflow fix 2026-04
   แก้กล่องขายปลีกและส่งตกขอบ / ตัวหนังสือบีบเกินไปบนมือถือ
   ============================== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}
*, *::before, *::after{box-sizing:border-box;}
img, svg, video{max-width:100%;height:auto;}

@media (max-width:640px){
  .topbar,
  .container,
  .layout,
  .side-stack,
  main,
  .card,
  .store-intro,
  .category-panel,
  .hero,
  .search-panel,
  #productsContainer{
    max-width:100% !important;
  }
  .container{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .layout{
    grid-template-columns:minmax(0,1fr) !important;
    overflow:hidden;
  }
  .side-stack,
  main{
    width:100%;
    min-width:0;
  }

  .store-intro{
    min-height:196px !important;
    padding:18px 16px !important;
    border-radius:22px !important;
  }
  .store-intro::after{
    width:104px !important;
    height:104px !important;
    right:8px !important;
    bottom:18px !important;
    opacity:.94;
  }
  .intro-content{
    max-width:100% !important;
    width:100% !important;
    padding-right:100px !important;
  }
  .store-intro .h{
    font-size:22px !important;
    line-height:1.22 !important;
    white-space:nowrap;
    max-width:100% !important;
    margin-bottom:10px;
  }
  .store-intro .muted{
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.55 !important;
    word-break:normal;
  }
  .intro-actions{
    margin-top:22px !important;
    max-width:100%;
  }
  .intro-actions .btn{
    width:min(100%, 268px) !important;
    max-width:268px !important;
    height:46px !important;
    padding:0 14px !important;
    border-radius:16px !important;
    font-size:13px !important;
    justify-content:center !important;
    white-space:nowrap;
  }

  .cat-tree-link.row,
  .cat-tree-summary{
    min-width:0;
  }
  .cat-tree-link span,
  .cat-tree-summary span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width:390px){
  .container{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .store-intro{
    min-height:188px !important;
    padding:16px 14px !important;
  }
  .intro-content{
    padding-right:82px !important;
  }
  .store-intro::after{
    width:86px !important;
    height:86px !important;
    right:4px !important;
    bottom:20px !important;
  }
  .store-intro .h{
    font-size:20px !important;
  }
  .store-intro .muted{
    font-size:13px !important;
  }
  .intro-actions .btn{
    width:min(100%, 240px) !important;
    max-width:240px !important;
    font-size:12px !important;
  }
}

/* FINAL MOBILE OVERRIDE: stop title/button/card overflow on small screens */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

@media (max-width:640px){
  body{min-width:0 !important;}
  .topbar,
  .container,
  .layout,
  .side-stack,
  main,
  .card,
  .store-intro,
  .category-panel,
  .hero,
  .search-panel,
  #productsContainer{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .container{
    padding-left:5px !important;
    padding-right:5px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  /* กล่องขายปลีกและส่ง: ไม่ให้ข้อความ/ปุ่มตกขอบ */
  .store-intro{
    min-height:188px !important;
    padding:18px 14px !important;
    border-radius:20px !important;
  }
  .store-intro::after{
    width:88px !important;
    height:88px !important;
    right:10px !important;
    bottom:28px !important;
    opacity:.9 !important;
  }
  .intro-content{
    width:100% !important;
    max-width:100% !important;
    padding-right:84px !important;
  }
  .store-intro .h{
    display:block !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    font-size:21px !important;
    line-height:1.18 !important;
    margin:0 0 8px !important;
  }
  .store-intro .muted{
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .intro-actions{
    margin-top:16px !important;
    width:100% !important;
  }
  .intro-actions .btn{
    width:100% !important;
    max-width:238px !important;
    height:44px !important;
    padding:0 12px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  /* หัวข้อหมวดหมู่: แก้ตัวหนังสือซ้อน/ตกขอบ */
  .category-panel{
    padding:16px 14px !important;
    border-radius:20px !important;
  }
  .category-panel .section-title,
  .section-title{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 12px !important;
    padding:0 !important;
    font-size:21px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
  .section-title .cube-ico,
  .cube-ico{
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    margin:0 !important;
    transform:none !important;
  }
  .section-title > span:not(.cube-ico){
    display:block !important;
    min-width:0 !important;
    max-width:calc(100% - 34px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    position:static !important;
    transform:none !important;
  }

  .cat-tree,
  .cat-tree-box,
  .cat-tree-link.row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .cat-tree-link.row,
  .cat-tree-summary{
    padding:13px 12px !important;
    gap:10px !important;
  }
  .cat-tree-link span,
  .cat-tree-summary span{
    min-width:0 !important;
    max-width:calc(100% - 52px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .cat-tree-link b,
  .cat-tree-summary b{
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  /* Hero promo: ปุ่มไม่ให้ชน/หลุดขอบ */
  .hero{
    min-height:136px !important;
    border-radius:20px !important;
  }
  .hero .inner{
    min-height:136px !important;
    padding:16px 14px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:center !important;
  }
  .hero .pill{
    max-width:190px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .hero h1{
    max-width:210px !important;
    font-size:20px !important;
    line-height:1.12 !important;
    margin-top:10px !important;
  }
  .hero .btn.primary{
    height:42px !important;
    padding:0 12px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
  .hero::after{
    width:68px !important;
    height:68px !important;
    right:58px !important;
    top:46px !important;
    opacity:.58 !important;
    z-index:1 !important;
  }
}

@media (max-width:380px){
  .container{padding-left:4px !important;padding-right:4px !important;}
  .store-intro{min-height:180px !important;padding:16px 12px !important;}
  .intro-content{padding-right:72px !important;}
  .store-intro::after{width:76px !important;height:76px !important;right:6px !important;bottom:30px !important;}
  .store-intro .h{font-size:20px !important;}
  .store-intro .muted{font-size:12px !important;}
  .intro-actions .btn{max-width:220px !important;font-size:11px !important;}
  .section-title{font-size:20px !important;}
  .hero h1{max-width:185px !important;font-size:18px !important;}
  .hero .pill{max-width:170px !important;font-size:10px !important;}
  .hero .btn.primary{font-size:11px !important;padding:0 10px !important;}
}

/* =========================================================
   FINAL FIX: logged-in top menu / avatar overflow
   ========================================================= */
.topbar{overflow:hidden;}
.topbar .row{min-width:0;}
.actions{min-width:0;}
.top-user,.top-profile{min-width:0;}
.top-avatar{flex:0 0 auto;max-width:34px;max-height:34px;aspect-ratio:1/1;}
.badge{white-space:nowrap;}
.badge-logout b{font-weight:900;}

@media (max-width:900px){
  .topbar .row{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:10px !important;
  }
  .brand{max-width:100%;min-width:0;}
  .brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  .actions > .badge{
    width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
    padding:9px 6px !important;
    overflow:hidden !important;
  }
  .actions > .badge b,
  .actions > .badge span:not(.nav-ico):not(.line-dot){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .top-user{
    grid-column:1 / -1 !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:7px 8px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .top-profile{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
  }
  .top-user .top-avatar{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    border-radius:999px !important;
    object-fit:cover !important;
  }
  .top-user-name{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .top-user .badge-logout{
    flex:0 0 auto !important;
    width:auto !important;
    min-height:36px !important;
    padding:7px 10px !important;
    border-radius:14px !important;
  }
}

@media (max-width:420px){
  .topbar .row{padding:12px 8px 10px !important;}
  .brand .dot{width:34px !important;height:34px !important;min-width:34px !important;}
  .brand span{font-size:18px !important;}
  .actions{gap:7px !important;}
  .actions > .badge{
    min-height:40px !important;
    border-radius:14px !important;
    font-size:11px !important;
    gap:4px !important;
    padding:8px 4px !important;
  }
  .nav-ico{font-size:12px !important;}
  .top-user{padding:7px !important;}
  .top-user .top-avatar{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    max-height:32px !important;
  }
  .top-user-name{font-size:12px !important;}
  .top-user .badge-logout{font-size:11px !important;padding:7px 9px !important;}
}