/*
Theme Name: THDG
Description: 泰国代购 H5 广告落地站主题（移动端优先・传图报价・COD）
Author: THDG
Version: 1.0.0
Text Domain: thdg
*/

:root{
  --primary:#1457A6; --teal:#0E7C86; --cta:#FF6B2C;
  --green:#16A34A; --bg:#F5F7FA; --card:#fff;
  --text:#1F2937; --muted:#6B7280; --line:#E5E7EB;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Noto Sans Thai','Leelawadee UI',sans-serif;}
html{-webkit-text-size-adjust:100%;background:var(--bg);}
body{background:var(--bg);color:var(--text);max-width:430px;margin:0 auto;line-height:1.55;}
img{max-width:100%;}
a{color:var(--primary);}

/* ① 顶部导航条 */
.nav{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:20;}
.logo{font-weight:700;color:var(--primary);font-size:17px;text-decoration:none;}
.nav-line{background:var(--teal);color:#fff;border:none;border-radius:20px;
  padding:8px 14px;font-size:14px;text-decoration:none;display:inline-block;}
/* 详情页顶栏返回按钮（醒目） */
.hdr-back{background:#fff;color:var(--primary);border:2px solid var(--primary);border-radius:20px;
  padding:7px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
.hdr-back:active{background:var(--primary);color:#fff;}
/* 顶栏中间：返回 + 购物车 */
.hdr-mid{display:flex;align-items:center;gap:10px;}
.hdr-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:2px solid var(--primary);background:#fff;
  color:var(--primary);text-decoration:none;}
.hdr-cart:active{background:var(--primary);color:#fff;}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--cta);color:#fff;font-size:11px;font-weight:700;line-height:18px;
  text-align:center;}
/* 购物车页 */
.cart-wrap{padding:0 0 24px;}
.cart-item{display:flex;gap:12px;background:var(--card);border-radius:14px;padding:12px;margin-bottom:12px;}
.cart-item img{width:84px;height:84px;object-fit:cover;border-radius:10px;flex:0 0 84px;background:#F3F4F6;}
.cart-item .ci-body{flex:1;min-width:0;}
.cart-item .ci-title{font-size:14px;color:var(--text);line-height:1.4;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cart-item .ci-sku{font-size:12px;color:var(--muted);margin-bottom:8px;}
.cart-item .ci-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cart-item .ci-price{font-size:15px;font-weight:700;color:var(--cta);}
.cart-qty{display:flex;align-items:center;gap:6px;}
.cart-qty button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--text);font-size:15px;line-height:1;cursor:pointer;}
.cart-qty span{min-width:26px;text-align:center;font-size:14px;}
.cart-remove{border:none;background:none;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;padding:0;}
.cart-sum{background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:12px;font-size:15px;
  display:flex;justify-content:space-between;align-items:center;}
.cart-sum strong{color:var(--cta);font-size:19px;}
.cart-empty{background:var(--card);border-radius:14px;padding:40px 16px;text-align:center;color:var(--muted);font-size:14px;}
.cart-link{display:block;text-align:center;color:var(--primary);text-decoration:none;margin-top:10px;font-size:14px;}
.cart-item .ci-ops{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
.cart-item .ci-ops .cart-link{margin:0;font-size:13px;}
.cart-order{border:1.5px solid var(--cta);background:#fff;color:var(--cta);border-radius:8px;
  padding:6px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.cart-order:active{background:#FFF1E8;}
.cart-order:disabled{opacity:.55;}

/* ② Hero */
.hero{padding:28px 16px 22px;text-align:center;background:linear-gradient(180deg,#EAF2FB 0%,var(--bg) 100%);}
.hero .sub{color:var(--teal);font-size:14px;margin-bottom:10px;}
.hero h1{font-size:24px;line-height:1.35;margin-bottom:10px;color:var(--text);}
.hero .desc{color:var(--muted);font-size:15px;margin-bottom:20px;}
.btn-primary{display:block;width:100%;min-height:56px;border:none;border-radius:12px;
  background:var(--cta);color:#fff;font-size:17px;font-weight:700;margin-bottom:12px;
  text-decoration:none;line-height:56px;text-align:center;cursor:pointer;}
.btn-primary:active{filter:brightness(.95);}
.btn-ghost{display:block;width:100%;min-height:44px;border:1.5px solid var(--primary);
  background:#fff;color:var(--primary);border-radius:12px;font-size:15px;font-weight:500;
  text-decoration:none;line-height:44px;text-align:center;cursor:pointer;}
.btn-cart{display:block;width:100%;min-height:50px;border:2px solid var(--cta);
  background:#fff;color:var(--cta);border-radius:12px;font-size:16px;font-weight:700;
  text-decoration:none;line-height:48px;text-align:center;cursor:pointer;font-family:inherit;}
.btn-cart:active{background:#FFF1E8;}
.trust{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.trust span{background:#ECFDF5;color:var(--green);font-size:13px;
  padding:6px 10px;border-radius:8px;}

/* 通用区块 */
.section{padding:18px 16px;}
.section>.sec-title{padding-left:4px;font-size:16px;color:var(--text);}
.card{background:var(--card);border-radius:14px;padding:16px;margin-bottom:14px;}
.card strong{font-size:16px;color:var(--text);}

/* ③ 三步流程 */
.steps{display:flex;gap:10px;}
.step{flex:1;text-align:center;}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;
  line-height:34px;margin:0 auto 8px;font-weight:700;}
.step p{font-size:13px;color:var(--muted);line-height:1.5;}

/* ④ 计价说明 */
.price-note{font-size:12px;color:#B45309;margin-top:8px;}
.price-link{color:var(--primary);font-size:14px;display:inline-block;margin-top:8px;}

/* ⑤ 品类宫格 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.cat{background:#fff;border-radius:12px;padding:14px 6px;text-align:center;font-size:13px;
  color:var(--text);text-decoration:none;border:none;cursor:pointer;}
.cat:active{background:#EDF2F7;}
.cat .ic{font-size:24px;margin-bottom:6px;}

/* ⑥ 服务保障 */
.guarantee{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.guarantee div{background:#fff;border-radius:12px;padding:12px;font-size:13px;}

/* ⑦ 悬浮 LINE */
.line-float{position:fixed;right:16px;bottom:24px;width:56px;height:56px;border-radius:50%;
  background:var(--green);color:#fff;font-size:26px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:30;text-decoration:none;}

/* ⑧ 页脚 */
footer{padding:20px 16px 32px;font-size:13px;color:var(--muted);}
footer nav{display:flex;flex-wrap:wrap;gap:10px 14px;margin:12px 0;}
footer nav a{color:var(--primary);text-decoration:none;}
footer .copy{margin-bottom:8px;}

/* 政策页排版 */
.policy{background:var(--card);border-radius:14px;padding:20px 16px;}
.policy h1{font-size:22px;color:var(--primary);line-height:1.4;margin-bottom:14px;}
.policy h2{font-size:17px;color:var(--primary);margin:18px 0 8px;}
.policy p{margin-bottom:10px;font-size:15px;}
.policy ol,.policy ul{padding-left:22px;margin-bottom:10px;}
.policy li{font-size:15px;margin-bottom:6px;}
.policy .p-note{color:#B45309;font-size:13px;}

/* /quote 报价页 */
.quote-wrap{background:var(--card);border-radius:14px;padding:20px 16px;}
.quote-wrap h1{font-size:22px;color:var(--primary);line-height:1.4;margin-bottom:8px;}
.quote-wrap .q-desc{color:var(--muted);font-size:14px;margin-bottom:16px;}
.upload-box{border:2px dashed var(--line);border-radius:14px;background:#FAFBFC;
  padding:26px 16px;text-align:center;cursor:pointer;display:block;}
.upload-box:active{background:#F0F4F8;}
.upload-box .ic{font-size:34px;margin-bottom:6px;}
.upload-box .t1{font-size:15px;font-weight:500;color:var(--text);}
.upload-box .t2{font-size:13px;color:var(--muted);margin-top:4px;}
.upload-box input{display:none;}
.previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.previews .pv{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);}
.previews img{width:100%;height:100%;object-fit:cover;}
.previews .rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:20px;text-align:center;border:none;padding:0;}
.fld{margin:14px 0;}
.fld label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;}
.fld label .opt{color:var(--muted);font-size:13px;font-weight:400;}
.fld select,.fld input,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:12px;font-size:15px;background:#fff;color:var(--text);font-family:inherit;}
.fld textarea{min-height:88px;resize:vertical;}
.notice{display:none;background:#FEF3C7;color:#B45309;border-radius:10px;padding:12px;
  font-size:14px;margin:12px 0;line-height:1.5;}
.notice.show{display:block;}

/* 404 */
.nf{padding:60px 16px;text-align:center;color:var(--muted);}

/* ===== 报价结果区（quote search result） ===== */
.q-res{margin-top:24px;text-align:left;}
.qr-head{font-size:16px;font-weight:700;color:var(--primary);}
.qr-price{margin:10px 0 6px;}
.qr-price .v{font-size:30px;font-weight:700;color:var(--cta);}
.qr-price .u{font-size:14px;color:var(--muted);margin-left:6px;}
.qr-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
.qr-cards{display:flex;flex-direction:column;gap:10px;}
.qr-card{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;align-items:center;position:relative;text-decoration:none;color:var(--text);}
.qr-card.clickable{border-color:var(--primary);cursor:pointer;}
.qr-card.clickable:active{background:#F0F6FF;}
.qr-go{position:absolute;right:10px;bottom:8px;font-size:12px;color:var(--primary);font-weight:600;}
.qr-card img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--bg);}
.qr-body{flex:1;min-width:0;}
.qr-t{padding-right:44px;}
.qr-card .qr-meta{flex-wrap:wrap;gap:4px;}
.qr-t{font-size:13px;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.qr-p{font-size:16px;font-weight:700;color:var(--cta);margin-top:4px;}
.qr-p em{font-style:normal;font-size:12px;color:var(--muted);font-weight:400;}
.qr-meta{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;}

/* ⑧ 商品详情页 */
.pd-wrap{padding:0 16px 24px;}
.pd-loading{text-align:center;padding:60px 0;}
.spinner{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--primary);border-radius:50%;margin:0 auto 12px;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.pd-loading p{font-size:14px;color:var(--muted);}
.pd-main{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.pd-main img{width:100%;height:100%;object-fit:contain;}
.pd-main.pd-noimg{background:#F0F2F5;}
.pd-main.pd-noimg::after{content:'ไม่มีรูปภาพ';color:#98A2B3;font-size:13px;}
.pd-thumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 2px;}
.pd-thumbs img{width:52px;height:52px;object-fit:cover;border-radius:8px;border:2px solid transparent;flex-shrink:0;background:#fff;cursor:pointer;}
.pd-thumbs img.on{border-color:var(--primary);}
.pd-title{font-size:18px;line-height:1.5;margin:12px 0 8px;}
.pd-price{font-size:26px;font-weight:700;color:var(--cta);}
.pd-price em{font-style:normal;font-size:13px;color:var(--muted);font-weight:400;}
.pd-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.pd-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:10px;background:#F0F6FF;border-radius:8px;padding:8px 10px;}
.pd-sku{margin-top:14px;}
.pd-sku .sk{font-size:13px;color:var(--muted);margin-bottom:6px;}
.pd-sku .sv{display:flex;flex-wrap:wrap;gap:8px;}
.sv-btn{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:7px 13px;font-size:14px;cursor:pointer;color:var(--text);}
.sv-btn.on{border-color:var(--primary);color:var(--primary);font-weight:600;background:#F0F6FF;}
.sv-btn.has-img{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;text-align:left;}
.sv-btn.has-img img{width:36px;height:36px;border-radius:6px;object-fit:cover;display:block;flex:0 0 auto;}
.sv-btn.has-img span{line-height:1.35;}
.qty-box{display:flex;align-items:center;gap:8px;}
.qty-box button{width:36px;height:36px;border:1.5px solid var(--line);background:#fff;border-radius:8px;font-size:18px;cursor:pointer;}
.qty-box input{width:70px;height:36px;border:1.5px solid var(--line);border-radius:8px;text-align:center;font-size:15px;}
.pd-total{margin-top:14px;font-size:15px;}
.pd-total span{color:var(--cta);font-weight:700;font-size:20px;}
.pd-total em{font-style:normal;font-size:12px;color:var(--muted);}
.pd-info .btn-primary,.pd-info .btn-ghost,.pd-info .btn-cart{width:100%;margin-top:12px;text-align:center;}

/* ⑨ 结账页 */
.co-wrap{padding:0 16px 24px;}
.co-empty{text-align:center;padding:60px 20px;}
.co-empty h1{font-size:20px;margin-bottom:8px;}
.co-empty .btn-primary{margin-top:14px;display:inline-block;}
.co-summary{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px;}
.co-item{display:flex;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.co-item img{width:60px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--bg);}
.co-i .t{font-size:13px;line-height:1.4;}
.co-i .s{font-size:12px;color:var(--muted);margin-top:3px;}
.co-i .p{font-size:16px;font-weight:700;color:var(--cta);margin-top:4px;}
.co-rows{padding-top:10px;}
.co-rows .r{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text);padding:4px 0;gap:10px;}
.co-rows .r span:last-child{text-align:right;line-height:1.5;overflow-wrap:break-word;}
.co-rows .r.total{font-size:16px;font-weight:700;color:var(--cta);border-top:1px solid var(--line);margin-top:6px;padding-top:10px;}
.co-form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;}
.f-group{margin-bottom:12px;}
.f-group label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.f-group input,.f-group textarea,.f-group select{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;}
.f-group select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.f-group input[readonly]{background:#F7F7F7;color:var(--muted);}
.f-row{display:flex;gap:10px;}
.f-row .f-group{flex:1;}
.pay-opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;}
.pay-opt input{width:18px;height:18px;flex-shrink:0;margin-top:2px;}
.pay-opt b{font-size:14px;display:block;}
.pay-opt small{font-size:12px;color:var(--muted);display:block;margin-top:2px;line-height:1.5;}

/* ⑩ 订单成功页 */
.os-wrap{padding:24px 16px 40px;text-align:center;}
.os-icon{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:34px;line-height:64px;margin:0 auto 14px;}
.os-wrap h1{font-size:20px;margin-bottom:6px;}
.os-sub{font-size:14px;color:var(--muted);margin-bottom:16px;}
.os-sub b{color:var(--text);}
.os-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;}
.os-steps .step{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 6px;font-size:12.5px;color:var(--muted);}
.os-steps .step.on{border-color:var(--green);color:var(--green);font-weight:600;background:#F0FFF4;}
.os-steps .step.pay-link{border-color:var(--primary);color:var(--primary);background:#F5F8FF;font-weight:600;cursor:pointer;text-decoration:none;display:block;}
.os-steps .step.pay-link::after{content:'แตะเพื่อแก้ไข ›';display:block;font-size:10.5px;font-weight:500;margin-top:2px;}
.os-wrap .btn-primary{width:100%;margin-top:10px;}
.os-wrap .btn-ghost{width:100%;margin-top:10px;}
.qr-meta .b{font-size:11px;background:var(--bg);color:var(--muted);border-radius:6px;padding:2px 7px;}
.qr-meta .b.ok{background:#ECFDF5;color:var(--green);}
.qr-meta .b.link{background:var(--primary);color:#fff;text-decoration:none;}
.qr-cta{margin-top:14px;text-align:center;text-decoration:none;line-height:56px;}

/* ⑪ 关键词搜索 */
.kw-form{display:flex;gap:8px;margin-top:12px;}
.kw-form input{flex:1;min-width:0;height:48px;border:1.5px solid var(--line);border-radius:12px;
  padding:0 14px;font-size:15px;background:#fff;color:var(--text);}
.kw-form input:focus{outline:none;border-color:var(--primary);}
.kw-form button{height:48px;padding:0 18px;border:none;border-radius:12px;background:var(--primary);
  color:#fff;font-size:15px;font-weight:600;cursor:pointer;flex-shrink:0;}
.kw-form button:active{filter:brightness(.95);}
.kw-hint{font-size:12.5px;color:var(--muted);margin-top:8px;}
.kw-head{font-size:14px;color:var(--muted);margin:16px 0 8px;padding-left:4px;}
.kw-head b{color:var(--text);}
.kw-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:22px 16px;
  text-align:center;color:var(--muted);font-size:14px;}
.kw-empty a{display:inline-block;margin-top:10px;}
.pd-back{display:inline-block;margin:0 0 10px 4px;font-size:14px;color:var(--muted);text-decoration:none;}