/* ===== Concept A · VÉ VÀO LỚP =====
   Khách: tấm vé cam, cuống giấy xé được chứa video 1 thật. Rê chuột: cuống nghiêng như sắp xé. Bấm: cuống xé bay ra, thân báo đang mở video.
   FREE: thẻ lên lớp (boarding pass) chuẩn mực 3 ô: đang dừng · cổng kế · hạng vé. PRO: cặp nút chuẩn, nút chính có ảnh bài kế. */
.na-ve-o{display:inline-flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:100%}
.na-ve{--cuong:176px;--lo:10px;display:block;max-width:100%;text-decoration:none;color:var(--cta-chu);border-radius:16px;
  filter:drop-shadow(0 14px 20px rgba(240,138,36,.30)) drop-shadow(0 2px 2px rgba(120,40,0,.28));transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.na-ve-in{display:grid;grid-template-columns:minmax(0,1fr) var(--cuong);min-height:100px}
/* lỗ đục ở mép giữa thân và cuống: mỗi phần tự khoét nửa vòng tròn ở 2 góc sát nhau, nền gì cũng khớp */
.na-than{background:var(--nut-cam);padding:16px 24px;display:flex;flex-direction:column;justify-content:center;gap:5px;border-radius:16px 0 0 16px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-mask:radial-gradient(circle var(--lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.na-cuong{position:relative;background:#fff4e6;border-radius:0 16px 16px 0;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:7px;
  background-image:linear-gradient(#e3b48c 50%,transparent 0);background-size:2px 9px;background-repeat:repeat-y;background-position:0 0;
  transform-origin:0 100%;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .35s;
  -webkit-mask:radial-gradient(circle var(--lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.na-nhan{font:800 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:rgba(30,14,21,.66)}
.na-chinh{display:inline-flex;align-items:center;gap:10px;font:800 22px/1.15 var(--font);letter-spacing:-.01em}
.na-chinh .ic{width:22px;height:22px;stroke-width:2.6;transition:transform .25s}
.na-phu{font:600 13.5px/1.35 var(--font);color:rgba(30,14,21,.8);max-width:34ch}
.na-th{border-radius:8px;box-shadow:0 0 0 1px rgba(122,61,12,.15)}
.na-cuong-t{font:800 11.5px/1.2 var(--font);color:#7a3d0c;text-align:center}
.na-ve:hover,.na-ve.is-hover{transform:translateY(-2px);filter:drop-shadow(0 18px 26px rgba(240,138,36,.42)) drop-shadow(0 3px 3px rgba(120,40,0,.3))}
.na-ve:hover .na-cuong,.na-ve.is-hover .na-cuong{transform:rotate(3deg) translate(2px,-2px)}
.na-ve:hover .na-chinh .ic,.na-ve.is-hover .na-chinh .ic{transform:translateX(4px)}
.na-ve:hover .th img,.na-ve.is-hover .th img{transform:scale(1.06)}
.na-ve:active,.na-ve.is-bam{transform:translateY(2px);filter:drop-shadow(0 5px 8px rgba(240,138,36,.3)) drop-shadow(0 1px 1px rgba(120,40,0,.3))}
.na-ve:focus-visible,.na-ve.is-focus{outline:3px solid var(--vang);outline-offset:5px}
.na-ve.dang-tai .na-cuong{transform:translate(46px,10px) rotate(12deg);opacity:0}
.na-ve.dang-tai .na-chinh .ic{display:none}
.na-ve.dang-tai .na-phu{opacity:.6}
.na-ve-o.na-lon{align-items:center}
.na-lon .na-ve{--cuong:230px;--lo:12px}.na-lon .na-ve-in{min-height:128px}.na-lon .na-chinh{font-size:28px}.na-lon .na-than{padding:22px 30px}
.na-ngang .na-ve{filter:drop-shadow(0 12px 18px rgba(206,30,120,.16)) drop-shadow(0 2px 2px rgba(120,40,0,.2))}
.giua-c .na-ve-o{align-items:center}
.giua-c .na-pass{margin-inline:auto;text-align:left}

/* mini ở header */
.na-mini{display:inline-flex;align-items:stretch;height:42px;text-decoration:none;color:var(--cta-chu);filter:drop-shadow(0 6px 12px rgba(240,138,36,.32));transition:transform .2s;--lo:5px}
.na-mini-than{display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 18px;background:var(--nut-cam);border-radius:11px 0 0 11px;font:800 14.5px/1 var(--font);white-space:nowrap;
  -webkit-mask:radial-gradient(circle var(--lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle var(--lo) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.na-mini-cuong{display:inline-flex;align-items:center;padding:0 11px 0 12px;background:#fff4e6;border-radius:0 11px 11px 0;font:800 11.5px/1 var(--font);letter-spacing:.04em;color:#7a3d0c;white-space:nowrap;font-variant-numeric:tabular-nums;
  background-image:linear-gradient(#e3b48c 50%,transparent 0);background-size:1.5px 6px;background-repeat:repeat-y;transition:transform .35s cubic-bezier(.2,.9,.3,1.2);transform-origin:0 100%;
  -webkit-mask:radial-gradient(circle var(--lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle var(--lo) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lo) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.na-mini-cuong .tag-pro{height:18px}
.na-mini:hover{transform:translateY(-1px)}.na-mini:hover .na-mini-cuong{transform:rotate(4deg)}
.na-mini:active{transform:translateY(1px)}
.na-mini:focus-visible{outline:3px solid var(--vang);outline-offset:3px;border-radius:12px}
.na-mini.dang-tai .na-mini-cuong{transform:translateX(16px) rotate(14deg);opacity:0;transition:transform .4s,opacity .3s}

/* nút chuẩn (FREE, PRO) */
.na-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:12px;font:800 15.5px/1.15 var(--font);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;text-align:left}
.na-btn .ic{transition:transform .2s}
.na-btn.cam{background:var(--nut-cam);color:var(--cta-chu);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(150,60,0,.22) inset,0 8px 18px rgba(240,138,36,.32)}
.na-btn.vien{background:transparent;color:inherit;box-shadow:0 0 0 1.5px currentColor inset}
.na-btn:hover,.na-btn.is-hover{transform:translateY(-1px)}.na-btn:hover .ic,.na-btn.is-hover .ic{transform:translateX(3px)}
.na-btn.vien:hover,.na-btn.vien.is-hover{background:rgba(244,30,146,.08)}
.na-btn:active,.na-btn.is-bam{transform:translateY(2px)}
.na-btn.cam:active,.na-btn.cam.is-bam{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 6px rgba(240,138,36,.3)}
.na-btn:focus-visible,.na-btn.is-focus{outline:3px solid var(--vang);outline-offset:3px}
.na-btn.dang-tai .ic{display:none}
.na-btn.co-anh{padding:6px 18px 6px 6px;min-height:68px;gap:14px}
.na-btn.co-anh .na-th{width:104px;border-radius:8px}
.na-btn-t{display:flex;align-items:center;gap:8px;min-width:0}
.na-btn-t b{display:block;font:800 16px/1.15 var(--font)}
.na-btn-t small{display:block;font:600 12.5px/1.3 var(--font);color:rgba(30,14,21,.78);max-width:30ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}

/* thẻ lên lớp (FREE) */
.na-pass{background:#fffaf3;color:var(--chu);border-radius:20px;overflow:hidden;max-width:900px;box-shadow:0 30px 60px rgba(10,2,6,.35),0 0 0 1px rgba(255,255,255,.06)}
.sang .na-pass{box-shadow:0 18px 40px rgba(102,10,59,.12),0 0 0 1px var(--vien)}
.na-pass-dau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;padding:13px 22px;background:var(--than-2);color:var(--chu-toi-2);font:500 13px/1.3 var(--font);border-bottom:2px dashed #e3b48c}
.na-pass-dau b{color:#fff;font-weight:800}
.na-tuyen{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff}
.na-tuyen i{display:block;width:70px;height:2px;background:linear-gradient(90deg,var(--hong-400) 12%,rgba(255,255,255,.25) 12%)}
.na-han{color:var(--vang)}.na-han b{color:var(--vang)}
.na-pass-than{display:grid;grid-template-columns:1fr 1fr .85fr}
.na-o{padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-right:1.5px dashed #ecd3c0;min-width:0}
.na-o:last-child{border-right:0}
.na-o>i,.na-o span>i{font:800 10.5px/1 var(--font);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--chu-3)}
.na-o .na-th{width:100%}
.na-o b{font:800 16px/1.2 var(--font);font-variant-numeric:tabular-nums}
.na-o-t{font:500 13px/1.4 var(--font);color:var(--chu-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-ghe .tag-pro{height:32px;margin:2px 0 4px}
.na-o b.na-gia{font-size:26px;font-weight:900;letter-spacing:-.01em}
.na-lo{display:flex;align-items:flex-start;gap:10px;margin:0 22px;padding:12px 14px;border-radius:10px;background:var(--hong-50);box-shadow:3px 0 0 var(--hong-500) inset;font:500 14px/1.45 var(--font);color:var(--chu-2)}
.na-lo .ic{stroke:var(--hong-600);margin-top:1px}.na-lo b{color:var(--chu)}
.na-pass-chan{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:18px 22px 20px}
.na-pass-chan .dam{margin-left:auto}
.na-pass .na-btn.vien{color:var(--chu)}
.na-pass .dam{color:var(--chu-2)}.na-pass .dam b{color:var(--chu)}.na-pass .dam .ic{stroke:var(--xanh)}
.na-pass.gon{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:14px 18px;max-width:960px}
.na-pass.gon .na-o{flex-direction:row;align-items:center;gap:16px;padding:0;border:0;flex:1 1 380px}
.na-pass.gon .na-o .na-th{width:150px}
.na-pass.gon .na-o>span{display:flex;flex-direction:column;gap:5px;min-width:0}
.na-pass.gon .na-pass-chan{padding:0;flex:0 1 auto}
.na-pass.gon .na-pass-chan .dam{margin-left:0}

/* PRO */
.na-pro{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.toi .na-pro .na-btn.vien{color:#fff}
.na-pro-ve{flex-basis:100%;display:inline-flex;align-items:center;gap:10px;font:500 13.5px/1.3 var(--font);color:var(--chu-toi-2)}
.sang .na-pro-ve{color:var(--chu-2)}
.giua-c .na-pro{justify-content:center}.giua-c .na-pro-ve{justify-content:center}

@media (max-width:760px){
  .na-pass-than{grid-template-columns:1fr}
  .na-o{border-right:0;border-bottom:1.5px dashed #ecd3c0;display:grid;grid-template-columns:132px 1fr;column-gap:14px;row-gap:4px;align-items:start}
  .na-o>i{grid-column:1/-1}
  .na-o .na-th{grid-row:span 2}
  .na-ghe{grid-template-columns:auto 1fr}.na-ghe .tag-pro{grid-row:span 2}
  .na-pass-chan .na-btn{flex:1 1 100%}
  .na-pass-chan .dam{margin-left:0}
}
@media (max-width:600px){
  .na-ve-o,.na-ve{width:100%}
  .na-ve{--cuong:118px;--lo:8px}
  .na-than{padding:14px 16px}
  .na-chinh{font-size:18.5px}
  .na-phu{font-size:12.5px}
  .na-lon .na-ve{--cuong:128px}.na-lon .na-chinh{font-size:20px}.na-lon .na-than{padding:16px 18px}
  .na-cuong{padding:8px}
  .na-ve.dang-tai .na-cuong{transform:translate(14px,8px) rotate(8deg)}
  .na-cuong-t{font-size:10.5px}
  .na-mini{height:38px}.na-mini-than{padding:0 10px 0 13px;font-size:13.5px}.na-mini-cuong{padding:0 8px 0 9px;font-size:10.5px}
  .na-pass-dau{padding:12px 16px}.na-tuyen{display:none}
  .na-pass.gon .na-o .na-th{width:112px}
  .na-pass.gon .na-pass-chan,.na-pass.gon .na-btn{width:100%}
  .na-pro,.na-pro .na-btn{width:100%}
  .na-btn.co-anh{justify-content:flex-start}.na-btn.co-anh .na-th{width:86px}.na-btn-t small{max-width:19ch}
}
.na-btn [data-t]{text-wrap:balance}
@media (max-width:600px){.na-btn{padding:0 16px;font-size:15px}}