:root{
  --bg: #f6fbf7;--surface: #ffffff;--surface-2: #f1fbf3;--text: #0f172a;--muted: #64748b;--border: rgba(2, 6, 23, .10);
  --green: #16a34a;--green-2: #22c55e;--green-3: #0ea05a;--orange: #f97316;--red: #ef4444;--yellow: #facc15;
  --radius: 16px;--radius-lg: 20px;
  --shadow-sm: 0 6px 16px rgba(2, 6, 23, .06);
  --shadow: 0 14px 40px rgba(2, 6, 23, .10);
  --shadow-lg: 0 20px 70px rgba(2, 6, 23, .14);
  --t: 220ms cubic-bezier(.2,.85,.2,1);
}

html, body{ height: 100%; }

body{
  color: var(--text);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(900px 520px at 95% 10%, rgba(249,115,22,.10), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{ max-width: 1100px; }
a{ color: inherit; text-decoration: none; }
::selection{ background: rgba(34,197,94,.25); }

.section-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.2px;
}
.section-title::before{
  content:"";
  width: 10px;height: 10px;border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--green));
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}

/* Header/Nav */
.navbar, .topbar{
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.navbar .nav-link{
  color: rgba(15,23,42,.85) !important;
  font-weight: 700;
  position: relative;
  transition: color var(--t), transform var(--t);
}
.navbar .nav-link:hover{
  color: var(--green) !important;
  transform: translateY(-1px);
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left: 10%;
  bottom: -7px;
  width: 80%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), rgba(249,115,22,.9));
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--t), transform var(--t);
}
.navbar .nav-link:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Inputs */
.form-control, input[type="text"], input[type="search"]{
  border-radius: 999px !important;
  border: 1px solid rgba(2,6,23,.10) !important;
  background: rgba(255,255,255,.9) !important;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.form-control:focus, input[type="text"]:focus, input[type="search"]:focus{
  border-color: rgba(34,197,94,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(34,197,94,.18);
  transform: translateY(-1px);
}

/* Links */
a.link-fresh{
  color: var(--green);
  font-weight: 700;
  transition: color var(--t), background-size var(--t);
  background-image: linear-gradient(90deg, rgba(34,197,94,.25), rgba(249,115,22,.22));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
}
a.link-fresh:hover{
  color: var(--green-3);
  background-size: 100% 2px;
}

/* Badges */
.badge-soft{
  background: rgba(34,197,94,.12);
  color: #0f7a3b;
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 999px;
  padding: .48rem .72rem;
  font-weight: 800;
  letter-spacing: .1px;
  transition: transform var(--t), box-shadow var(--t);
}
.card:hover .badge-soft{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(34,197,94,.12);
}
.badge-ripe{
  background: rgba(249,115,22,.14);
  color: #b24105;
  border: 1px solid rgba(249,115,22,.28);
}

/* Cards */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
}
.card::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(34,197,94,.25), transparent 55%),
    radial-gradient(60% 70% at 85% 0%, rgba(249,115,22,.18), transparent 50%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.card:hover{
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(34,197,94,.28);
}
.card:hover::before{ opacity: 1; }

/* FIX: để hiệu ứng shine dùng absolute không bị lệch */
.card a{
  display: block;
  position: relative;
}

/* Shine overlay */
.card a::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 45%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 900ms ease;
  pointer-events:none;
}
.card:hover a::after{ transform: translateX(130%); }

/* =========================
   IMAGE SIZE (đã FIX)
   ========================= */

/* Banner (carousel + class) */
.carousel-inner{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(2,6,23,.07);
  box-shadow: var(--shadow);
}
.carousel-item img,
.banner-img{
  width: 100%;
  height: 320px;      /* banner cao */
  object-fit: cover;
  background: rgba(148,163,184,.14);
  display: block;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.25));
}

/* Card body */
.card-body{ padding: 14px 14px 12px; }
.card-body .small{
  color: var(--muted) !important;
  font-weight: 700;
}
.card-body .fw-semibold{ line-height: 1.25; }

/* Buttons */
.btn{
  border-radius: 999px !important;
  font-weight: 800;
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn-success{
  border: none !important;
  background: linear-gradient(135deg, var(--green), var(--green-2)) !important;
  box-shadow: 0 14px 30px rgba(34,197,94,.22);
  position: relative;
  overflow: hidden;
}
.btn-success::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:60%;
  height:240%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: transform 800ms ease;
  opacity: .75;
}
.btn-success:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 22px 46px rgba(34,197,94,.28);
  filter: saturate(1.05);
}
.btn-success:hover::before{ transform: translateX(220%) rotate(25deg); }
.btn-success:active{ transform: translateY(0) scale(.98); }

.btn-accent{
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--red));
  box-shadow: 0 14px 30px rgba(239,68,68,.18);
}
.btn-accent:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 22px 46px rgba(239,68,68,.22);
}

/* HR + hover lift */
hr{
  border-top: 1px solid rgba(2,6,23,.08);
  opacity: 1;
}
.hover-lift{
  transition: transform var(--t), box-shadow var(--t);
}
.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}

/* Responsive */
@media (max-width: 576px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .card-body{ padding: 12px; }
}

/* Banner & product image responsive */
@media (max-width: 768px){
  .carousel-item img,
  .banner-img{ height: 220px; }

  .card-img-top{ height: 170px; }
}
@media (max-width: 480px){
  .carousel-item img,
  .banner-img{ height: 180px; }

  .card-img-top{ height: 140px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}
/* ===== FORCE FIX SIZE (put at the VERY END) ===== */

/* Banner */
.carousel-item img,
.banner-img{
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Product images (thấp hơn banner) */
.card-img-top{
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Responsive */
@media (max-width: 768px){
  .carousel-item img,
  .banner-img{ height: 200px !important; }
  .card-img-top{ height: 160px !important; }
}
@media (max-width: 480px){
  .carousel-item img,
  .banner-img{ height: 160px !important; }
  .card-img-top{ height: 130px !important; }
}
/* Product detail image */
.product-main-img{
  width: 100%;
  height: 260px;       /* ảnh chính trang chi tiết */
  object-fit: cover;
  display: block;
}

/* thumbs */
.product-thumbs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.product-thumb-img{
  width: 90px;
  height: 70px;
  object-fit: cover;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 10px;
  cursor: pointer;
}

/* responsive */
@media (max-width: 768px){
  .product-main-img{ height: 260px; }
  .product-thumb-img{ width: 80px; height: 60px; }
}