/* =============================================================================
 *  ໝາກນ້ຳເຕົ້າປູປາ — ສະໄຕລ໌ຂອງໜ້າເກມ ເມື່ອຢູ່ໃນ layout ຂອງລະບົບຫວຍ (layouts.app)
 * =============================================================================
 *
 *  ໄຟລ໌ນີ້ໂຫຼດຄູ່ກັບ public/css/app.css (Bootstrap 5) ບໍ່ແມ່ນ Tailwind
 *  ຈຶ່ງບໍ່ມີ preflight ໃດໆມາ reset ໜ້າຫວຍ — ໜ້າຕາຂອງທັງເວັບຄົງເສັ້ນດຽວກັນ
 *
 *  ຕົວແປສີດຶງມາຈາກ app.css ຂອງລະບົບຫວຍ (--red, --gold, --brand, ...)
 *  ຈຶ່ງປ່ຽນທີມທັງເວັບບ່ອນດຽວແລ້ວໜ້າເກມປ່ຽນຕາມ
 * ========================================================================== */

/* ---------------------------------------------------------------- ເວທີເກມ -- */
.hg-stage {
    background: linear-gradient(160deg, #fff 0%, #fffaf3 100%);
    border: 1px solid var(--line, #ececf2);
    border-radius: 22px;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(31, 37, 51, .07);
}

.hg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .85rem;
}

.hg-head .hg-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.hg-head .hg-ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--red-soft, #fdeceb);
    color: var(--red, #d11a2a);
    font-size: 1.4rem;
    flex: 0 0 auto;
}

.hg-head h1 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.hg-head .hg-sub {
    font-size: .78rem;
    color: var(--muted, #8a8f9c);
}

.hg-chips {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.hg-chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    border-radius: 999px;
    border: 1px solid var(--line, #ececf2);
    background: #fff;
    color: var(--muted, #8a8f9c);
    font-size: .7rem;
    font-weight: 700;
    padding: .3rem .65rem;
    white-space: nowrap;
}

.hg-chip.is-fair { border-color: #b8e6c8; background: #eefaf1; color: #157a3c; }
.hg-chip.is-live { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.hg-chip button, button.hg-chip { cursor: pointer; }

/* -------------------------------------------------------- ນັບຖອຍຫຼັງ / ຜົນ -- */
.hg-count {
    text-align: center;
    padding: 1rem .5rem;
}

.hg-count-label {
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--red, #d11a2a);
    font-weight: 800;
}

.hg-ring {
    position: relative;
    width: 132px;
    height: 132px;
    margin: .6rem auto .35rem;
}

@media (min-width: 992px) {
    .hg-ring { width: 168px; height: 168px; }
}

.hg-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hg-ring svg circle { transform: rotate(-90deg); transform-origin: 50% 50%; }

.hg-ring .hg-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #1f2533;
}

@media (min-width: 992px) {
    .hg-ring .hg-num { font-size: 3.8rem; }
}

.hg-phase {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.hg-phase-title { font-size: 1.5rem; font-weight: 800; color: #1f2533; }

/* -------------------------------------------------------------- ຊ່ອງຜົນ --- */
.hg-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    justify-items: center;
    margin-top: .5rem;
}

.hg-slots[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.hg-slots[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 992px) { .hg-slots { gap: 1rem; } }

.hg-slot {
    position: relative;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border: 1px solid var(--line, #ececf2);
    background: #fbfbfd;
    display: grid;
    place-items: center;
    box-shadow: inset 0 2px 10px rgba(31, 37, 51, .04);
    overflow: hidden;
}

.hg-slot .hg-lid {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    height: 33%;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(31, 37, 51, .09), transparent);
    transform-origin: top center;
    pointer-events: none;
}

.hg-slot[data-phase="tumbling"] .hg-lid { animation: hg-box-open var(--phase-duration, 700ms) cubic-bezier(.34, 1.3, .64, 1) forwards; }

.hg-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(209, 26, 42, .22), rgba(245, 166, 35, .18));
    color: var(--red, #d11a2a);
    font-size: 1.6rem;
}

@media (min-width: 992px) { .hg-box { width: 92px; height: 92px; font-size: 2.6rem; } }

.hg-box.is-shaking { animation: hg-box-shake 620ms cubic-bezier(.36, .07, .19, .97) infinite; }

.hg-face { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: 0 .3rem; }
.hg-face img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(32, 24, 8, .2)); }
.hg-face .nm { font-size: .7rem; font-weight: 800; color: #1f2533; }
.hg-face.is-revealed { animation: hg-face-reveal 560ms cubic-bezier(.2, 1.4, .4, 1) var(--tumble-delay, 0ms) both; }

@media (min-width: 992px) {
    .hg-face img { width: 104px; height: 104px; }
    .hg-face .nm { font-size: .95rem; }
}

.hg-slot .hg-idx {
    position: absolute;
    right: .5rem;
    bottom: .3rem;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: #c2c6d2;
}

/* ------------------------------------------------------------- ສະຫຼຸບຜົນ --- */
.hg-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 768px) { .hg-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.hg-sum-item { border: 1px solid var(--line, #ececf2); border-radius: 14px; padding: .55rem .3rem; text-align: center; background: #fff; }
.hg-sum-item.is-zero { opacity: .45; }
.hg-sum-item img { width: 32px; height: 32px; object-fit: contain; }
.hg-sum-item .nm { font-size: .66rem; color: var(--muted, #8a8f9c); font-weight: 700; }
.hg-sum-item .ct { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ==========================================================================
 *  ໜ້າແທງ — ໂຄງດຽວກັນກັບໜ້າຊື້ຫວຍ (buy.blade.php) ທັງເດັສທັອບ ແລະ ມືຖື
 * ========================================================================== */

/* ------------------------------------------------------- ໜ້າສັດໃຫ້ເລືອກ --- */
.hb-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 576px) { .hb-faces { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.hb-face {
    border: 1.6px solid var(--line, #ececf2);
    background: #fff;
    border-radius: 15px;
    padding: .55rem .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    transition: .14s;
}

.hb-face img { width: 40px; height: 40px; object-fit: contain; }
.hb-face .nm { font-size: .7rem; font-weight: 800; color: #3a3f52; }
.hb-face:disabled { opacity: .45; }
.hb-face.on { border-color: var(--red, #d11a2a); background: var(--red-soft, #fdeceb); box-shadow: 0 0 0 3px rgba(209, 26, 42, .1); }
.hb-face.on .nm { color: var(--red, #d11a2a); }
.hb-face:active { transform: scale(.95); }

/* ---------------------------------------------------------- ຕະກ້າ (ບິນ) --- */
.hb-cart-table { width: 100%; font-size: .9rem; }
.hb-cart-table th { font-size: .72rem; color: var(--muted, #8a8f9c); font-weight: 800; border-bottom: 1px solid var(--line, #ececf2); padding: .4rem .3rem; }
.hb-cart-table td { padding: .5rem .3rem; border-bottom: 1px solid #f3f3f6; vertical-align: middle; }
.hb-pick { display: inline-flex; align-items: center; gap: .2rem; }
.hb-pick img { width: 26px; height: 26px; object-fit: contain; }
.hb-pick .dot { width: 26px; height: 26px; border-radius: 50%; background: #f1f1f5; display: grid; place-items: center; font-size: .68rem; font-weight: 800; }

.hb-empty { text-align: center; color: #9aa0b8; padding: 26px 0; }

/* ------------------------------------------------------------ ຕົ້ວທີ່ວາງ -- */
.hb-ticket { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--line, #ececf2); border-radius: 13px; background: #fff; margin-bottom: .4rem; }
.hb-badge { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: .2rem .6rem; }
.hb-badge.pending { background: #f1f1f5; color: #6b7183; }
.hb-badge.won { background: #e8f8ee; color: #157a3c; }
.hb-badge.lost { background: #fdeceb; color: #c22e1e; }

/* ================================= ມືຖື: ແຜງເລືອກໜ້າສັດຕິດຈໍລຸ່ມ (ບ່ອນເກົ່າຂອງແປ້ນຕົວເລກ) */
.hb-mobile { padding-bottom: 400px; }

@media (max-width: 991.98px) {
    main.container { max-width: 100%; padding-left: 0; padding-right: 0; }
    body.hilo-game .gg-shell { padding-left: 0 !important; padding-right: 0 !important; border-radius: 0; }
    .hb-mobile { padding-left: 12px; padding-right: 12px; }
}

.hb-pad {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 1030;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .13);
    padding: 8px 10px 10px;
}

.hb-sum { display: flex; justify-content: space-between; background: #fbfbe8; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-weight: 800; font-size: .95rem; }
.hb-sum .g { color: #1a9e4b; }

/* ໜ້າສັດ 6 ໂຕ ວາງແທນທີ່ແປ້ນຕົວເລກເດີມ — ຈຳນວນເງິນພິມຢູ່ຊ່ອງດ້ານເທິງແທນ */
.hb-padfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hb-padfaces .hb-face { padding: .45rem .2rem; border-radius: 13px; }
.hb-padfaces .hb-face img { width: 38px; height: 38px; }
.hb-padfaces .hb-face .nm { font-size: .68rem; }

.hb-padinfo { text-align: center; font-size: .78rem; color: #8a8f9c; font-weight: 700; margin: 7px 0 6px; min-height: 1.1em; }
.hb-padinfo b { color: #3a3f52; }

.hb-add-wide { width: 100%; height: 46px; background: #1a9e4b; color: #fff; border: 0; border-radius: 13px; font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hb-add-wide:disabled { opacity: .45; }

.hb-pay { width: 100%; background: var(--red, #d11a2a); color: #fff; border: 0; border-radius: 14px; height: 50px; font-size: 1.05rem; font-weight: 800; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hb-pay:disabled { opacity: .5; }
.hb-err { color: var(--red, #d11a2a); font-size: .8rem; text-align: center; min-height: 1em; margin-top: 3px; }

/* ------------------------------------------------------------ ແຖວໃນບິນ -- */
.hb-cart-head { display: flex; justify-content: space-between; align-items: center; color: #8a8f9c; font-size: .82rem; font-weight: 800; padding: 6px 4px; border-bottom: 1px solid #eee; }
.hb-clear { color: #2b7cff; cursor: pointer; white-space: nowrap; }
.hb-row { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid #f1f1f4; }
.hb-row .del { border: 0; background: transparent; padding: 0 2px; line-height: 1; }
.hb-row .del i { color: var(--red, #d11a2a); font-size: 1.3rem; }

/* ປຸ່ມ + / − ປັບຄັ້ງລະ 1,000 ກີບ — ຮູບແບບດຽວກັນກັບຕະກ້າຂອງໜ້າຊື້ຫວຍ */
.hb-step { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hb-step button { border: 0; background: transparent; font-size: 1.45rem; line-height: 1; width: 30px; height: 30px; padding: 0; font-weight: 700; border-radius: 9px; }
.hb-step button:active { background: #f1f1f5; }
.hb-step .minus { color: var(--red, #d11a2a); }
.hb-step .plus { color: #1a9e4b; }
.hb-step .amt { min-width: 72px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ================================================================ ໜ້າຊຳລະ = */
.hgp-card { border: 1px solid var(--line, #ececf2); border-radius: 20px; background: #fff; padding: 1.1rem; box-shadow: 0 10px 30px rgba(31, 37, 51, .06); }
.hgp-qr { width: 232px; height: 232px; margin: 0 auto; border-radius: 16px; border: 1px solid var(--line, #ececf2); display: grid; place-items: center; overflow: hidden; background: #fff; position: relative; }
.hgp-qr img { width: 100%; height: 100%; object-fit: contain; }
.hgp-qr .expired { position: absolute; inset: 0; background: rgba(255, 255, 255, .93); display: grid; place-items: center; text-align: center; color: var(--red, #d11a2a); font-weight: 800; padding: 1rem; }
.hgp-amt { font-size: 1.8rem; font-weight: 900; color: var(--red, #d11a2a); font-variant-numeric: tabular-nums; }
.hgp-prog { height: 6px; border-radius: 4px; background: #f0f0f4; overflow: hidden; }
.hgp-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--red, #d11a2a), #ff8a5b); transition: width .4s linear; }
.hgp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--red, #d11a2a); display: inline-block; margin: 0 2px; animation: hg-blink 1.2s infinite; }
.hgp-dots i:nth-child(2) { animation-delay: .2s; }
.hgp-dots i:nth-child(3) { animation-delay: .4s; }

/* ========================================================== ການ໌ດຜົນເກມ === */
.hgr-card { border: 1px solid var(--line, #ececf2); border-radius: 18px; background: #fff; padding: .9rem; height: 100%; }
.hgr-faces { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.hgr-faces img { width: 46px; height: 46px; object-fit: contain; }
.hgr-faces .none { width: 46px; height: 46px; border-radius: 12px; background: #f4f4f7; display: grid; place-items: center; color: #b9bdc9; }

/* ================================================================ keyframes */
@keyframes hg-box-open {
    0%   { transform: rotateX(0deg) translateY(0); opacity: 1; }
    60%  { transform: rotateX(-115deg) translateY(-8%); }
    100% { transform: rotateX(-140deg) translateY(-14%); opacity: .85; }
}

@keyframes hg-box-shake {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    10%  { transform: translate3d(-7px, 2px, 0) rotate(-3.5deg); }
    22%  { transform: translate3d(6px, -3px, 0) rotate(3deg); }
    35%  { transform: translate3d(-8px, -2px, 0) rotate(-4deg); }
    48%  { transform: translate3d(7px, 3px, 0) rotate(3.5deg); }
    62%  { transform: translate3d(-5px, -3px, 0) rotate(-2.5deg); }
    76%  { transform: translate3d(5px, 2px, 0) rotate(2deg); }
    88%  { transform: translate3d(-3px, -1px, 0) rotate(-1deg); }
}

@keyframes hg-face-reveal {
    0%   { opacity: 0; transform: scale(.62) rotate(-14deg); }
    55%  { opacity: 1; transform: scale(1.14) rotate(4deg); }
    75%  { transform: scale(.97) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hg-countdown-pop {
    0%   { transform: scale(1.55); opacity: 0; filter: blur(6px); }
    45%  { transform: scale(.95); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes hg-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.hg-pop { animation: hg-countdown-pop 420ms cubic-bezier(.2, 1.5, .4, 1); }

/* ---- ຜູ້ໃຊ້ທີ່ເປີດ reduce motion: ຕັດ animation ອອກ ຜົນຍັງສະແດງຄົບ ---- */
@media (prefers-reduced-motion: reduce) {
    .hg-slot[data-phase="tumbling"] .hg-lid,
    .hg-box.is-shaking,
    .hg-pop,
    .hgp-dots i { animation: none !important; }

    .hg-face.is-revealed { animation: hg-face-reveal 160ms linear both !important; }
}

/* ---- ປ້າຍ "ທາຍຖືກ" ເຕັມຈໍ ---- */
.hb-win-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 20, 40, .58); display: flex; align-items: center; justify-content: center; padding: 20px; }
.hb-win-card { background: #fff; border-radius: 22px; max-width: 380px; width: 100%; padding: 28px 24px; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.hb-win-card .ico { font-size: 2.8rem; color: var(--gold, #f5a623); }
.hb-win-card h4 { font-weight: 900; color: #157a3c; margin: .4rem 0; }

/* ==========================================================================
 *  ປຸ່ມໃຫຍ່ "ເຂົ້າໜ້າແທງເກມ" ຢູ່ໜ້າຫຼັກ
 *
 *  ແທນທີ່ເມນູ "ເກມ" ໃນ navbar (ຖອດອອກແລ້ວ ເພາະມີເກມດຽວ) — ເປັນປຸ່ມແຖບເຕັມ
 *  ຄວາມກວ້າງ ພື້ນຫຼັງເປັນລວດລາຍ SVG ຈາງໆ ຮູບໝາກເຕົ໋າ + ໜ້າສັດ ບອກສາຍຕາທັນທີ
 *  ວ່າກົດແລ້ວໄປ "ໜ້າຊື້/ແທງ" ຂອງເກມ
 * ========================================================================== */
.gg-gamecta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border-radius: 24px;
    padding: 26px 24px;
    background: linear-gradient(120deg, #b3271a 0%, #d11a2a 45%, #f5a623 130%);
    box-shadow: 0 14px 34px rgba(209, 26, 42, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.gg-gamecta:hover,
.gg-gamecta:focus { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 44px rgba(209, 26, 42, .34); }
.gg-gamecta:active { transform: translateY(-1px) scale(.995); }

/* ລວດລາຍພື້ນຫຼັງ — ໝາກເຕົ໋າ 6 ໜ້າ, ປູ, ປາ, ນ້ຳເຕົ້າ ແບບເສັ້ນຈາງ */
.gg-gamecta .gc-art {
    position: absolute;
    inset: 0;
    opacity: .16;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: right -30px center, left -40px center;
    background-size: auto 240%, auto 190%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'%3E%3Crect x='34' y='34' width='132' height='132' rx='30'/%3E%3Ccircle cx='72' cy='72' r='11'/%3E%3Ccircle cx='128' cy='72' r='11'/%3E%3Ccircle cx='72' cy='128' r='11'/%3E%3Ccircle cx='128' cy='128' r='11'/%3E%3Ccircle cx='100' cy='100' r='11'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 100c22-26 58-26 80 0-22 26-58 26-80 0z'/%3E%3Ccircle cx='66' cy='100' r='5'/%3E%3Cpath d='M120 100l30-20v40l-30-20z'/%3E%3Cpath d='M96 46c0 10-8 14-8 24s10 14 22 14 22-6 22-16-10-14-14-22'/%3E%3C/g%3E%3C/svg%3E");
}

.gg-gamecta .gc-body { position: relative; z-index: 1; min-width: 0; }

.gg-gamecta .gc-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: .18rem .7rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .45rem;
}

.gg-gamecta .gc-title { display: block; font-size: 1.45rem; font-weight: 900; line-height: 1.15; }
.gg-gamecta .gc-sub { display: block; font-size: .84rem; opacity: .9; margin-top: .2rem; }

.gg-gamecta .gc-cta {
    position: relative;
    z-index: 1;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: var(--red, #d11a2a);
    font-weight: 800;
    font-size: .95rem;
    border-radius: 999px;
    padding: .7rem 1.25rem;
    box-shadow: 0 6px 18px rgba(20, 20, 40, .18);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .gg-gamecta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 18px; gap: 14px; }
    .gg-gamecta .gc-cta { margin-left: 0; justify-content: center; }
    .gg-gamecta .gc-title { font-size: 1.25rem; }
}

/* ================================================================
   ການ໌ດ "ຜົນຮອບເກມ" ໃນລາຍການ (ໜ້າຫຼັກ / ໜ້າຜົນລາງວັນ)
   ================================================================
   ບັນຫາເດີມ: ຮູບໜ້າສັດຂະໜາດຄົງທີ່ 46px 3 ໜ່ວຍ ວາງໃນການ໌ດ col-6 ເທິງມືຖື
   ຈຶ່ງເບຍດຕິດກັນຈົນເບິ່ງບໍ່ອອກ ແລະ ແຖວຫົວການ໌ດ (ຮອບທີ + ວັນທີ) ຕົກບັນທັດ

   ທາງແກ້: ຮູບປັບຂະໜາດຕາມຄວາມກວ້າງຈໍດ້ວຍ clamp() ມີພື້ນຫຼັງ+ຂອບມົນເປັນ "ກະເບື້ອງ"
   ຂອງຕົນເອງ ຈຶ່ງແຍກອອກຈາກກັນຊັດເຈນ ບໍ່ວ່າຈະຢູ່ໃນການ໌ດກວ້າງເທົ່າໃດ
   ຈຳກັດ scope ໄວ້ໃນ .hgr-card ເທົ່ານັ້ນ — ບໍ່ກະທົບ .hgr-faces ຂອງເວທີເກມ */
.hgr-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .7rem;
}

/* ແຖວວັນທີ-ເວລາ (ໃຊ້ເມື່ອສົ່ງ :show-round="false") — ແຖວດຽວສະເໝີ ບໍ່ຕົກບັນທັດ */
.hgr-card .hgr-when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: .78rem;
    color: var(--muted, #8a8f9c);
    background: var(--surface-2, #f6f7fb);
    border-radius: 999px;
    padding: .28rem .6rem;
}

.hgr-card .hgr-when b { color: var(--txt, #1f2533); font-variant-numeric: tabular-nums; }
.hgr-card .hgr-when .bi { font-size: .82rem; }

.hgr-card .hgr-faces {
    gap: .5rem;
    flex-wrap: nowrap;          /* 1-3 ໜ່ວຍ ຢູ່ແຖວດຽວສະເໝີ */
    min-height: 0;
}

.hgr-card .hgr-faces img,
.hgr-card .hgr-faces .none {
    width: clamp(38px, 13vw, 58px);
    height: clamp(38px, 13vw, 58px);
    padding: 4px;
    border-radius: 14px;
    background: var(--surface-2, #f6f7fb);
    box-shadow: inset 0 0 0 1px rgba(31, 37, 51, .05);
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .hgr-card .hgr-faces img,
    .hgr-card .hgr-faces .none { width: 58px; height: 58px; }
}

/* ຊື່ໜ້າສັດໃຕ້ຮູບ — ຄັ່ນດ້ວຍຈຸດ ບໍ່ໃຫ້ຕິດກັນເປັນກ້ອນດຽວ */
.hgr-card .hgr-names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .2rem .45rem;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--muted, #8a8f9c);
}

.hgr-card .hgr-names span + span::before {
    content: "·";
    margin-right: .45rem;
    color: #c9ccd6;
}

/* ================================================================
   ມືຖື: ຊ່ອງໃສ່ຈຳນວນເງິນຍ້າຍລົງມາຢູ່ແຜງດຽວກັນກັບປຸ່ມເລືອກໜ້າສັດ
   ================================================================
   ຢືມໂຄງ ແລະ ພຶດຕິກຳມາຈາກແປ້ນຂອງໜ້າຊື້ຫວຍ (.bm-toprow / .bm-pad.open)

   ເດີມຊ່ອງໃສ່ເງິນເປັນການ໌ດແຍກຢູ່ເທິງສຸດຂອງໜ້າ — ຕ້ອງເລື່ອນຈໍຂຶ້ນໄປແກ້ທຸກຄັ້ງ
   ດຽວນີ້ຢູ່ແຖວດຽວກັນກັບປຸ່ມ "ລົງບິນ" ໃນແຜງຕິດຈໍລຸ່ມ ນິ້ວໂປ້ເອື້ອມເຖິງທັງໝົດ */

.hb-pad .hb-sum { gap: 8px; font-size: .88rem; }
.hb-pad .hb-sum .mid { font-size: .78rem; color: #8a8f9c; white-space: nowrap; }
.hb-pad .hb-sum .mid.hot { color: var(--red, #d11a2a); }

.hb-toprow { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 8px; }
.hb-lbl { font-size: .56rem; color: #8a8f9c; text-align: center; line-height: 1.3;
    margin-bottom: 2px; white-space: nowrap; }

.hb-amtbox { flex: 1; min-width: 0; }
.hb-disp {
    width: 100%;
    height: 48px;
    border: 1.5px solid #e2e2e8;
    border-radius: 12px;
    background: #fff;
    color: #222;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hb-disp:focus { outline: 0; border-color: var(--red, #d11a2a); box-shadow: 0 0 0 2px rgba(209, 26, 42, .12); }
.hb-disp:disabled { background: #f4f4f7; color: #9aa0b8; }

.hb-cur { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 9px;
    border-radius: 12px; background: #f4f4f7; color: #8a8f9c; font-size: .72rem; font-weight: 800; flex: 0 0 auto; }

.hb-add { height: 48px; min-width: 62px; flex: 0 0 auto; padding: 0 9px;
    background: #1a9e4b; color: #fff; border: 0; border-radius: 12px;
    font-weight: 800; font-size: .6rem; line-height: 1.15;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.hb-add i { font-size: 1.02rem; }
.hb-add:disabled { opacity: .45; }

/* ປຸ່ມຈຳນວນເງິນດ່ວນ — ຢຸບໄປພ້ອມກັບແຜງ */
.hb-quick { display: flex; gap: 6px; margin-bottom: 8px; }
.hb-quick button { flex: 1; height: 38px; border: 1px solid #ececf0; background: #fff;
    border-radius: 11px; font-weight: 800; font-size: .82rem; color: #3a3f52; }
.hb-quick button:active { background: #f3f3f5; }

/* ---------------- ສະຖານະ "ຢຸບ" — ຍັງບໍ່ໄດ້ແຕະ ແລະ ຍັງບໍ່ໄດ້ເລືອກໜ້າສັດ ----------------
   ຫຍໍ້ຄວາມສູງຂອງແຜງລົງ ເພື່ອໃຫ້ເຫັນລາຍການໃນບິນຫຼາຍແຖວຂຶ້ນ */
.hb-pad:not(.open) .hb-quick { display: none; }
.hb-pad:not(.open) .hb-padinfo { display: none; }
.hb-pad:not(.open) .hb-sum { padding: 6px 12px; font-size: .84rem; margin-bottom: 6px; }
.hb-pad:not(.open) .hb-padfaces { grid-template-columns: repeat(6, 1fr); gap: 5px; }
.hb-pad:not(.open) .hb-padfaces .hb-face { padding: .3rem .1rem; border-radius: 11px; }
.hb-pad:not(.open) .hb-padfaces .hb-face img { width: 30px; height: 30px; }
.hb-pad:not(.open) .hb-padfaces .hb-face .nm { display: none; }
.hb-pad:not(.open) .hb-pay { height: 46px; font-size: 1rem; }

.hb-padfaces .hb-face img { transition: width .16s ease, height .16s ease; }

/* ແຜງເປີດແລ້ວສູງກວ່າເກົ່າ (ມີແຖວໃສ່ເງິນ + ປຸ່ມດ່ວນ) — ເພີ່ມທີ່ຫວ່າງລຸ່ມບິນ
   ບໍ່ໃຫ້ລາຍການສຸດທ້າຍໃນບິນຖືກແຜງບັງ */
.hb-mobile { padding-bottom: 440px; }

/* ================================================================
   ຫົວຕາຕະລາງບິນ ຕ້ອງໃຊ້ "ຄວາມກວ້າງຄໍລຳ" ຊຸດດຽວກັນກັບແຖວລາຍການ
   ================================================================
   ບັນຫາເດີມ: ຫົວຕາຕະລາງໃຊ້ justify-content:space-between (ຄຳວ່າ "ຈຳນວນເງິນ"
   ຈຶ່ງໄປຢູ່ກາງ) ແຕ່ແຖວລາຍການດັນ .hb-step ໄປຊິດຂວາດ້ວຍ margin-left:auto
   ຕົວເລກຈຶ່ງບໍ່ຢູ່ໃຕ້ຫົວຂໍ້ຂອງມັນ

   ດຽວນີ້ທັງສອງແຖວແບ່ງເປັນ 3 ຄໍລຳຄືກັນ:
     [ໜ້າສັດ = flex:1] [ຈຳນວນເງິນ = 148px] [ປຸ່ມລຶບ = 26px]
     148px = 30(−) + 8 + 72(ຕົວເລກ) + 8 + 30(+) — ຄືກັນກັບ .hb-step ພໍດີ */

.hb-cart-bar { display: flex; justify-content: flex-end; padding: 4px 2px 0; }

.hb-cart-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
}
.hb-cart-head .hh-pick { flex: 1 1 auto; min-width: 0; }
.hb-cart-head .hh-amt { flex: 0 0 auto; width: 148px; text-align: center; }
.hb-cart-head .hh-del { flex: 0 0 auto; width: 26px; }

.hb-row .hb-pick { flex: 1 1 auto; min-width: 0; }
.hb-row .hb-step { flex: 0 0 auto; width: 148px; margin-left: 0; justify-content: flex-end; }
.hb-row .del { flex: 0 0 auto; width: 26px; padding: 0; display: grid; place-items: center; }

/* v65: ແບບຕັ້ງ (ໃຊ້ໃນຖັນແຄບຂອງໜ້າຫຼັກ) */
.gg-gamecta.is-stacked { flex-direction: column; align-items: stretch; justify-content: center; text-align: center; gap: 16px; }
.gg-gamecta.is-stacked .gc-cta { margin-left: 0; justify-content: center; }