/* ==========================================================================
   VIEBIM — Giao diện trang mua license (shop)
   Thiết kế bám theo mục Addin Service trên viebim.vn: cùng bảng màu, cùng
   kiểu thẻ giá, cùng khung "Chọn kỳ hạn" — để khách bấm Mua ngay từ
   viebim.vn sang đây không thấy mình vừa rời khỏi website.

   Đường dẫn ảnh trong file này để dạng TƯƠNG ĐỐI (../logo-...) nên giữ
   nguyên tác dụng dù cả thư mục có dời sang viebim.vn/license/.
   ========================================================================== */

:root{
  --vb-navy:#0f3357;
  --vb-navy-deep:#0a2440;
  --vb-blue:#2b6ca8;
  --vb-blue2:#2f74b5;
  --vb-sky:#7db8ea;
  --vb-ink:#1c2b3f;
  --vb-muted:#5c6e85;
  --vb-line:#dfe8f2;
  --vb-soft:#f4f8fc;
  --vb-shadow:0 10px 40px rgba(43,108,168,.13);
  --vb-shadow-lg:0 24px 70px rgba(15,51,87,.22);
}

body{
  margin:0;
  background:var(--vb-soft);
  color:var(--vb-ink);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--vb-blue);text-decoration:none}
a:hover{color:var(--vb-navy)}

.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* --------------------------------------------------------------------------
   THANH TRÊN CÙNG — nền trắng như viebim.vn, logo thật thay cho chữ
   -------------------------------------------------------------------------- */
.shopbar{
  background:#fff;border-bottom:1px solid var(--vb-line);
  display:flex;align-items:center;gap:26px;
  padding:14px 24px;position:sticky;top:0;z-index:50;
  box-shadow:0 1px 12px rgba(15,51,87,.05);
}
/* Ẩn chữ VIEBIM/MUA LICENSE, thay bằng ảnh logo — khỏi phải sửa file PHP */
.shopbar .brand{
  flex:0 0 auto;display:block;width:126px;height:38px;
  text-indent:-999em;overflow:hidden;white-space:nowrap;
  background:url("logo-viebim-color.png") left center/contain no-repeat;
}
.shopbar nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.shopbar nav a{
  color:var(--vb-ink);font-size:14px;font-weight:500;
  padding:8px 14px;border-radius:9px;white-space:nowrap;
}
.shopbar nav a:hover{background:var(--vb-soft);color:var(--vb-navy)}

/* --------------------------------------------------------------------------
   PHẦN MỞ ĐẦU
   -------------------------------------------------------------------------- */
.shophero{
  background:linear-gradient(160deg,#fff 0%,var(--vb-soft) 100%);
  border-bottom:1px solid var(--vb-line);
  padding:44px 20px 38px;text-align:center;
}
.shophero h1{
  margin:0 0 10px;font-size:31px;line-height:1.25;color:var(--vb-navy);
  font-weight:800;letter-spacing:-.4px;
}
.shophero p{
  margin:0 auto;max-width:660px;color:var(--vb-muted);font-size:15px;
}

/* --------------------------------------------------------------------------
   CHỌN KỲ HẠN — khung viền, 4 ô, giống bảng trên viebim.vn
   -------------------------------------------------------------------------- */
.termpick{
  margin:30px auto 0;background:#fff;border:1px solid var(--vb-line);
  border-radius:15px;padding:8px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  box-shadow:var(--vb-shadow);
}
.termpick button{
  appearance:none;background:#fff;border:1.5px solid transparent;
  border-radius:11px;padding:14px 12px;cursor:pointer;text-align:left;
  font:inherit;color:var(--vb-ink);font-weight:700;font-size:15px;
  display:flex;flex-direction:column;gap:3px;transition:.15s;
  position:relative;padding-left:38px;
}
.termpick button:before{
  content:"";position:absolute;left:14px;top:17px;width:15px;height:15px;
  border-radius:50%;border:2px solid #b9cbdd;background:#fff;transition:.15s;
}
.termpick button:hover{background:var(--vb-soft)}
.termpick button.on{
  border-color:var(--vb-blue);background:#f0f7fd;
}
.termpick button.on:before{
  border-color:var(--vb-blue);
  box-shadow:inset 0 0 0 3.5px #fff,inset 0 0 0 9px var(--vb-blue);
}
.termpick .save{
  display:block;font-size:12.5px;font-weight:500;color:var(--vb-muted);
}
.termpick button.on .save{color:var(--vb-blue)}

/* --------------------------------------------------------------------------
   BA THẺ GÓI
   -------------------------------------------------------------------------- */
.plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin:26px 0 34px;align-items:start;
}
.plan{
  background:#fff;border:1px solid var(--vb-line);border-radius:16px;
  padding:26px 24px 28px;position:relative;
  display:flex;flex-direction:column;min-height:100%;
  box-shadow:var(--vb-shadow);
}
.plan.pop{
  border:2px solid var(--vb-blue);box-shadow:var(--vb-shadow-lg);
}
.plan .tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--vb-blue);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;
  padding:5px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(43,108,168,.35);
}
.plan h3{
  margin:0 0 4px;font-size:20px;font-weight:800;color:var(--vb-navy);
}
.plan .sub{color:var(--vb-muted);font-size:13.5px;margin-bottom:16px;min-height:20px}

.plan .was{
  color:#9aabbd;font-size:15px;text-decoration:line-through;
  min-height:22px;line-height:22px;
}
/* Thẻ Dùng thử để chữ "Miễn phí" trần trong .price, hai thẻ kia bọc trong
   <span class="js-price"> — nên đặt cỡ chữ lớn lên chính .price cho cả hai
   trường hợp, rồi <small> tự thu nhỏ lại. */
.plan .price{
  margin:0 0 18px;font-size:33px;font-weight:800;color:var(--vb-navy);
  letter-spacing:-.7px;line-height:1.15;
}
.plan .price span{display:block}
.plan .price small{
  display:block;margin-top:7px;color:var(--vb-muted);
  font-size:12.5px;line-height:1.55;font-weight:400;letter-spacing:0;
}

.plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.plan li{
  position:relative;padding:0 0 0 26px;margin-bottom:10px;
  font-size:14px;color:var(--vb-ink);line-height:1.55;
}
.plan li:before{
  content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border-left:2.2px solid var(--vb-blue);border-bottom:2.2px solid var(--vb-blue);
  transform:rotate(-45deg);
}

.btn-buy{
  display:block;text-align:center;background:var(--vb-navy);color:#fff;
  border-radius:11px;padding:14px 18px;font-size:15.5px;font-weight:700;
  transition:.15s;margin-top:auto;
}
.btn-buy:hover{background:var(--vb-navy-deep);color:#fff}
.btn-buy.ghost{
  background:#fff;color:var(--vb-navy);border:1.6px solid var(--vb-line);
}
.btn-buy.ghost:hover{background:var(--vb-soft);border-color:var(--vb-blue);color:var(--vb-navy)}

/* --------------------------------------------------------------------------
   CHỌN SỐ SEAT
   -------------------------------------------------------------------------- */
.seatpick{
  background:var(--vb-soft);border:1px solid var(--vb-line);border-radius:11px;
  padding:13px 15px;margin:0 0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.seatpick label{font-size:13.5px;color:var(--vb-muted);font-weight:500}
.stepper{
  display:flex;align-items:center;background:#fff;
  border:1px solid var(--vb-line);border-radius:9px;overflow:hidden;
}
.stepper button{
  appearance:none;border:0;background:#fff;color:var(--vb-navy);
  width:34px;height:36px;font-size:19px;line-height:1;cursor:pointer;
  font-family:inherit;transition:.12s;
}
.stepper button:hover{background:var(--vb-soft)}
.stepper input{
  width:52px;height:36px;border:0;border-left:1px solid var(--vb-line);
  border-right:1px solid var(--vb-line);text-align:center;
  font:700 15px inherit;color:var(--vb-navy);background:#fff;
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.tierhint{
  margin-top:12px;text-align:center;font-size:12.5px;color:var(--vb-muted);
}

/* --------------------------------------------------------------------------
   LINH TINH
   -------------------------------------------------------------------------- */
.muted{color:var(--vb-muted)}
.small{font-size:13px}
.wrap > p.muted.small{text-align:center;margin:0 0 34px}

.shopfoot{
  background:#fff;border-top:1px solid var(--vb-line);
  padding:26px 0 34px;color:var(--vb-muted);font-size:13.5px;text-align:center;
}
.shopfoot .muted.small{margin-top:6px}

/* --------------------------------------------------------------------------
   MÀN HÌNH NHỎ
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .plans{grid-template-columns:1fr;gap:18px}
  .plan.pop{order:-1}
  .termpick{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shopbar{padding:11px 16px 8px;gap:8px;flex-wrap:wrap;justify-content:center}
  .shopbar .brand{width:112px;height:34px}
  .shopbar nav{width:100%;margin-left:0;justify-content:center;gap:2px}
  .shopbar nav a{padding:7px 11px;font-size:13.5px}
  .shophero{padding:32px 16px 28px}
  .shophero h1{font-size:24px}
  .termpick{grid-template-columns:1fr;gap:6px}
  .plan .price span,.plan .price > .js-price{font-size:29px}
}