:root{ --mk-red:#b60000; --mk-red-dark:#8c0000; }
*{ font-family: 'Prompt', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif; }

.bg-red{ background: var(--mk-red) !important; }
.btn-red{ background: var(--mk-red); color:#fff; border:none; }
.btn-red:hover{ background: var(--mk-red-dark); color:#fff; }

.hero{ background: var(--mk-red); color:#fff; padding:60px 0; }
.hero .search-wrap{ max-width:720px; margin:auto; }

.card-spotlight img{ height:180px; object-fit:cover; }
.badge-star{ background:#ffc107; }

/* ===== Utilities / Typo ===== */
.text-truncate-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.text-truncate-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rating i{ color:#ffc107; margin-right: 2px; }

.article-content p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  color: #333;
}

/* ===== Star rating widget ===== */
.star-rating { display: inline-flex; gap: 5px; cursor: pointer; }
.star-rating i { font-size: 24px; color: #ccc; transition: color 0.2s; }
.star-rating i.active { color: #f5c518; }

/* =========================================================
   =============  INDEX PAGE – EXTRACTED STYLES  ===========
   ========================================================= */

/* ========== Banner Responsive ========== */
.banner-img{
  height: clamp(220px, 35vw, 500px);
  object-fit: cover;
}
@media (max-width: 576px){
  .banner-search{ width: 90% !important; }
}

/* ========== Menu Categories (Square Tiles) ========== */
.menu-bar-wrapper{
  background:#f8f9fa;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

/* Desktop: Grid layout */
.menu-container{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:14px;
}

/* การ์ดหมวดหมู่ (สี่เหลี่ยมจัตุรัส) */
.menu-tile {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  color:#fff;
  background:#dc3545;
  border-radius:14px;
  box-shadow:0 4px 12px rgba(220,53,69,0.15);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  padding:6px;            /* ลด padding ให้กระชับ */
  aspect-ratio:1/1;       /* สี่เหลี่ยมจัตุรัสแท้ๆ */
  min-width:100px;        /* เล็กสุด */
  max-width:140px;        /* ใหญ่สุด */
}
.menu-tile i{
  font-size:1.7rem;
  line-height:1;
  margin-bottom:4px;
}
.menu-tile span{
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:.2px;
}
.menu-tile:hover{
  background:#b31217;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(179,18,23,0.25);
}

/* Breakpoints */
@media (max-width: 1199.98px){
  .menu-container{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991.98px){
  .menu-container{ grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: horizontal scroll */
@media (max-width: 767.98px){
  .menu-container{
    display:flex;
    gap:12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 6px;
    scroll-snap-type:x mandatory;
  }
  .menu-container::-webkit-scrollbar{ display:none; }
  .menu-tile{
    flex:0 0 auto;
    scroll-snap-align:center;
    min-width:130px;
  }
}
@media (max-width: 575.98px){
  .menu-tile i{ font-size:1.9rem; }
  .menu-tile span{ font-size:.95rem; }
}

/* ========== TikTok Grid & Responsive ========== */
.tiktok-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tiktok-item{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.tiktok-embed-wrap{
  aspect-ratio:9/16;
  position:relative;
  background:#000;
  overflow:hidden;
}
.tiktok-embed-wrap > *{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Fallback thumbnail */
.tiktok-fallback{
  display:block;
  position:absolute;
  inset:0;
}
.tiktok-fallback img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tiktok-play{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.5);
  border-radius:50%;
  width:52px; height:52px;
  display:grid; place-items:center;
  color:#fff; font-size:28px;
}
.tiktok-caption{
  padding:.6rem .75rem .8rem;
  text-align:center;
}

/* Desktop → Tablet columns */
@media (max-width: 1199.98px){ .tiktok-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px){  .tiktok-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 767.98px){  .tiktok-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Mobile: one-item swipe */
@media (max-width: 575.98px){
  .tiktok-grid{
    display:flex;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
  }
  .tiktok-item{
    flex:0 0 85vw;
    scroll-snap-align:center;
  }

  /* hint arrows overlay */
  .tiktok-wrapper{ position:relative; }
  .tiktok-hint{
    position:absolute;
    top:50%;
    left:0; right:0;
    transform:translateY(-50%);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    color:#fff;
    font-size:.9rem;
    background:rgba(0,0,0,0.3);
    padding:6px 12px;
    border-radius:20px;
    width:max-content;
    margin:auto;
    animation:fadeHint 5s ease forwards;
  }
  .tiktok-hint i{ font-size:1.1rem; }
  @keyframes fadeHint{
    0%{ opacity:1; }
    60%{ opacity:1; }
    100%{ opacity:0; visibility:hidden; }
  }
}

/* ========== Sidebar Top 10 Styles ========== */
/* ===== Sidebar Top 10 (หัวข้อใหญ่ขึ้น + ถ้วยทองใหญ่ขึ้น) ===== */
.top10-card { background:#fff; }

.top10-header {
  background: linear-gradient(135deg, #b60000 0%, #ff6b6b 100%);
  color: #fff;
  padding: 1.4rem 1.4rem;     /* สูงขึ้นจากเดิม */
  min-height: 90px;           /* เพิ่มความสูงรวม */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.top10-header .bi {
  font-size: 2.1rem;          /* ไอคอนใหญ่ขึ้น */
  color: #FFD700;             /* สีทอง */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  flex: 0 0 auto;
}
.top10-header .fw-bold {
  font-size: 1.25rem;
  letter-spacing: .3px;
}

.top10-item{
  padding: .75rem 1rem;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.top10-item:hover{
  background:#fff6f6;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(182,0,0,.07);
  text-decoration: none;
}

.top10-rank{
  width: 34px; height: 34px; flex:0 0 34px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700; color:#5a3d00;
  background: linear-gradient(135deg, #ffe08a 0%, #ffc107 100%);
  box-shadow: 0 3px 8px rgba(255,193,7,.35);
  margin-top: 2px;
}
.top10-thumb{
  width: 60px; height: 60px; object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.top10-title{
  font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 170px;
}
.top10-stars i{ font-size: .95rem; }

@media (max-width: 1199.98px){ .top10-title{ max-width: 150px; } }
@media (max-width: 991.98px){  .top10-title{ max-width: 210px; } }
@media (max-width: 575.98px){
  .top10-title{ max-width: 160px; }
  .top10-thumb{ width:56px; height:56px; }
  .top10-rank{ width:32px; height:32px; font-size:.95rem; }
}

/* ===== Advertising Grid ===== */
.card.ads-card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card.ads-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.card.ads-card img {
  object-fit: cover;
  height: 260px;
  width: 100%;
}
.card.ads-card .card-body {
  background: #fff;
  padding: 0.8rem 1rem;
}

/* ===== TikTok Banner / Promo hero ===== */
.promo-hero {
  position: relative;
  overflow: visible;
  margin-bottom: 3rem; /* ช่องว่างจาก section ด้านล่าง */
  isolation: isolate;
}
.promo-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--red-height, 65%);
  background: #d63131;
  z-index: 0;
  border-radius: 0 0 8px 8px;
}
.promo-hero__inner {
  position: relative;
  min-height: clamp(200px, 26vw, 320px);
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 3vw, 28px);
  padding: clamp(8px, 1.8vw, 18px) clamp(12px, 3vw, 28px);
  z-index: 1;
}

/* ภาพคนแบบ clamp (เดสก์ท็อป) */
.promo-hero__person {
  position: absolute;
  bottom: 0;
  left: clamp(6px, 50vw, 28px);
  height: clamp(180px, 30vw, 360px);
  object-fit: contain;
  transform: translateY(0%);
  z-index: 2;
}

/* ข้อความด้านขวา */
.promo-hero__text {
  margin-left: clamp(160px, 32vw, 460px);
  color: #fff;
  z-index: 2;
  padding-bottom: 10px;
}
.promo-hero__text h1 {
  font-weight: 800;
  font-size: clamp(16px, 2vw, 50px);
  line-height: 1.1;
  margin: 0;
}
.promo-hero__text .lead {
  font-size: clamp(13px, 1.6vw, 20px);
  margin: 0;
  opacity: 0.95;
}
.promo-hero__soon {
  font-weight: 800;
  color: #ffd72c;
  font-size: clamp(14px, 2vw, 24px);
  margin: 0.3rem 0 0;
}

/* ✅ Responsive overrides (แก้รูปเล็ก/ข้อความโดดบนมือถือ) */
@media (max-width: 768px) {
  .promo-hero__person {
    left: 3%;
    width: 42%;
    height: auto;
    max-width: none;
    transform: translateY(0%);
  }
  .promo-hero__text {
    margin-left: 48%;
    padding-bottom: 6px;
  }
  .promo-hero__text h1 { font-size: clamp(18px, 3.5vw, 28px); line-height: 1.2; }
  .promo-hero__text .lead { font-size: clamp(13px, 3vw, 18px); }
  .promo-hero__soon { font-size: clamp(13px, 3.2vw, 18px); }
}
@media (max-width: 480px) {
  .promo-hero__person {
    left: 2%;
    width: 50%;
  }
  .promo-hero__text { margin-left: 52%; }
}

/* ===== Page Banner (ใช้ในหน้ารายการ/หมวดหมู่) ===== */
.page-banner {
  position: relative;
  background: url('../../assets/img/banner/cover.png') center/cover no-repeat;
  height: clamp(160px, 26vw, 240px); /* ไม่ใหญ่เท่า index */
  border-radius: 0 0 12px 12px;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h2 {
  font-size: clamp(20px, 2.4vw, 36px);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ===== น่ารักๆ ใต้รีวิว ===== */
.cute-footer-bar {
  background: linear-gradient(135deg, #fff3f3 0%, #ffe9e9 100%);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(97, 89, 89, 0.08);
  border: 1px solid #ffd6d6;
  animation: fadeInCute 0.8s ease;
}
.cute-text {
  font-weight: 600;
  color: #b60000;
  font-size: clamp(14px, 1.2vw, 18px);
}
.cute-icon {
  font-size: clamp(20px, 1.6vw, 28px);
  animation: bounceCute 3s infinite ease-in-out;
  display: inline-block;
}
@keyframes bounceCute {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes fadeInCute {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ย่อขนาดรูปเฉพาะเซคชันนี้ โดยไม่กระทบที่อื่น */
.promo-hero--small .promo-hero__person{
  height: clamp(160px, 22vw, 320px);
}



/* ===== Footer Section ===== */
.footer-section {
  background: #343a40; /* พื้นหลังเทาเข้ม */
  color: #fff; /* ฟอนต์ทั่วไปเป็นสีขาว */
}

/* หัวข้อหลักของ footer ให้เป็นสีแดงเดิม */
.footer-section h5 {
  color: #ff6b6b !important; /* ✅ สีแดงเดิม */
  letter-spacing: .3px;
}

/* ฟอนต์ทั่วไปทั้งหมดใน footer */
.footer-section p,
.footer-section a,
.footer-section small,
.footer-section li {
  color: #fff !important; /* ✅ สีขาว */
}

/* hover ลิงก์ */
.footer-section a:hover {
  color: #ff6b6b !important;
}

/* เส้นคั่น */
.footer-section hr {
  border-color: rgba(255,255,255,0.15);
}

/* ====== Social Icons ====== */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: all .3s ease;
  text-decoration: none;
}

.social-icon:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* Hover สีของแต่ละแพลตฟอร์ม */
.social-icon.facebook:hover { background: #1877f2; }
.social-icon.line:hover { background: #00b900; }
.social-icon.tiktok:hover { background: #000; }
.social-icon.lemon:hover { background: #f7d340; color: #000; }
.social-icon.youtube:hover { background: #ff0000; }


/* ===== Footer Titles (with cute icons) ===== */
.footer-title {
  color: #b60000;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.footer-title i {
  font-size: 1.3rem;
  color: #ff6b6b;
  transition: transform 0.4s ease, color 0.4s ease;
}

/* เอฟเฟกต์ hover น่ารัก */
.footer-title:hover i {
  transform: rotate(15deg) scale(1.2);
  color: #ffd700; /* เปลี่ยนเป็นสีทองตอน hover */
}
.mk-stars .star.filled{
  color:#FFD700;
  text-shadow: 0 0 6px rgba(255,215,0,0.6);
}
.page-banner {
  border-radius: 12px;
  overflow: hidden;
}