:root{
  --primary-gradient: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --shopee-gradient: linear-gradient(135deg,#ee4d2d 0%,#ff6347 100%);
  --lazada-gradient: linear-gradient(135deg,#0f146d 0%,#1a237e 100%);
  --success-gradient: linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
  --card-shadow: 0 10px 25px rgba(0,0,0,.1);
  --card-shadow-hover: 0 15px 35px rgba(0,0,0,.15);
  --text-primary:#2c3e50;
  --text-secondary:#6c757d;
  --border-radius:15px;
  --animation-duration:.3s;
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
  --safe-left: env(safe-area-inset-left,0px);
  --safe-right: env(safe-area-inset-right,0px);
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{overflow-x:hidden;min-height:100dvh}
@supports not (height:1dvh){
  html,body{min-height:100vh}
}

body{
  font-family:'Prompt',sans-serif;
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  color:var(--text-primary);
  line-height:1.6;
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* decorative bg */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0%,transparent 50%),
    radial-gradient(circle at 40% 40%,rgba(120,200,255,.3) 0%,transparent 50%);
  animation:float 20s ease-in-out infinite;
}

/* ================= Animations ================= */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes shine{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideInDown{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.animate-on-scroll{opacity:0;transform:translateY(30px);transition:all .8s ease-out}
.animate-on-scroll.animated{opacity:1;transform:translateY(0)}

/* ================= Layout ================= */
header{
  background:var(--primary-gradient); color:#fff; text-align:center;
  padding:3rem 1rem; position:relative; overflow:hidden;
}
header::before{
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.1) 2px,rgba(255,255,255,.1) 4px);
  animation:shine 3s linear infinite;
}
header h1{
  font-size:3rem; font-weight:700; margin:0;
  text-shadow:2px 2px 4px rgba(0,0,0,.3); animation:slideInDown 1s ease-out; position:relative; z-index:1;
}
header p{
  margin-top:1rem; font-size:1.2rem; opacity:.9;
  animation:slideInUp 1s ease-out .2s both; position:relative; z-index:1;
}
.current-time{
  margin-top:1rem; font-size:1rem; padding:.5rem 1rem; border-radius:25px;
  background:rgba(255,255,255,.2); backdrop-filter:blur(10px);
  animation:slideInUp 1s ease-out .4s both; position:relative; z-index:1;
}

.container{
  display:grid; grid-template-columns:1fr 3fr 1fr;
  gap:2rem; max-width:1400px; margin:2rem auto; padding:0 1rem;
}

.sidebar{
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  padding:2rem; border-radius:var(--border-radius);
  box-shadow:var(--card-shadow); margin-bottom:2rem; border:1px solid rgba(255,255,255,.3);
  position:relative; overflow:hidden; animation:slideInLeft 1s ease-out;
}
.sidebar::before{
  content:''; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .7s;
}
.sidebar:hover::before{left:100%}
.sidebar h3{font-size:1.4rem;margin-bottom:1.5rem;color:#667eea;position:relative}
.sidebar h3::after{
  content:''; position:absolute; bottom:-5px; left:0; width:50px; height:3px;
  background:var(--primary-gradient); border-radius:2px;
}

.deal-section{margin-bottom:3rem;animation:slideInRight 1s ease-out}
.deal-section h2{
  font-size:2rem;margin-bottom:2rem;position:relative;padding-left:1rem;
  background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.deal-section h2::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:100%; background:var(--primary-gradient); border-radius:2px;
}

.footer-news{
  max-width:1400px; margin:3rem auto; padding:2rem;
  background:rgba(255,255,255,.95); backdrop-filter:blur(15px);
  border-radius:var(--border-radius); box-shadow:var(--card-shadow); border:1px solid rgba(255,255,255,.3);
  animation:fadeInUp 1s ease-out .6s both;
}
.footer-news h3{
  font-size:2rem;margin-bottom:2rem;text-align:center;
  background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

footer{
  text-align:center; padding:2rem; font-size:1rem; color:var(--text-secondary);
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); margin-top:2rem;
}

/* ================= Components ================= */
/* search */
.search-wrap{margin-bottom:20px;text-align:center}
.search-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.search-bar input[type="text"],
.search-bar input[type="search"],
.search-bar select,
.search-bar button,
.search-bar .btn-clear{
  border:1px solid #ccc; border-radius:6px; padding:10px 12px; height:40px; font-family:'Prompt',sans-serif;
}
.search-bar input[type="text"]{width:320px;max-width:100%}
.search-bar select{min-width:180px;background:#fff}
.search-bar button{border:none;background:#667eea;color:#fff;cursor:pointer}
.search-bar .btn-clear{
  display:inline-flex;align-items:center;justify-content:center;background:#e5e7eb;color:#111;text-decoration:none;border:none;
}

/* button parity */
.search-bar .btn-primary,
.search-bar .btn-clear{
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:10px 12px;border-radius:6px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;
}
.search-bar .btn-primary{background:#667eea;color:#fff;border-color:#667eea}
.search-bar .btn-primary:hover{filter:brightness(.95)}
.search-bar .btn-clear{background:#e5e7eb;color:#111;border-color:#d1d5db}
.search-bar .btn-clear.is-disabled{opacity:.5;cursor:not-allowed}

/* grid helper for search */
.search-grid{display:grid;grid-template-columns:1fr auto auto auto;gap:8px}

/* products */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2rem}
.product-card{
  background:rgba(255,255,255,.95); backdrop-filter:blur(15px);
  padding:12px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,.1);
  border:1px solid rgba(255,255,255,.3); transition:.3s ease;
  display:flex; flex-direction:column; height:100%;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover)}

.product-media{
  display:grid; place-items:center; width:100%; aspect-ratio:4/3;
  height:clamp(96px,12vw,160px); background:#fff; border-radius:8px; overflow:hidden; padding:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.product-media img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
}

/* backward-compat for .product-image (เดิม) */
.product-image{
  width:100%; height:150px; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; margin-bottom:.75rem; transition:transform .3s ease;
}
.product-card:hover .product-image{transform:scale(1.05)}
.product-media.is-photo img{object-fit:cover}

/* text */
.product-title{
  font-size:.9rem; line-height:1.35; color:#2c3e50;
  margin:.65rem 0 .25rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-meta{color:#6b7280;font-size:.8rem;margin:.15rem 0}

/* CTA */
.product-link{
  display:inline-flex;align-items:center;justify-content:center;margin-top:auto;
  padding:.6rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;color:#fff;text-decoration:none;
  background:var(--success-gradient);transition:.3s ease;box-shadow:0 5px 15px rgba(17,153,142,.3);
}
.product-link:hover{transform:translateY(-2px)}

/* empty state */
.no-products{
  text-align:center;padding:3rem 2rem;background:rgba(255,255,255,.9);
  border-radius:15px;color:#6c757d;font-size:1.1rem;
}

/* rss list */
.rss-news-item{
  display:flex;align-items:flex-start;margin-bottom:1.5rem;background:rgba(255,255,255,.9);
  padding:1.5rem;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.08);transition:all var(--animation-duration) ease;
  border-left:4px solid transparent;position:relative;overflow:hidden;
}
.rss-news-item::before{
  content:'';position:absolute;left:0;top:0;width:4px;height:100%;
  background:var(--primary-gradient);transform:scaleY(0);transition:transform var(--animation-duration) ease;transform-origin:bottom;
}
.rss-news-item:hover{transform:translateX(10px);box-shadow:0 8px 25px rgba(0,0,0,.12)}
.rss-news-item:hover::before{transform:scaleY(1)}
.rss-news-item img.rss-thumbnail{
  width:100px;height:100px;object-fit:cover;border-radius:12px;margin-right:1.5rem;flex-shrink:0;transition:transform var(--animation-duration) ease;
}
.rss-news-item:hover img.rss-thumbnail{transform:scale(1.1) rotate(2deg)}
.rss-content{flex:1}
.rss-title{font-size:1.1rem;color:var(--text-primary);font-weight:600;margin-bottom:.5rem;line-height:1.4}
.rss-snippet{font-size:.95rem;color:var(--text-secondary);line-height:1.5}
.rss-news-item a{display:flex;text-decoration:none;color:inherit;width:100%}

/* deal item */
.deal-item{
  background:rgba(255,255,255,.95);backdrop-filter:blur(15px);
  padding:2rem;border-radius:var(--border-radius);margin-bottom:2rem;box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,.3);
  position:relative;overflow:hidden;transition:all var(--animation-duration) ease;animation:fadeInUp .8s ease-out;
}
.deal-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);
  transition:transform var(--animation-duration) ease;transform-origin:left;
}
.deal-item:hover{transform:translateY(-10px) scale(1.02);box-shadow:var(--card-shadow-hover)}
.deal-item:hover::before{transform:scaleX(1)}
.deal-item img{max-width:100%;height:auto;margin-bottom:1rem;border-radius:12px;transition:transform var(--animation-duration) ease}
.deal-item:hover img{transform:scale(1.05)}
.deal-item p{margin:0 0 1.5rem 0;font-size:1.1rem;line-height:1.6;color:var(--text-primary)}
.deal-item a{
  display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:50px;font-weight:600;font-size:1rem;color:#fff;text-decoration:none;
  background:var(--success-gradient);transition:all var(--animation-duration) ease;box-shadow:0 5px 15px rgba(17,153,142,.3);position:relative;overflow:hidden;
}
.deal-item a::before{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transition:all .6s ease;transform:translate(-50%,-50%);
}
.deal-item a:hover::before{width:300px;height:300px}
.deal-item a:active{transform:scale(.98)}

/* pagination */
.pagination{margin-top:20px;text-align:center}
.pagination a{
  display:inline-block;margin:0 5px;padding:8px 12px;text-decoration:none;border:1px solid #ccc;border-radius:5px;
}
.pagination a.current{background:var(--primary-gradient);color:#fff;border-color:#667eea}

/* misc */
.loading{
  display:inline-block;width:20px;height:20px;border:3px solid rgba(102,126,234,.3);
  border-radius:50%;border-top-color:#667eea;animation:spin 1s ease-in-out infinite;
}

/* ================= Utilities ================= */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.product-card,.product-title,.product-media{min-width:0}

/* ================= Responsive ================= */
/* ≤1200px */
@media (max-width:1200px){
  .products-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
}

/* ≤1024px */
@media (max-width:1024px){
  .container{grid-template-columns:1fr 2fr;gap:1.5rem}
  header h1{font-size:2.5rem}
}

/* touch targets ≤950px */
@media (max-width:950px){
  .pagination a{padding:10px 14px;min-width:38px;min-height:38px;line-height:1}
}

/* ≤950px landscape (compact) */
@media (max-width:950px) and (orientation:landscape){
  body{padding:0}
  header{padding:12px}
  header h1{font-size:1.45rem;line-height:1.25;margin-bottom:4px}
  header p{font-size:.95rem;margin-top:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .current-time{font-size:.85rem;padding:6px 10px;margin-top:.5rem}

  .container{grid-template-columns:1fr;gap:12px;max-width:100%;padding:0 12px;margin:12px auto}
  .sidebar{padding:12px;margin-bottom:12px}

  .search-wrap{margin-bottom:12px}
  .search-bar{gap:8px}
  .search-bar input[type="text"],.search-bar select,.search-bar button,.search-bar .btn-clear{height:36px;padding:8px 10px}
  .search-bar input[type="text"]{width:240px}
  .search-bar select{min-width:150px}

  .products-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .product-image{height:80px}
  .product-title{font-size:.78rem;line-height:1.25;margin-bottom:.4rem}
  .product-link{padding:6px 9px;font-size:.72rem;border-radius:14px}

  .rss-news-item{padding:12px}
  .rss-news-item img.rss-thumbnail{width:52px;height:52px;margin-right:9px}
}

/* 820–1180px landscape (iPad landscape & friends) */
@media (min-width:820px) and (max-width:1180px) and (orientation:landscape){
  .container{grid-template-columns:1fr 2fr 1fr;max-width:1180px;gap:16px;padding:0 16px;margin:18px auto}
  .container > .sidebar:nth-of-type(2){order:3;grid-column:auto}
  .products-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .product-image{height:140px}
  header{padding:22px 16px}
  header h1{font-size:2.1rem}
}

/* ≤768px portrait (mobile portrait) */
@media (max-width:768px) and (orientation:portrait){
  body{
    padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  }
  .container{grid-template-columns:1fr;gap:1rem}
  .sidebar{order:2;margin-top:1rem}
  .main-content{order:1;max-width:1200px;margin:0 auto;padding:1rem;box-sizing:border-box}

  header{padding:2rem 1rem}
  header h1{font-size:2rem}
  header p{font-size:1rem}

  .deal-item{padding:1.5rem}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-media{height:clamp(95px,24vw,130px)}
  .product-title{font-size:.78rem;line-height:1.25}
  .product-link{padding:7px 10px;font-size:.74rem;border-radius:14px}

  .rss-news-item{flex-direction:column;text-align:center;padding:14px}
  .rss-news-item img.rss-thumbnail{width:80px;height:80px;margin:0 0 1rem 0}

  /* disable scroll animations on very small devices */
  .animate-on-scroll,.sidebar,.sidebar *{opacity:1;transform:none;visibility:visible;animation:none}

  /* search full width */
  .search-grid{grid-template-columns:1fr;gap:10px}
  .search-bar input[type="text"],.search-bar input[type="search"],.search-bar select,.search-bar .btn-primary,.search-bar .btn-clear{width:100%}
}

/* 768–1080px portrait (iPad portrait) */
@media (min-width:768px) and (max-width:1080px) and (orientation:portrait){
  header{padding:24px 16px}
  header h1{font-size:2.2rem;line-height:1.25}
  header p{font-size:1rem;margin-top:8px}
  .container{grid-template-columns:.9fr 2.1fr;gap:16px;max-width:980px;padding:0 16px;margin:18px auto}
  .container > .sidebar:nth-of-type(1){order:1}
  .container > .main-content{order:2}
  .container > .sidebar:nth-of-type(2){order:3;grid-column:1 / -1}
  .products-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .product-image{height:130px}
  .product-title{font-size:.9rem}
  .product-link{padding:8px 12px;font-size:.82rem}
  .search-wrap{margin-bottom:14px}
  .search-bar{gap:10px}
  .search-bar input[type="text"]{width:320px}
  .search-bar select{min-width:170px}
  .search-bar input[type="text"],.search-bar select,.search-bar button,.search-bar .btn-clear{height:38px;padding:8px 12px}
  .sidebar{padding:16px}
  .rss-news-item{padding:14px}
}

/* 600–768px (small tablets & large phones) */
@media (min-width:600px) and (max-width:767.98px){
  .container{grid-template-columns:1fr;max-width:100%;padding:0 14px;gap:12px}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-media{height:120px}
  .product-card{padding:10px}
  .product-title{font-size:.86rem;line-height:1.35}
  .product-link{padding:8px 10px;font-size:.8rem}
  .container > .sidebar:nth-of-type(2){grid-column:1 / -1;order:3}
  header{padding:20px 14px}
  header h1{font-size:1.9rem;line-height:1.25}
}

/* ≤480px */
@media (max-width:480px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .product-card{padding:.5rem}
  .product-media{height:clamp(90px,28vw,120px)}
  .product-title{font-size:.78rem;line-height:1.25}
}

/* search-grid tweaks by viewport */
@media (min-width:768px) and (max-width:1180px) and (orientation:portrait){
  .search-grid{grid-template-columns:1fr 220px auto auto;gap:10px}
  .search-bar input[type="search"]{min-width:0;font-size:.95rem}
}
@media (min-width:820px) and (max-width:1180px) and (orientation:landscape){
  .search-grid{grid-template-columns:1fr 220px auto auto;gap:10px}
}
@media (max-width:640px), (min-width:600px) and (max-width:767.98px){
  .search-grid{grid-template-columns:1fr;gap:10px}
}

/* ================= Fallbacks & Safe-area bottom ================= */
@supports not (aspect-ratio:1/1){
  .product-media{position:relative;padding-top:75%;height:auto}
  .product-media img{position:absolute;inset:0;margin:auto}
}

/* mobile bottom buffer + ads guard + footer breath */
@supports (padding:max(0px)){
  body{padding-bottom:max(env(safe-area-inset-bottom,0px),32px)}
}
@supports not (padding:max(0px)){
  body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px)}
}
.products-grid{padding-bottom:14px}
.footer-news{margin-bottom:20px}
body::after{content:"";display:block;height:clamp(16px,5dvh,48px);pointer-events:none}
footer{position:relative;z-index:0;padding-bottom:clamp(16px,3dvh,32px);margin-bottom:max(8px,env(safe-area-inset-bottom,0px))}
ins.adsbygoogle{display:block;min-height:100px;margin:12px 0 16px;clear:both}