/* Biểu mẫu sớ, hộp thoại, thanh toán. Mọi ô nhập >= 16px để iOS không tự phóng to. */
.bieu-mau { display: grid; gap: 10px; }
.bieu-mau fieldset { border: 1px solid #e6b0aa; border-radius: 6px; padding: 8px; display: grid; gap: 8px; min-width: 0; }
.bieu-mau legend { padding: 0 6px; color: var(--do-dam); font-weight: bold; }
.truong { display: grid; gap: 4px; min-width: 0; }
.truong > span, .truong > label { font-size: 15px; }
.truong input, .truong select, .truong textarea { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 16px; border: 1px solid var(--do); border-radius: 6px; background: #fff; }
.truong textarea { min-height: 76px; resize: vertical; }
.truong .loi-truong { color: #a00; font-size: 14px; min-height: 0; }
.truong.sai input, .truong.sai select, .truong.sai textarea { border-color: #d00; background: #fff4f4; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chon-nhieu { display: flex; flex-wrap: wrap; gap: 6px; }
.chon-nhieu label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; background: #fff; border: 1px solid var(--do); border-radius: 20px; font-size: 15px; cursor: pointer; }
.chon-nhieu input { width: 18px; height: 18px; }
.dong-chon { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; min-height: 44px; }
.dong-chon input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.kenh { display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid #e6b0aa; border-radius: 6px; }
.kenh .hang-kenh { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; }
.xem-truoc { max-width: 160px; border: 1px solid #aaa; }
.vietqr { display: grid; gap: 6px; justify-items: center; text-align: center; }
.vietqr img { width: 100%; max-width: 280px; background: #fff; }
.ma-don { font-family: monospace; font-size: 20px; letter-spacing: 2px; background: #fff; padding: 4px 10px; border-radius: 4px; user-select: all; }
.dem-nguoc { font-variant-numeric: tabular-nums; font-weight: bold; }
.dot-vang { height: 60px; text-align: center; font-size: 36px; animation: dot 1.2s ease-in-out 3; }
@keyframes dot { 0% { transform: translateY(8px) scale(.8); opacity: .3; } 50% { transform: translateY(-6px) scale(1.2); opacity: 1; } 100% { transform: translateY(-14px) scale(.9); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .dot-vang { animation: none; } }
@media (max-width: 380px) { .hai-cot { grid-template-columns: 1fr; } .tab { font-size: 14px; } }