/* thanhcatinlanh.com - trang Ung ho (/ung-ho/). CHI nap o 2 trang ung ho, khong dong style.css.
   Dung lai bien mau cua style.css (--mat, --vien, --nhan...) -> tu theo che do toi. */

:root{--ung-ho:#b83a2e;--ung-ho-nen:#fbecea}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ung-ho:#ef8b7f;--ung-ho-nen:#3a1f1c}}
:root[data-theme="dark"]{--ung-ho:#ef8b7f;--ung-ho-nen:#3a1f1c}

.trang-ung-ho{max-width:860px}
.dau-ung-ho{display:flex;flex-direction:column;gap:8px}
.loi-ngo p{margin:0 0 10px;line-height:1.75}
.loi-ngo p:last-child{margin-bottom:0}
.ghi-nho-nhe{color:var(--chu-nhat);font-size:14px}

.bao-ung-ho{padding:12px 14px;border-radius:var(--r);border:1px solid var(--vien-dam);
  background:var(--mat-chim);font-size:15px}
.bao-ung-ho.bao-loi{border-color:var(--ung-ho);background:var(--ung-ho-nen)}

/* chon phuong thuc (chi hien khi co >= 2) */
.chon-pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.the-pt{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--vien);
  border-radius:var(--r);background:var(--mat);box-shadow:var(--bong);text-decoration:none;color:var(--chu)}
.the-pt b{font-size:16px}
.the-pt span{font-size:13.5px;color:var(--chu-nhat);line-height:1.5}
.the-pt:hover{border-color:var(--nhan)}

.khoi-pt{scroll-margin-top:12px}

/* form */
.form-ung-ho{display:flex;flex-direction:column;gap:18px}
.nhom-chon{border:0;margin:0;padding:0;min-width:0}
.nhom-chon legend{font-weight:600;font-size:15px;margin-bottom:10px;padding:0}
.nhom-chon .nhe{font-weight:400;color:var(--chu-nhat)}

/* o chon dang nut: input that van o do (ban phim + trinh doc man hinh), chi an hinh */
.hang-hinh-thuc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hang-muc{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.hinh-thuc,.muc{position:relative;display:block}
.hinh-thuc input,.muc input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.hinh-thuc span,.muc span{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:8px 10px;border:1.5px solid var(--vien-dam);border-radius:9px;background:var(--mat);
  font-weight:600;font-size:16px;cursor:pointer;line-height:1.25;user-select:none}
.muc-khac span{font-size:14.5px}
.hinh-thuc input:checked+span,.muc input:checked+span{border-color:var(--nhan);background:var(--nhan-nen);
  color:var(--nhan);box-shadow:inset 0 0 0 1px var(--nhan)}
.hinh-thuc input:checked+span::before,.muc input:checked+span::before{content:"✓ ";font-weight:700}
.hinh-thuc input:focus-visible+span,.muc input:focus-visible+span{outline:3px solid var(--nhan);outline-offset:2px}
.hinh-thuc span:hover,.muc span:hover{border-color:var(--nhan)}

.o-khac{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.o-khac[hidden]{display:none}
.o-khac label{font-size:14px;color:var(--chu-nhat)}
.nhap-tien{display:flex;align-items:center;gap:8px;max-width:280px}
.nhap-tien span{font-weight:600;color:var(--chu-nhat)}
.nhap-tien input{flex:1;min-width:0;font:inherit;font-size:18px;padding:9px 12px;border-radius:8px;
  border:1.5px solid var(--vien-dam);background:var(--mat);color:var(--chu)}
.nhap-tien input[aria-invalid="true"]{border-color:var(--ung-ho);border-width:2px}

.o-ten{display:block;font-size:14px;color:var(--chu-nhat);margin-bottom:5px}
#ten-nguoi-ung-ho{width:100%;max-width:420px;font:inherit;font-size:16px;padding:9px 12px;border-radius:8px;
  border:1.5px solid var(--vien-dam);background:var(--mat);color:var(--chu)}
.o-an-danh{display:flex;gap:9px;align-items:flex-start;margin-top:12px;cursor:pointer;font-size:15px}
.o-an-danh input{width:20px;height:20px;margin-top:2px;flex:none}
.o-an-danh small{display:block;color:var(--chu-nhat);font-size:13px}

.o-bay{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.tom-tat{margin:0;font-size:16px;font-weight:600}
.nut-ung-ho{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  padding:12px 22px;font-size:17px;font-weight:700;border-radius:10px;border:0;
  background:var(--ung-ho);color:#fff;text-decoration:none;align-self:flex-start}
.nut-ung-ho:hover:not(:disabled){background:var(--ung-ho);filter:brightness(1.08)}
.nut-ung-ho:disabled{opacity:.65;cursor:progress}
.nut-ung-ho[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nut-ung-ho[aria-busy="true"]::after{animation:none}}

.loi-o{margin:6px 0 0;color:var(--ung-ho);font-weight:600;font-size:14.5px}
.loi-o::before{content:"⚠ "}
.loi-o[hidden]{display:none}
.ghi-chu-usd{margin:0;padding:10px 12px;border-left:3px solid var(--vien-dam);background:var(--mat-chim);
  font-size:14px;line-height:1.6;color:var(--chu-nhat)}
.ghi-chu-nho{margin:0;font-size:13.5px;line-height:1.6;color:var(--chu-nhat)}

/* PayPal */
.nut-paypal{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;font-size:16px;font-weight:700;
  border-radius:10px;border:1.5px solid #003087;color:#003087;background:#ffc439;text-decoration:none}
.an-chu{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Ngan hang / QR */
.khoi-nh{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.tt-tk{margin:0;display:flex;flex-direction:column;gap:10px}
.dong-tk dt{font-size:13px;color:var(--chu-nhat)}
.dong-tk dd{margin:2px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gt-tk{font-size:17px;font-weight:600;word-break:break-word}
.nut-chep{min-height:36px}
.qr{margin:0;text-align:center}
.qr img{display:block;width:320px;max-width:100%;height:auto;background:#fff;padding:12px;border-radius:10px;
  border:1px solid var(--vien)}
.qr figcaption{font-size:13px;color:var(--chu-nhat);margin-top:8px;max-width:320px}
.bao-chep{margin:0;font-size:13.5px;color:var(--tot);min-height:1em}
.khoi-nh .ghi-chu-nho,.khoi-nh .bao-chep{grid-column:1 / -1}
.chi-iphone{display:none}
@supports (-webkit-touch-callout:none){.chi-iphone{display:inline}}

@media (max-width:640px){
  .hang-muc{grid-template-columns:repeat(3,1fr)}
  .nut-ung-ho{align-self:stretch;font-size:16px;padding:12px 12px}
  .khoi-nh{grid-template-columns:1fr}
  .qr img{width:280px;margin:0 auto}
  .qr figcaption{margin:8px auto 0}
}
@media print{.form-ung-ho,.chon-pt{display:none}}