/*
 * Package Card T1 — [pdh_card_t1] (standalone) + inside [pdh_grid_t1].
 * Design source: Figma 407:41764 (desktop 342×672) + 407:42366 (mobile 262×572).
 */

/* Reset Flatsome/theme defaults on card children — needed because
   Flatsome adds margin/padding via rules like:
     .col-inner ul li { margin-left: 1.3em }
     .entry-content li { ... }
   These bloat the card's precise 672px height per Figma. */
.pdh-card-t1 ul,
.pdh-card-t1 ol,
.pdh-card-t1 li,
.pdh-card-t1 h1,
.pdh-card-t1 h2,
.pdh-card-t1 h3,
.pdh-card-t1 h4,
.pdh-card-t1 p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdh-card-t1 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  /* visible để tooltip note tràn ra ngoài card. Banner tự clip qua border-radius. */
  overflow: visible;
  box-sizing: border-box;
  font-family: inherit;
  color: #3d3d3d;
  /* Shadow giống card t3 + hover đậm hơn. */
  box-shadow: 0 2px 32px -4px rgba(16, 24, 40, 0.04), 0 4px 16px 10px rgba(16, 24, 40, 0.02), 0 4px 4px -8px rgba(0, 0, 0, 0.03);
  transition: box-shadow .2s ease;
}
.pdh-card-t1:hover {
  box-shadow: 0 12px 32px 8px rgba(10, 13, 18, 0.15), 0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 0 3px -1.5px rgba(10, 13, 18, 0.08);
}

.pdh-card-t1__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 342 / 276;
  overflow: hidden;
  flex-shrink: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.pdh-card-t1__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdh-card-t1__badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 15px 2px 10px;
  border-bottom-right-radius: 999px;
  background: #4564ed;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  z-index: 1;
}

.pdh-card-t1__badge--blue   { background: #4564ed; }
.pdh-card-t1__badge--red    { background: #ff2156; }
.pdh-card-t1__badge--green  { background: #02972c; }
.pdh-card-t1__badge--orange { background: #f24808; }

.pdh-card-t1__badge-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.pdh-card-t1__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%);
  min-height: 0;
  /* Card có border-radius: 12px + overflow: visible (cho tooltip tràn). Gradient
     background của __details tự clip qua bottom radius để 2 góc dưới không vuông. */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.pdh-card-t1__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.pdh-card-t1__package-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.pdh-card-t1__name {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #3d3d3d;
}

.pdh-card-t1__price-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.pdh-card-t1__price-label-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pdh-card-t1__price-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #888;
  margin-right: 4px;
}

.pdh-card-t1__price-info-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pdh-card-t1__price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #3d3d3d;
}

.pdh-card-t1__price-value {
  color: var(--iw-price, var(--iw-accent, #4564ed));
}

.pdh-card-t1__price-period {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #888;
}

/* Tooltip wrap — icon đứng sau giá tiền, ngang baseline /tháng (period). */
.pdh-card-t1__price-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  margin-left: 4px;
  /* Đẩy icon xuống ngang chữ /tháng (price-period line-height ~22 vs price-value 28) */
  margin-bottom: 3px;
  cursor: help;
  outline: none;
}

.pdh-card-t1__price-info-wrap .pdh-card-t1__price-info-icon {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.pdh-card-t1__price-info-wrap:hover .pdh-card-t1__price-info-icon,
.pdh-card-t1__price-info-wrap:focus-visible .pdh-card-t1__price-info-icon {
  opacity: 1;
}

/* Singleton tooltip cho price-info icon (T1 + T2 dùng chung).
   JS append vào <body> để escape transformed ancestor (Swiper) khi position: fixed. */
.iw-card-tooltip {
  position: fixed;
  z-index: 100000;
  width: max-content;
  max-width: 280px;
  padding: 12px 16px;
  background: #3d3d3d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  font-family: inherit;
}

.iw-card-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--iw-tt-arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #3d3d3d;
}

.iw-card-tooltip[data-iw-tt-flip]::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #3d3d3d;
}

.pdh-card-t1 .pdh-card-t1__features {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Cap 3 dòng × 24px + 2 gap × 12px = 96px; cuộn trong nếu vượt
     để CTA / "Xem chi tiết" / tên gói luôn align giữa các card. */
  max-height: 92px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
}

.pdh-card-t1 .pdh-card-t1__features::-webkit-scrollbar { width: 4px; }
.pdh-card-t1 .pdh-card-t1__features::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 2px;
}
.pdh-card-t1 .pdh-card-t1__features::-webkit-scrollbar-track { background: transparent; }

.pdh-card-t1 .pdh-card-t1__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #3d3d3d;
  padding: 0;
  margin: 0;
  margin-left: 0;
}

.pdh-card-t1__feature::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: url("../../img/t1/icon-tick.svg") center / 20px 20px no-repeat;
}

.pdh-card-t1__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdh-card-t1__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--iw-accent, #4564ed);
  text-decoration: none;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.pdh-card-t1__detail:hover { color: var(--iw-accent-strong, #3a52c4); }

.pdh-card-t1__cta {
  display: block;
  text-align: center;
  padding: 13px 24px;
  background: var(--iw-accent, #4564ed);
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  box-sizing: border-box;
  transition: background 0.18s ease, color 0.18s ease;
}

.pdh-card-t1__cta:hover {
  background: var(--iw-accent-strong, #3a52c4);
  color: #ffffff;
}

/* Mobile @media `@media (max-width: 991px)` — moved to bottom Responsive
   section, merge với skeleton mobile rules. */

/* ───────────────────── Skeleton loading variant ─────────────────────
 * Render khi pdh_get_products() trả placeholder (admin chưa pick gói).
 * Mỗi block trong card thật (banner/badge, name, price, features, detail,
 * CTA) đều có .pdh-card-t1__sk--* element shimmer riêng → user nhìn ra
 * đúng layout card thật. Reuse frame nên không layout shift khi swap-in.
 */
.pdh-card-t1__sk {
  background: linear-gradient(90deg, #e3e3e3 0%, #efefef 50%, #e3e3e3 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: pdh-card-shimmer 1.4s ease-in-out infinite;
}

/* Banner: full-bleed image + chip badge top-left */
.pdh-card-t1__sk--img {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #d8d8d8 0%, #e8e8e8 50%, #d8d8d8 100%);
  background-size: 200% 100%;
  animation: pdh-card-shimmer 1.4s ease-in-out infinite;
}
.pdh-card-t1__sk--badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 24px;
  border-radius: 0 0 999px 0;
}

/* Title (2 lines), short bottom line */
.pdh-card-t1__sk--name {
  height: 24px;
  width: 100%;
}
.pdh-card-t1__sk--name-short {
  width: 75%;
}

/* Price label "Chỉ từ" + price value */
.pdh-card-t1__sk--label {
  height: 14px;
  width: 70px;
}
.pdh-card-t1__sk--price {
  height: 26px;
  width: 60%;
  max-width: 180px;
}

/* Feature row — bỏ icon-tick để skeleton trông sạch hơn (override ::before) */
.pdh-card-t1__features--sk .pdh-card-t1__feature::before { display: none; }
.pdh-card-t1__feature--sk { background: none; padding-left: 0; }
.pdh-card-t1__sk--feature {
  display: block;
  height: 14px;
  width: 100%;
  flex: 1;
}
.pdh-card-t1__sk--feature-short { width: 70%; }

/* Detail link + CTA button */
.pdh-card-t1__sk--detail {
  height: 16px;
  width: 80px;
  margin: 0 auto;
}
.pdh-card-t1__sk--cta {
  height: 44px;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #c8d2f5 0%, #d8e0f9 50%, #c8d2f5 100%);
  background-size: 200% 100%;
}

/* ===== Responsive overrides ============================================= */

/* Mobile ≤991: card layout shrink + skeleton sizes. Gộp 2 @media 991 cũ
   (main card mobile + skeleton mobile) vào một block. */
@media (max-width: 991px) {
  /* ── Main card mobile ── */
  .pdh-card-t1 {
    height: auto;
  }
  .pdh-card-t1__details { padding: 16px; gap: 16px; }
  .pdh-card-t1__info { gap: 16px; }
  .pdh-card-t1__package-info { gap: 12px; }
  .pdh-card-t1__name { font-size: 24px; line-height: 32px; }
  .pdh-card-t1__price-info { gap: 4px; }
  .pdh-card-t1__price-label { font-size: 12px; line-height: 16px; }
  .pdh-card-t1__price-info-icon { width: 12px; height: 12px; }
  .pdh-card-t1__features { gap: 12px; }
  .pdh-card-t1__feature { font-size: 14px; line-height: 24px; }
  .pdh-card-t1__feature::before { width: 20px; height: 20px; background-size: 20px 20px; }
  .pdh-card-t1__detail {
    font-size: 14px;
    line-height: 20px;
    padding: 0;
  }
  .pdh-card-t1__cta {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 20px;
  }
  .pdh-card-t1__badge {
    font-size: 11px;
    padding: 1px 15px 1px 10px;
  }

  /* ── Skeleton mobile ── */
  .pdh-card-t1__sk--cta { height: 40px; }
  .pdh-card-t1__sk--name { height: 20px; }
  .pdh-card-t1__sk--price { height: 22px; }
}

@keyframes pdh-card-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Link tên gói + ảnh → trang chi tiết. Ảnh block phủ banner; tên inherit màu. */
.pdh-card-t1__banner-link { display: block; width: 100%; height: 100%; line-height: 0; }
.pdh-card-t1__name a { color: inherit; text-decoration: none; transition: color .15s; }
.pdh-card-t1__name a:hover { color: var(--iw-accent, #4564ed); }

/* đ glue vào số — cùng size/màu giá (đồng bộ t2/t3). */
.pdh-card-t1__price-currency { font-size: inherit; color: inherit; }