/* ==========================================================================
   VinaSite – Trang chủ mặc định (giới thiệu theme + dịch vụ VinaSite)
   Dùng lại token màu/khoảng cách trong dragon-base.css nên tự đổi theo
   "Màu chính / Màu nhấn" mà chủ site chọn ở Customizer.
   ========================================================================== */

/* Vàng dòng tagline trong logo ("TRÂN TRỌNG NIỀM TIN CỦA BẠN").
   Dùng cho chữ nhỏ / icon trên nền hero xanh đậm: đỏ logo đặt trên xanh chỉ đạt
   ~2.5:1 (chìm), còn vàng này đạt ~4.7:1 nên đọc rõ. */
:root { --vs-yellow: #ffd100; }

/* --- Lưới dùng chung ---------------------------------------------------- */
.vs-grid {
  display: grid;
  gap: var(--dragon-gap);
}

.vs-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .vs-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .vs-grid--3 { grid-template-columns: 1fr; }
}

/* --- Hero --------------------------------------------------------------- */
.vs-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(135deg, var(--dragon-primary) 0%, var(--dragon-primary-dark) 100%);
  color: var(--dragon-white);
}

.vs-hero__deco {
  position: absolute;
  inset: auto -120px -160px auto;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--vs-yellow) 0%, transparent 68%);
  opacity: .20;
  pointer-events: none;
}

.vs-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.vs-hero .dragon-eyebrow { color: var(--vs-yellow); }

/* Phải viết .vs-hero .vs-hero__title (độ ưu tiên 0,2,0) để thắng
   ".dragon-scope h1" (0,1,1) trong dragon-base.css — nếu không, tiêu đề bị tô
   màu chính (xanh đậm) và chìm hẳn vào nền hero cũng màu xanh. */
.vs-hero .vs-hero__title {
  margin: .6rem 0 1rem;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.18;
  font-weight: 700;
  color: var(--dragon-white);
}

.vs-hero .vs-hero__title strong { color: var(--vs-yellow); font-weight: 700; }

.vs-hero__desc {
  margin: 0 0 1.6rem;
  max-width: 46rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .86);
}

.vs-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.8rem;
}

.vs-hero__points {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-hero__points li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .88);
  font-size: .96rem;
}

.vs-hero__points svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--vs-yellow);
}

/* Thẻ thông tin theme bên phải hero */
.vs-hero__card {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--dragon-radius-lg);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
}

.vs-hero__card-head {
  display: grid;
  gap: .3rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.vs-hero__card-head strong {
  font-size: 1.35rem;
  color: var(--dragon-white);
}

.vs-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  justify-self: start;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--vs-yellow);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vs-hero__badge svg { width: 14px; height: 14px; }

.vs-hero__ver { font-size: .88rem; color: rgba(255, 255, 255, .7); }

.vs-hero__specs {
  display: grid;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.vs-hero__specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
  font-size: .92rem;
}

.vs-hero__specs li:last-child { border-bottom: 0; padding-bottom: 0; }
.vs-hero__specs span { color: rgba(255, 255, 255, .72); }
.vs-hero__specs b { color: var(--dragon-white); }

.vs-hero__note {
  display: flex;
  gap: .55rem;
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}

.vs-hero__note svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; }
.vs-hero__note strong { color: var(--dragon-white); }

@media (max-width: 900px) {
  .vs-hero__inner { grid-template-columns: 1fr; }
  .vs-hero__card { order: 2; }
}

/* --- Card tính năng / dịch vụ ------------------------------------------ */
.vs-feature,
.vs-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  padding: 1.6rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}

.vs-feature:hover,
.vs-service:hover {
  transform: translateY(-3px);
  box-shadow: var(--dragon-shadow-md);
}

.vs-feature__title,
.vs-service__title {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.4;
  color: var(--dragon-primary);
}

.vs-feature__desc,
.vs-service__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--dragon-muted);
}

.vs-service__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: .4rem;
  color: var(--dragon-gold-text);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}

.vs-service__link svg { width: 18px; height: 18px; transition: transform .18s ease; }
.vs-service__link:hover { color: var(--dragon-accent-hover); }
.vs-service__link:hover svg { transform: translateX(3px); }

/* --- Gói dịch vụ -------------------------------------------------------- */
.vs-pricing__grid { align-items: stretch; }

.vs-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.8rem 1.6rem;
  height: 100%;
}

.vs-plan--featured {
  border-color: var(--dragon-accent);
  box-shadow: var(--dragon-shadow-md);
}

.vs-plan__tag {
  position: absolute;
  top: -.75rem;
  left: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--dragon-accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vs-plan__tag svg { width: 14px; height: 14px; }

.vs-plan__name {
  margin: 0;
  font-size: 1.3rem;
  color: var(--dragon-primary);
}

.vs-plan__desc {
  margin: 0;
  font-size: .92rem;
  color: var(--dragon-muted);
}

.vs-plan__price {
  margin: .4rem 0 .6rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--dragon-border);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dragon-gold-text);
}

.vs-plan__list {
  display: grid;
  gap: .55rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

.vs-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--dragon-text);
}

.vs-plan__list svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .2rem;
  color: var(--dragon-success);
}

.vs-plan .dragon-btn { margin-top: auto; }

/* --- Liên hệ ------------------------------------------------------------ */
.vs-contact__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 900px) {
  .vs-contact__grid { grid-template-columns: 1fr; }
}

.vs-contact__intro h2 { margin: .5rem 0 .8rem; }

.vs-contact__intro > p {
  margin: 0 0 1.2rem;
  line-height: 1.7;
  color: var(--dragon-muted);
}

.vs-contact__list {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.vs-contact__list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
  color: var(--dragon-text);
}

.vs-contact__list svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--dragon-success);
}

.vs-contact__info {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-contact__info li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .98rem;
  color: var(--dragon-text);
}

.vs-contact__info a {
  color: var(--dragon-primary);
  font-weight: 600;
  text-decoration: none;
}

.vs-contact__info a:hover { color: var(--dragon-gold-text); }