/* Cổng cửa hàng (nhân viên): thiết kế cho điện thoại, nút lớn, ít chữ */
body:has(.tgg-portal) .tgg-bottom-nav { display: none; }
body:has(.tgg-portal) { padding-bottom: 24px; }
.tgg-portal { max-width: 760px; margin: 0 auto; padding: 8px 12px 40px; font-size: 15px; color: #26302a; }
.tgg-portal * { box-sizing: border-box; }
.tgg-portal a { color: #14532d; }
.tgg-portal .phead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; }
.tgg-portal .phead small { display: block; color: #6b7a70; font-size: 12.5px; }
.tgg-portal .ptabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 6px 0 12px; position: sticky; top: var(--tgg-header-h, 56px); z-index: 20; background: #fff8ee; padding: 6px 0; }
.tgg-portal .ptabs a { text-align: center; padding: 10px 4px; border-radius: 10px; background: #fff; border: 1px solid #eadfcb; text-decoration: none; font-weight: 600; font-size: 13.5px; }
.tgg-portal .ptabs a.on { background: #14532d; color: #fff; border-color: #14532d; }
.tgg-portal .ptitle { font-size: 17px; margin: 18px 0 8px; }
.tgg-portal .phint { color: #6b7a70; font-size: 13px; margin: 0 0 8px; }
.tgg-portal .pempty { background: #fff; border: 1px dashed #eadfcb; border-radius: 12px; padding: 16px; text-align: center; color: #6b7a70; }
.tgg-portal .pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tgg-portal .pstat { background: #fff; border: 1px solid #eadfcb; border-radius: 12px; padding: 10px; text-align: center; text-decoration: none; color: #26302a; }
.tgg-portal .pstat b { display: block; font-size: 24px; }
.tgg-portal .pstat span { font-size: 12.5px; color: #6b7a70; }
.tgg-portal .pstat.has { border-color: #e5391d; }
.tgg-portal .pstat.has b { color: #e5391d; }
.tgg-portal .ocard, .tgg-portal .pbox { background: #fff; border: 1px solid #eadfcb; border-radius: 14px; padding: 12px; margin: 0 0 10px; }
.tgg-portal .pbox h2, .tgg-portal .pbox h3 { margin: 0 0 8px; font-size: 16px; }
.tgg-portal .ohead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.tgg-portal .orow { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.tgg-portal .ometa { color: #4a574e; font-size: 13.5px; margin-top: 2px; word-break: break-word; }
.tgg-portal .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tgg-portal .oact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tgg-portal .tel { font-weight: 700; text-decoration: none; background: #e7f2e6; border-radius: 8px; padding: 2px 8px; }
.tgg-portal .chip { display: inline-block; border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: #eee; }
.tgg-portal .chip-ok { background: #e7f2e6; color: #14532d; }
.tgg-portal .chip-done { background: #14532d; color: #fff; }
.tgg-portal .chip-warn { background: #fff3cd; color: #7a5b00; }
.tgg-portal .chip-bad { background: #fde2dd; color: #b32d2e; }
.tgg-portal .chip-grp { background: #e8eefc; color: #1f3d8f; }
.tgg-portal .chip-light { background: #f0f0f0; color: #555; }
.tgg-portal .btn { display: inline-block; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid #14532d; background: #fff; color: #14532d; font-weight: 700; font-size: 14.5px; text-decoration: none; cursor: pointer; text-align: center; font-family: inherit; }
.tgg-portal .btn-primary { background: #14532d; color: #fff; }
.tgg-portal .btn-light { border-color: #eadfcb; color: #26302a; background: #fff; }
.tgg-portal .btn-warn { background: #f08a1c; border-color: #f08a1c; color: #fff; }
.tgg-portal .btn-danger { background: #e5391d; border-color: #e5391d; color: #fff; }
.tgg-portal form.inl { display: inline-block; margin: 0; }
.tgg-portal .pbox form { display: block; margin: 8px 0; }
.tgg-portal label { display: block; font-weight: 600; font-size: 13.5px; margin: 8px 0; }
.tgg-portal label.chk { font-weight: 400; }
.tgg-portal input[type=text], .tgg-portal input[type=search], .tgg-portal input[type=number], .tgg-portal input[type=datetime-local], .tgg-portal input[type=password], .tgg-portal select, .tgg-portal textarea { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #d9cdb4; border-radius: 10px; font: inherit; background: #fff; margin-top: 4px; }
.tgg-portal .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tgg-portal .psearch { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.tgg-portal .pdl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 10px 0; }
.tgg-portal .pdl dt { color: #6b7a70; font-size: 13px; }
.tgg-portal .pdl dd { margin: 0; word-break: break-word; }
.tgg-portal .ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.tgg-portal .ptable td { padding: 6px 4px; border-top: 1px solid #f0e8d6; }
.tgg-portal .ptable tr.tot td { font-weight: 700; }
.tgg-portal .pnotes { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.tgg-portal .pnotes li { padding: 6px 0; border-top: 1px solid #f0e8d6; }
.tgg-portal .pflash { border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; font-weight: 600; }
.tgg-portal .pflash-ok { background: #e7f2e6; color: #14532d; }
.tgg-portal .pflash-bad { background: #fde2dd; color: #b32d2e; }
.tgg-portal details summary { cursor: pointer; padding: 6px 0; }
.tgg-portal .login-username, .tgg-portal .login-password { margin: 8px 0; }
.tgg-portal .login-submit input { min-height: 46px; width: 100%; background: #14532d; color: #fff; border: 0; border-radius: 12px; font-weight: 700; }
@media (min-width: 700px) { .tgg-portal .psearch { grid-template-columns: 200px 1fr auto; } }
.tgg-portal .pick { font-weight: 600; font-size: 13px; margin: 0; background: #e8eefc; border-radius: 8px; padding: 4px 8px; }
.tgg-portal .pick input { width: auto; min-height: 0; display: inline; margin: 0 4px 0 0; }
.tgg-portal form.bulk { position: sticky; top: calc(var(--tgg-header-h, 56px) + 52px); z-index: 15; border-color: #14532d; }
.tgg-portal form.bulk select { margin: 6px 0; }
.tgg-push-box { margin: 8px 0; }

/* Kho */
.tgg-portal .ptabs a { font-size: 12.5px; padding: 10px 2px; }
.tgg-portal .psub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tgg-portal .psub a { padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid #eadfcb; text-decoration: none; font-weight: 600; font-size: 13.5px; color: #26302a; }
.tgg-portal .psub a.on { background: #14532d; color: #fff; border-color: #14532d; }
.tgg-portal .ptable { overflow-x: auto; }
.tgg-portal .ptbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tgg-portal .ptbl th, .tgg-portal .ptbl td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #f0e6d3; vertical-align: top; }
.tgg-portal .ptbl tr.low td { background: #fff3ef; }
.tgg-portal .irow { display: grid; grid-template-columns: 1fr 96px auto; gap: 6px 8px; align-items: center; margin: 0 0 8px; }
.tgg-portal .irow label { font-weight: 600; margin: 0; }
.tgg-portal .irow input[type=text] { grid-column: 1 / -1; }
.tgg-portal .irow .u { color: #6b7a70; font-size: 13px; }
.tgg-portal .irow input, .tgg-portal .irow select { min-height: 42px; }
/* ===== Máy tính / máy tính bảng: bố cục rộng, thẻ nhiều cột, bảng đầy đủ (điện thoại giữ nguyên ở trên) ===== */
.tgg-portal--narrow { max-width: 460px; margin-top: 24px; }
@media (min-width: 760px) {
	.tgg-portal:not(.tgg-portal--narrow) { max-width: 1280px; padding: 16px 28px 56px; font-size: 15.5px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px 18px; align-items: start; }
	.tgg-portal:not(.tgg-portal--narrow) > * { grid-column: 1 / -1; }
	.tgg-portal:not(.tgg-portal--narrow) > .ocard { grid-column: auto; margin: 0; height: 100%; }
	.tgg-portal.v-order > .pbox { grid-column: auto; margin: 0; }
	.tgg-portal.v-order > .pbox:first-of-type { grid-column: 1 / -1; }
	.tgg-portal .pbox, .tgg-portal .ocard { padding: 16px 18px; }
	.tgg-portal .phead { padding: 4px 0 8px; border-bottom: 1px solid #eadfcb; }
	.tgg-portal .phead b { font-size: 17px; }
	.tgg-portal .ptabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 0; }
	.tgg-portal .ptabs a { flex: 0 0 auto; min-width: 124px; padding: 11px 22px; font-size: 14.5px; transition: background .15s, border-color .15s; }
	.tgg-portal .ptabs a:not(.on):hover { background: #f1f7ef; border-color: #14532d; }
	.tgg-portal .ptitle { font-size: 20px; margin: 22px 0 4px; }
	.tgg-portal .pstats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
	.tgg-portal .pstat { padding: 16px; transition: box-shadow .15s, transform .15s; }
	.tgg-portal .pstat:hover { box-shadow: 0 4px 14px rgba(20, 83, 45, .14); transform: translateY(-1px); }
	.tgg-portal .pstat b { font-size: 30px; }
	.tgg-portal .pstat span { font-size: 13.5px; }
	.tgg-portal .ocard { display: flex; flex-direction: column; transition: box-shadow .15s; }
	.tgg-portal .ocard:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
	.tgg-portal .ocard .oact { margin-top: auto; padding-top: 12px; }
	.tgg-portal .btn { min-height: 40px; padding: 8px 16px; transition: background .15s, box-shadow .15s; }
	.tgg-portal .btn:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
	.tgg-portal .btn:focus-visible, .tgg-portal .ptabs a:focus-visible, .tgg-portal .psub a:focus-visible { outline: 3px solid #f0b429; outline-offset: 2px; }
	.tgg-portal input[type=text], .tgg-portal input[type=search], .tgg-portal input[type=number], .tgg-portal input[type=datetime-local], .tgg-portal input[type=password], .tgg-portal select, .tgg-portal textarea { min-height: 40px; }
	.tgg-portal .pbox form { max-width: 760px; }
	.tgg-portal.v-stock .pbox form, .tgg-portal.v-manage .pbox form { max-width: 980px; }
	.tgg-portal .psearch { grid-template-columns: 220px minmax(260px, 520px) auto; align-items: center; justify-content: start; }
	.tgg-portal form.bulk { top: calc(var(--tgg-header-h, 56px) + 62px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: none; }
	.tgg-portal form.bulk select { width: 260px; margin: 0; }
	.tgg-portal .ptbl { font-size: 15px; }
	.tgg-portal .ptbl th { font-size: 13px; color: #6b7a70; text-transform: uppercase; letter-spacing: .02em; border-bottom: 2px solid #eadfcb; }
	.tgg-portal .ptbl th, .tgg-portal .ptbl td { padding: 11px 12px; }
	.tgg-portal .ptbl tbody tr:hover td { background: #f8fbf6; }
	.tgg-portal .ptbl tr.low:hover td { background: #ffe9e3; }
	.tgg-portal .irow { grid-template-columns: minmax(180px, 1.1fr) 130px minmax(110px, auto) 1.6fr; gap: 8px 12px; }
	.tgg-portal .irow input[type=text] { grid-column: auto; }
	.tgg-portal .pdl { grid-template-columns: 150px 1fr; }
	.tgg-portal .pnotes { font-size: 14.5px; }
	.tgg-portal .two { gap: 12px; }
}
@media (min-width: 1100px) {
	.tgg-portal:not(.tgg-portal--narrow) { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
	.tgg-portal.v-order > .pbox:first-of-type { grid-column: auto; }
	.tgg-portal.v-manage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tgg-portal.v-manage > .ptitle, .tgg-portal.v-manage > .phead, .tgg-portal.v-manage > .ptabs, .tgg-portal.v-manage > .pflash { grid-column: 1 / -1; }
	.tgg-portal.v-manage > .pbox { grid-column: auto; margin: 0; }
	.tgg-portal.v-manage > .pbox:last-of-type { grid-column: 1 / -1; } /* Bảng "Hôm nay theo cửa hàng" rộng cả hàng */
	.tgg-portal.v-stock > .pbox { max-width: 1100px; }
}@media (min-width: 1100px) {
	/* Form nhập hàng: 2 cột nguyên liệu cho đỡ dài; phiếu kiểm kho (có ô lý do) giữ 1 cột */
	.tgg-portal.v-stock .pbox form:not(:has(.irow input[type=text])) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; max-width: 1000px; }
	.tgg-portal.v-stock .pbox form:not(:has(.irow input[type=text])) > :not(.irow) { grid-column: 1 / -1; }
	.tgg-portal.v-stock .pbox form:not(:has(.irow input[type=text])) .irow { grid-template-columns: minmax(120px, 1fr) 110px minmax(90px, auto); margin: 0; }
}
.tgg-portal .ptbl { min-width: 480px; }

.tgg-portal .subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.tgg-portal .subtabs .btn{padding:6px 12px;font-size:14px}


/* ---- Bán tại quầy (POS) ---- */
.tgg-portal .pos{display:grid;gap:14px;grid-template-columns:1fr}
.tgg-portal .pos-tools{display:grid;gap:8px;margin-bottom:10px}
.tgg-portal .pos-tools input[type=search]{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:16px}
.tgg-portal .pos-cats{display:flex;flex-wrap:wrap;gap:6px}
.tgg-portal .pos-cats .btn{padding:6px 12px;font-size:14px}
.tgg-portal .pos-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.tgg-portal .pos-item{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;padding:8px;border:1px solid #e3e3e3;border-radius:10px;background:#fff;cursor:pointer;font:inherit;position:relative}
.tgg-portal .pos-item:active{transform:scale(.98)}
.tgg-portal .pos-item img,.tgg-portal .pos-item .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#f2f2f2;display:block}
.tgg-portal .pos-item b{font-size:14px;line-height:1.25}
.tgg-portal .pos-item .pr{color:#c62828;font-weight:600;font-size:14px}
.tgg-portal .pos-item .stk{font-size:12px;color:#2e7d32}
.tgg-portal .pos-item .stk.low{color:#e65100}
.tgg-portal .pos-item.is-out{opacity:.5}
.tgg-portal .pos-cart{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:12px;display:grid;gap:10px;align-content:start}
.tgg-portal .pos-cart h3{margin:0}
.tgg-portal .pos-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tgg-portal .pos-lines li{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;border-bottom:1px dashed #eee;padding-bottom:6px}
.tgg-portal .pos-lines .nm small{display:block;color:#777}
.tgg-portal .pos-lines .qty{display:inline-flex;align-items:center;gap:6px}
.tgg-portal .pos-lines .qty button,.tgg-portal .pos-lines .rm{width:34px;height:34px;border:1px solid #ddd;border-radius:8px;background:#fafafa;font-size:18px;cursor:pointer}
.tgg-portal .pos-lines .rm{color:#c62828}
.tgg-portal .pos-lines .amt{font-weight:600;min-width:70px;text-align:right}
.tgg-portal .pos-total{display:flex;justify-content:space-between;font-size:20px}
.tgg-portal .pos-pay{display:flex;gap:16px}
.tgg-portal .pos-cash{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tgg-portal .pos-cash input,.tgg-portal .pos-cart input[type=text],.tgg-portal .pos-cart input[type=number],.tgg-portal .pos-cart select{padding:8px 10px;border:1px solid #ddd;border-radius:8px;font-size:15px;max-width:100%}
.tgg-portal .pos-mgr-body{display:grid;gap:8px;margin-top:8px}
.tgg-portal .pos-actions{display:flex;gap:8px}
.tgg-portal .pos-actions .btn-primary{flex:1;padding:14px;font-size:17px}
.tgg-portal .chk{display:flex;gap:6px;align-items:center;font-size:14px}
.pos-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#333;color:#fff;padding:10px 16px;border-radius:8px;z-index:9999;font-size:14px}
.tgg-portal .pos-receipt{max-width:340px;margin:10px auto;background:#fff;border:1px dashed #bbb;padding:14px;font-family:'Courier New',monospace;font-size:13px;line-height:1.4}
.tgg-portal .pos-receipt .rc-head,.tgg-portal .pos-receipt .rc-title,.tgg-portal .pos-receipt .rc-foot{text-align:center}
.tgg-portal .pos-receipt .rc-title{font-weight:700;margin:8px 0}
.tgg-portal .pos-receipt .rc-lines{width:100%;border-collapse:collapse;margin:8px 0}
.tgg-portal .pos-receipt .rc-lines th,.tgg-portal .pos-receipt .rc-lines td{padding:2px 0;text-align:left;vertical-align:top}
.tgg-portal .pos-receipt .rc-lines th:nth-child(n+2),.tgg-portal .pos-receipt .rc-lines td:nth-child(n+2){text-align:right}
.tgg-portal .pos-receipt .rc-row{display:flex;justify-content:space-between}
.tgg-portal .pos-receipt .rc-sum{font-weight:700;border-top:1px dashed #999;margin-top:4px;padding-top:4px}
@media (min-width:900px){.tgg-portal .pos{grid-template-columns:1fr 380px;align-items:start}.tgg-portal .pos-cart{position:sticky;top:12px}}
@media print{
 body *{visibility:hidden}
 .pos-receipt,.pos-receipt *,.pos-print,.pos-print *{visibility:visible}
 .pos-receipt{position:absolute;left:0;top:0;width:72mm;border:0;margin:0;padding:2mm}
 .pos-print{position:absolute;left:0;top:0;width:100%}
 .pos-noprint,.pos-print button{display:none!important}
 @page{margin:3mm}
}