/* =========================================================
   S07 – BẢNG GIÁ   #bang-gia
   ========================================================= */
#bang-gia .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;align-items:stretch}
#bang-gia .plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}
#bang-gia .plan.hot{z-index:1;border:2px solid #438f59;background:linear-gradient(180deg,#f3fff7 0%,#fff 36%);box-shadow:0 18px 44px rgba(9,110,62,.2),0 0 0 5px rgba(67,143,89,.09);transform:translateY(-5px)}
#bang-gia .plan.hot::after{content:"";position:absolute;inset:-3px;padding:2px;border-radius:inherit;background:conic-gradient(from var(--plan-border-angle),transparent 0 75%,#ffe15a 81%,#fff 85%,#62d17d 89%,transparent 95%);pointer-events:none;z-index:2;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;animation:plan-border-run 4s linear infinite}
@property --plan-border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes plan-border-run{to{--plan-border-angle:360deg}}
#bang-gia .plan.hot:hover{box-shadow:0 24px 52px rgba(9,110,62,.24),0 0 0 6px rgba(67,143,89,.12);transform:translateY(-8px)}
#bang-gia .plan.hot .flag{z-index:3;background:linear-gradient(100deg,#246844,#58a95d);box-shadow:0 5px 14px rgba(26,100,57,.2)}
#bang-gia .plan.hot .flag-star{display:inline-block;margin-right:5px;color:#ffe15a;font-size:16px;line-height:1;text-shadow:0 0 5px rgba(255,225,90,.6);vertical-align:-1px}
#bang-gia .plan.hot .plan-ctas .btn-blue{box-shadow:0 10px 22px rgba(9,142,80,.3)}
#bang-gia .plan .flag{position:absolute;top:-14px;left:28px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 14px;border-radius:6px;text-transform:uppercase}
#bang-gia .plan .flag.soon{background:#FFF7E6;color:#D48806;border:1px solid var(--gold)}
#bang-gia .plan h3{font-size:20px;font-weight:700;color:var(--ink)}
#bang-gia .plan .for{font-size:14px;color:var(--muted);margin:4px 0 20px}
#bang-gia .plan .old{font-size:14px;color:var(--red)}
#bang-gia .plan .old s{margin-right:8px}
#bang-gia .plan .old em{font-style:normal;background:var(--red);color:#fff;font-weight:700;font-size:12px;padding:2px 8px;border-radius:6px}
#bang-gia .plan .price{font-size:34px;font-weight:700;color:var(--g-700);line-height:1.2;margin:6px 0 2px}
#bang-gia .plan .price small{font-size:15px;font-weight:500;color:var(--muted)}
#bang-gia .plan .per{font-size:13px;color:var(--g-700);font-weight:500;margin-bottom:22px}
#bang-gia .plan ul{list-style:none;display:grid;gap:10px;margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line)}
#bang-gia .plan li{position:relative;padding-left:28px;font-size:14.5px}
#bang-gia .plan li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--g-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%23098E50' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
#bang-gia .plan .btn{text-align:center;text-transform:uppercase;justify-content:center}
/* Gói Standard: 2 nút xếp chồng (Mua ngay nổi bật, Dùng thử viền) */
#bang-gia .plan-ctas{display:grid;gap:8px}
#bang-gia .plan-ctas .btn{text-transform:uppercase;letter-spacing:.04em}
#bang-gia .price-note{text-align:center;margin-top:28px;font-size:14px;color:var(--muted)}
#bang-gia .price-note a{color:var(--g-700);font-weight:600}
#bang-gia .price-page-link{margin-top:10px;text-align:center;font-size:14px;font-weight:700;color:var(--g-700)}
#bang-gia .price-page-link span{display:inline-block;transition:transform .18s}
#bang-gia .price-page-link a:hover span{transform:translateX(3px)}
#bang-gia .pricing-tabs{display:flex;width:max-content;max-width:100%;align-items:center;justify-content:center;gap:7px;margin:24px auto 0;padding:6px;border:1px solid #60a76a;border-radius:28px;background:#fff}
#bang-gia .pricing-tab{min-width:112px;padding:11px 22px;border:0;border-radius:22px;background:transparent;color:#4d8d5b;font:600 15px Inter,sans-serif;cursor:pointer;transition:background .18s,color .18s}
#bang-gia .pricing-tab:hover{color:var(--g-700)}
#bang-gia .pricing-tab.is-active{background:#5c9f65;color:#fff}
#bang-gia .pricing-tab:focus-visible{outline:3px solid #6ad99b;outline-offset:3px}
#bang-gia .homepage-pricing-panel[hidden]{display:none}
#bang-gia .prices{margin-top:24px}
#bang-gia .free-plan-grid,#bang-gia .education-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px;max-width:900px;margin:24px auto 0}
#bang-gia .free-plan-card{display:flex;min-width:0;flex-direction:column;padding:28px 22px 20px;border:1px solid #e1eae4;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(20,72,45,.08)}
#bang-gia .free-plan-card h3{min-height:28px;color:#35566d;font-size:19px;font-weight:800;line-height:1.35;text-align:center}
#bang-gia .free-plan-price{margin-top:22px;color:#35566d;font-size:21px;font-weight:800;text-align:center}
#bang-gia .free-plan-term{margin-top:6px;color:#35566d;font-size:13px;font-weight:600;text-align:center}
#bang-gia .free-plan-description{min-height:58px;margin:12px 0 0;color:#405f73;font-size:14px;line-height:1.55;text-align:center}
#bang-gia .free-plan-cta{display:flex;min-height:44px;align-items:center;justify-content:center;margin-top:14px;padding:9px 14px;border-radius:8px;background:linear-gradient(100deg,#245e4c,#50a255);color:#fff;font-size:13px;font-weight:800;text-align:center;text-transform:uppercase;transition:filter .18s,transform .18s}
#bang-gia .free-plan-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
#bang-gia .free-plan-card .feature-list{display:grid;gap:8px;margin:18px 0 0;padding:10px 0 0;border-top:1px solid #edf1ee;list-style:none}
#bang-gia .free-plan-card .feature-list li{position:relative;padding-left:22px;color:#526159;font-size:13px;line-height:1.5}
#bang-gia .free-plan-card .feature-list li::before{position:absolute;left:0;top:1px;display:grid;width:15px;height:15px;place-items:center;border-radius:50%;background:#e4f8eb;color:#21834e;content:"\2713";font-size:10px;font-weight:800}
#bang-gia .education-plan-card{position:relative;padding-top:32px}
#bang-gia .education-badge{position:absolute;top:12px;left:50%;padding:4px 10px;border-radius:999px;background:#e8f8ee;color:#187344;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap}
#bang-gia .education-plan-card .free-plan-price{margin-top:22px}
#bang-gia .free-plan-price.education-negotiated{color:#18784a;font-size:18px}
@media (prefers-reduced-motion:reduce){
  #bang-gia .plan.hot::after{animation:none;background:conic-gradient(#62d17d,#ffe15a,#62d17d)}
}

/* ---------------------------------------------------------
   MÁY TÍNH (>1000px): gói gọn trong 1 màn hình (trừ menu 72px).
   Chữ, khoảng cách co theo chiều cao màn hình (vh).
   --------------------------------------------------------- */
@media (min-width:1001px){
  #bang-gia{min-height:calc(100vh - 72px);display:flex;flex-direction:column;justify-content:center;padding:clamp(10px,2.4vh,40px) 0}
  #bang-gia > .wrap{width:100%}
  #bang-gia .sec-title{font-size:clamp(24px,min(3vw,4.6vh),38px)}
  #bang-gia .sec-sub{margin-top:clamp(4px,1vh,12px);font-size:clamp(14px,1.9vh,17px)}
  #bang-gia .prices{margin-top:clamp(18px,3.4vh,44px);gap:22px}
  #bang-gia .plan{padding:clamp(18px,2.8vh,30px) 24px clamp(14px,2.2vh,26px)}
  #bang-gia .plan h3{font-size:clamp(17px,2.3vh,20px)}
  #bang-gia .plan .for{font-size:13px;margin:2px 0 clamp(8px,1.6vh,18px)}
  #bang-gia .plan .old{font-size:13px}
  #bang-gia .plan .price{font-size:clamp(24px,3.8vh,34px);margin:2px 0 0}
  #bang-gia .plan .per{font-size:12.5px;margin-bottom:clamp(10px,1.8vh,20px)}
  #bang-gia .plan .btn{padding:clamp(9px,1.4vh,13px) 20px;font-size:14.5px}
  #bang-gia .plan ul{gap:clamp(2px,.7vh,9px);margin-top:clamp(10px,1.8vh,20px);padding-top:clamp(10px,1.8vh,20px)}
  #bang-gia .plan li{font-size:clamp(12.5px,1.65vh,14px);line-height:1.4;padding-left:24px}
  #bang-gia .plan li::before{width:16px;height:16px;top:1px;background-size:10px}
  #bang-gia .price-note{margin-top:clamp(6px,1vh,16px);font-size:12px}
  #bang-gia .price-page-link{margin-top:6px;font-size:12px}
  #bang-gia .pricing-tabs{margin-top:clamp(12px,2vh,20px)}
  #bang-gia .prices{margin-top:clamp(14px,2.4vh,24px)}
  #bang-gia .free-plan-grid,#bang-gia .education-plan-grid{margin-top:clamp(14px,2.4vh,24px)}
  /* Thẻ Standard rộng hơn một chút; 2 nút đứng cạnh nhau để không đội chiều cao */
  #bang-gia .prices{grid-template-columns:1.15fr 1fr 1fr}
  #bang-gia .plan-ctas{grid-template-columns:.75fr 1.4fr}
  #bang-gia .plan-ctas .btn{padding-left:8px;padding-right:8px;font-size:12.5px;white-space:nowrap}
}

@media (max-width:1000px){
  #bang-gia .prices{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  #bang-gia .plan.hot{order:-1}
}
@media (max-width:700px){
  #bang-gia .plan.hot{transform:none}
  #bang-gia .plan.hot:hover{transform:translateY(-2px)}
  #bang-gia .pricing-tabs{gap:3px;padding:4px}
  #bang-gia .pricing-tab{min-width:0;padding:10px 15px;font-size:14px}
  #bang-gia .free-plan-grid,#bang-gia .education-plan-grid{grid-template-columns:1fr;max-width:480px}
  #bang-gia .free-plan-card{padding:22px 18px 18px}
  #bang-gia .free-plan-description{min-height:0}
}
#bang-gia .sec-sub{width:fit-content;max-width:100%;margin-right:auto;margin-left:auto;padding:10px 16px;border:1px solid #cce8d4;border-radius:12px;background:linear-gradient(100deg,#effaf2,#fff);box-shadow:0 5px 16px rgba(25,89,54,.08);color:#3d5d49;font-size:clamp(15px,1.25vw,18px);font-weight:600;line-height:1.6}
#bang-gia .sec-sub strong{display:inline-block;margin-left:4px;padding:2px 9px;border:1px solid #b8dfc3;border-radius:999px;background:#e2f5e8;color:#176b3c;font-weight:800;white-space:nowrap}