/* =====================================================
   BASE
===================================================== */
body {
  margin: 0;
  background: #fffacc; /* vàng nhạt sáng hơn trước (#fff7ed → #fffacc) */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #3f2a1d; /* nâu đen */
}

/* =====================================================
   SECTION
===================================================== */
.soup-top3 {
  padding: 40px 16px;
}

.section-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #6b3f1d;
  margin-bottom: 32px;

  /* Thêm shape */
  display: inline-block;       /* để border chỉ bao quanh text */
  padding: 8px 20px;           /* khoảng cách giữa text và viền */
  border: 2px solid #6b3f1d;   /* màu viền */
  border-radius: 12px;          /* bo tròn góc */
  background-color: #fff7ed; /* màu nền shape (cùng màu body hoặc khác) */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


/* =====================================================
   GRID
===================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* mỗi card tối thiểu 220px, tối đa 1fr */
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* =====================================================
   CARD – B2B LAYOUT
===================================================== */
.card {
  background: #ffffff;           /* nền trắng */
  border: 2px solid #3f2a1d;     /* viền màu nhã nhặn */
  border-radius: 12px;           /* bo tròn góc */
  padding: 12px;                 /* giảm padding để card nhỏ hơn */
  text-align: center;
  box-shadow: 0 4px 12px rgba(107, 63, 29, 0.1); /* giảm shadow nhẹ */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(107, 63, 29, 0.15);
}

/* =====================================================
   RANK
===================================================== */
/* =====================================================
   RANK WITH CROWN ICON
===================================================== */
.rank {
  font-size: 23px;    /* giảm một chút để hợp với card nhỏ hơn */
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;           /* khoảng cách giữa icon và số */
}

/* Crown icon bằng emoji hoặc SVG */
.rank.no1::before {
  content: "👑";
  font-size: 24px;
}
.rank.no2::before {
  content: "🥈";
  font-size: 24px;
}
.rank.no3::before {
  content: "🥉";
  font-size: 24px;
}

/* Màu sắc giữ nguyên */
.no1 { color: #d97706; }
.no2 { color: #a16207; }
.no3 { color: #92400e; }
#92400e; }

/* =====================================================
   IMAGE
===================================================== */
.img-link {
  display: block;
  cursor: pointer;
}
/* =====================================================
   IMAGE – SLIGHT ROTATE ON HOVER
===================================================== */
.small-img img {
  max-width: 160px;            /* giữ kích thước B2B gọn gàng */
  width: 110%;
  height: auto;
  margin: 6px auto;
  display: block;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: rotate(0deg) scale(1); /* trạng thái bình thường */
}

/* Hover effect: slight rotate + scale + shadow */
.img-link:hover img {
  transform: rotate(2deg) scale(1.2); /* xoay sang phải */
}

.img-link:hover img:nth-child(even) {
  transform: rotate(-2deg) scale(1.2); /* xoay sang trái cho các ảnh chẵn */
}


/* =====================================================
   TEXT
===================================================== */
.card p {
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0;
  color: #5a4638;
}

.card span {
  font-size: 14px;
  font-weight: 600;
  color: #7c2d12;
}

/* =====================================================
   PRODUCT NAME – ONE LINE & BOLD
===================================================== */
.soup-top3 .card .product-name {
  font-size: 15px;
  font-weight: 800;
  color: #3f2a1d;
  margin: 6px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* =====================================================
   TOGGLE HEADER (JS CONTROLLED)
===================================================== */
@keyframes title-bounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.05) translateY(-3px); }
  60% { transform: scale(1.03) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}
.soup-top3 .toggle-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 18px 56px;
  background: #fffacc;   
  border: 2px solid #3f2a1d; 
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(63, 42, 29, 0.12);
  transition: box-shadow 0.25s ease;
}

.soup-top3 .toggle-header:hover {
  box-shadow: 0 6px 18px rgba(107, 63, 29, 0.18);
}

.soup-top3 .toggle-title {
  font-size: 30px;          /* hơi lớn hơn */
  font-weight: 900;         /* thật đậm */
  text-align: center;
  line-height: 1.4;
  color: #3f2a1d;  
  letter-spacing: 0.03em;
  cursor: pointer;
  background: linear-gradient(90deg, #d97706, #a16207); /* màu gradient cam-brown */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(63, 42, 29, 0.2);
  transition: transform 0.25s ease, text-shadow 0.25s ease;
}
.soup-top3 .toggle-header:hover .toggle-title {
  transform: scale(1.05);
  text-shadow: 2px 2px 6px rgba(63, 42, 29, 0.35);
  
}
/* =====================================================
   ARROW
===================================================== */
.soup-top3 .arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  border-right: 3px solid #6b3f1d;
  border-bottom: 3px solid #6b3f1d;
  transition: transform 0.25s ease;
}

/* =====================================================
   TOGGLE CONTENT VISIBILITY (CORE FIX)
===================================================== */
.soup-top3 .toggle-content {
  display: none;
}
.soup-top3 .toggle-section.is-open .toggle-content {
  display: block;
}
.soup-top3 .toggle-section.is-open .arrow {
  transform: translateY(-50%) rotate(-135deg);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .rank {
    font-size: 32px;
  }

  .small-img img {
    max-width: 160px;
  }

  .section-title {
    font-size: 22px;
    
  }

  .soup-top3 .toggle-title {
    font-size: 20px;
  }
}
/* =====================================================
   CLICK HINT ICON (HTML VERSION)
===================================================== */
.toggle-header {
  position: relative;
}

.toggle-header .click-hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: hint-bounce 1.6s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.9;
}

/* Ẩn icon khi section đã mở */
.toggle-section.is-open .click-hint {
  display: none;
}

@keyframes hint-bounce {
  0%   { transform: translate(-50%, 0); }
  50%  { transform: translate(-50%, -6px); }
  100% { transform: translate(-50%, 0); }
}