:root {
    --sgk-red: var(--primary-color, #ef233c);
    --sgk-red-soft: #fff1f2;
    --sgk-green: #16a34a;
    --sgk-green-dark: #0f7a3a;
    --sgk-green-bg: #ecfdf3;
    --sgk-green-border: #bbf7d0;
    --sgk-amber: #b45309;
    --sgk-amber-bg: #fef3c7;
    --sgk-blue: #1d4ed8;
    --sgk-blue-bg: #dbeafe;
    --sgk-text: #111827;
    --sgk-muted: #6b7280;
    --sgk-border: #e5e7eb;
    --sgk-soft: #f9fafb;
    --sgk-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
}

/* ======================================================================
   Chống "nhảy" giao diện: ẩn phần cũ cho tới khi phần mới gắn xong.
   Nếu JS lỗi, sau 2,5 giây phần cũ tự hiện lại.
   ====================================================================== */
@keyframes sgk-reveal { to { visibility: visible; } }
body.woocommerce-account.logged-in .main-header .header-sub:not(.sgk-has-hd) .tx-header-account,
body.woocommerce-account .tp-recent-order .tp-table:not(.sgk-done) {
    visibility: hidden; animation: sgk-reveal 0s 2.5s forwards;
}

/* ======================================================================
   Lưới trang tài khoản (CSS thuần – có ngay từ lần hiển thị đầu tiên)
     menu | lời chào ............ | chi tiết
     menu | thông tin | địa chỉ   | chi tiết
     đơn hàng gần đây ........... | chi tiết
   ====================================================================== */
@media (min-width: 1280px) {
    body.woocommerce-account .row.row-main,
    body.woocommerce-account .main-header > .container { max-width: 1600px; }

    body.woocommerce-account .woocommerce:has(> .tp-account__nav) {
        display: grid !important; gap: 24px; align-items: start;
        grid-template-columns: 260px repeat(2, minmax(0, 1fr));
    }
    body.woocommerce-account .woocommerce:has(> .tp-account__nav):has(.sgk-drawer.is-open.is-docked),
    body.woocommerce-account .woocommerce.has-panel {
        grid-template-columns: 260px repeat(2, minmax(0, 1fr)) 420px;
    }
    body.woocommerce-account .woocommerce:has(> .tp-account__nav) > .tp-account__nav {
        grid-column: 1; grid-row: 1 / span 2; width: auto !important; max-width: none !important; margin: 0 !important;
    }
    body.woocommerce-account .woocommerce:has(> .tp-account__nav) > .woocommerce-MyAccount-content { display: contents; }
    body.woocommerce-account .woocommerce:has(> .tp-account__nav) > .woocommerce-MyAccount-content > * {
        grid-column: 2 / 4; min-width: 0; margin: 0 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty { display: none; }

    /* Trang Tổng quan */
    body.woocommerce-dashboard .woocommerce-MyAccount-content > .tp-welcome { grid-row: 1; }
    body.woocommerce-dashboard .woocommerce-MyAccount-content > .tp-grid { display: contents; }
    body.woocommerce-dashboard .tp-grid > .tp-card { min-width: 0; margin: 0 !important; }
    body.woocommerce-dashboard .tp-grid > .tp-card:nth-child(1) { grid-column: 2; grid-row: 2; }
    body.woocommerce-dashboard .tp-grid > .tp-card:nth-child(2) { grid-column: 3; grid-row: 2; }
    /* "Thông tin cá nhân" và "Địa chỉ mặc định" luôn cao bằng nhau */
    body.woocommerce-dashboard .tp-grid > .tp-card:nth-child(1),
    body.woocommerce-dashboard .tp-grid > .tp-card:nth-child(2) { align-self: stretch; }
    body.woocommerce-dashboard .tp-grid > .tp-recent-order { grid-column: 1 / 4; grid-row: 3; }

    /* Khung chi tiết = thẻ trắng cùng lưới */
    body.woocommerce-account .woocommerce-MyAccount-content > .sgk-drawer.is-docked { grid-column: 4; grid-row: 1 / span 3; }

    /* Trang "Đơn hàng của tôi" khi đang mở chi tiết: nhường chỗ cho bảng đơn */
    body.woocommerce-account .woocommerce:has(> .tp-account__nav):has(.tp-orders):has(.sgk-drawer.is-open.is-docked) {
        grid-template-columns: 220px repeat(2, minmax(0, 1fr)) 380px;
    }
    .woocommerce:has(.tp-orders):has(.sgk-drawer.is-open.is-docked) .tp-orders__row {
        grid-template-columns: 64px 84px minmax(0, 1fr) 96px 104px 122px 100px; gap: 12px; padding-left: 16px; padding-right: 16px;
    }
    .woocommerce:has(.tp-orders):has(.sgk-drawer.is-open.is-docked) .tp-orders__row--head > div { white-space: nowrap; letter-spacing: .2px; }
    .woocommerce:has(.tp-orders):has(.sgk-drawer.is-open.is-docked) .tp-orders__product-name {
        white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35;
    }
    .woocommerce:has(.tp-orders):has(.sgk-drawer.is-open.is-docked) .tp-orders__btn { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}
@media (max-width: 1279px) {
    .sgk-drawer.sgk-ssr { display: none; }
}

.sgk-drawer.is-docked {
    position: sticky; top: calc(var(--sgk-top, 96px) + 16px) !important; right: auto; bottom: auto; left: auto;
    width: auto; max-width: none; height: auto; max-height: calc(100vh - var(--sgk-top, 96px) - 32px);
    transform: none; transition: none; z-index: 1;
    border: 1px solid var(--sgk-border); border-radius: 12px; overflow: hidden; box-shadow: var(--sgk-shadow);
}
.sgk-drawer.is-docked:not(.is-open) { display: none; }
.sgk-drawer.is-docked .sgk-drawer__body { min-height: 0; }

/* ======================================================================
   Bảng "Đơn hàng gần đây"
   ====================================================================== */
.tp-recent-order .tp-table th, .tp-recent-order .tp-table td { white-space: nowrap; vertical-align: middle; }
.tp-recent-order .tp-table td.sgk-td-prod { white-space: normal; min-width: 220px; }
.tp-orders__row.sgk-row-active { background: #fff5f6; }
/* Dòng đang xem / rê chuột: nền bo góc, có khoảng thở hai bên, vạch đỏ bên trái */
@media (min-width: 768px) {
    .tp-recent-order .tp-table-wrap { margin-left: -14px; margin-right: -14px; }
    .tp-recent-order .tp-table { border-collapse: separate; border-spacing: 0; }
    .tp-recent-order .tp-table tr > :first-child { padding-left: 14px !important; }
    .tp-recent-order .tp-table tr > :last-child { padding-right: 14px !important; }
    .tp-recent-order .tp-table tbody td { transition: background .15s; }
    .tp-recent-order .tp-table tbody tr:hover > td { background: var(--sgk-soft); }
    .tp-recent-order .tp-table tbody tr.sgk-row-active > td { background: #fff5f6; border-bottom-color: transparent; }
    .tp-recent-order .tp-table tbody tr:hover > td:first-child,
    .tp-recent-order .tp-table tbody tr.sgk-row-active > td:first-child { border-radius: 10px 0 0 10px; }
    .tp-recent-order .tp-table tbody tr:hover > td:last-child,
    .tp-recent-order .tp-table tbody tr.sgk-row-active > td:last-child { border-radius: 0 10px 10px 0; }
    .tp-recent-order .tp-table tbody tr.sgk-row-active > td:first-child { box-shadow: inset 3px 0 0 var(--sgk-red); }
}
.tp-recent-order .sgk-th--action, .tp-recent-order .sgk-td--action { text-align: center; }

.tp-recent-order .tp-badge, .tp-orders__status {
    display: inline-block; padding: 6px 14px !important; border-radius: 999px !important; font-size: 13px !important;
    font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.tp-badge--processing, .tp-orders__status--processing { background: #ffedd5 !important; color: #c2410c !important; }
.tp-badge--dang-giao, .tp-orders__status--dang-giao, .tp-badge--shipping, .tp-orders__status--shipping { background: #dbeafe !important; color: #1d4ed8 !important; }
.tp-badge--completed, .tp-orders__status--completed { background: #dcfce7 !important; color: #15803d !important; }
.tp-badge--on-hold, .tp-orders__status--on-hold, .tp-badge--pending, .tp-orders__status--pending { background: #f3f4f6 !important; color: #4b5563 !important; }
.tp-badge--cancelled, .tp-orders__status--cancelled, .tp-badge--failed, .tp-orders__status--failed, .tp-badge--refunded, .tp-orders__status--refunded { background: #fee2e2 !important; color: #b91c1c !important; }

.sgk-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sgk-prod img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sgk-border); flex: none; background: #fff; }
.sgk-prod__name { color: var(--sgk-text); font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sgk-prod__meta { display: block; color: var(--sgk-muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cột Vận chuyển */
.sgk-ship { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.sgk-ship__brand { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 12.5px; color: var(--sgk-green-dark); letter-spacing: .4px; }
.sgk-ship__mark { width: 20px; height: 20px; border-radius: 6px; background: var(--sgk-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sgk-ship__code { font-size: 12.5px; color: var(--sgk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sgk-ship__code.is-pending { font-style: italic; }
.sgk-ship--none { color: #9ca3af; font-size: 13px; }

.sgk-btn {
    display: inline-block; padding: 7px 16px; border: 1px solid var(--sgk-red); border-radius: 8px;
    color: var(--sgk-red) !important; background: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap;
    text-decoration: none !important; transition: background .15s, color .15s;
}
.sgk-btn:hover { background: var(--sgk-red); color: #fff !important; }
.tp-orders__btn[data-sgk-open] { cursor: pointer; }

/* ======================================================================
   Khung chi tiết (drawer trên màn hình nhỏ)
   ====================================================================== */
html.sgk-lock, html.sgk-lock body { overflow: hidden; }
.sgk-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 99998; }
.sgk-overlay.is-open { opacity: 1; visibility: visible; }
.sgk-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; background: #fff; z-index: 99999;
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .12); color: var(--sgk-text); font-size: 14px;
}
.sgk-drawer.is-open { transform: none; }
.admin-bar .sgk-drawer:not(.is-docked) { top: 32px; }
@media (max-width: 782px) { .admin-bar .sgk-drawer:not(.is-docked) { top: 46px; } }
.sgk-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 6px; }
.sgk-drawer__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--sgk-text); }
.sgk-drawer__close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; padding: 0; margin: 0; min-height: 0; color: var(--sgk-text); cursor: pointer; }
.sgk-drawer__close:hover { background: #f3f4f6; color: var(--sgk-red); }
.sgk-tabs { display: flex; border-bottom: 1px solid var(--sgk-border); padding: 0 12px; }
.sgk-tabs button {
    flex: 1 1 auto; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; padding: 12px 4px;
    font-size: 14px; font-weight: 400; color: #4b5563; text-transform: none; letter-spacing: 0; cursor: pointer; min-height: 0; line-height: 1.3;
}
.sgk-tabs button:hover { color: var(--sgk-red); }
.sgk-tabs button.is-active { color: var(--sgk-red); border-bottom-color: var(--sgk-red); font-weight: 600; }
.sgk-drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.sgk-loading { display: flex; align-items: center; gap: 10px; color: var(--sgk-muted); padding: 24px 0; }
.sgk-loading span, .sgk-sg__loading span { width: 18px; height: 18px; border: 2px solid var(--sgk-border); border-top-color: var(--sgk-red); border-radius: 50%; animation: sgk-spin .7s linear infinite; flex: none; }
@keyframes sgk-spin { to { transform: rotate(360deg); } }

/* ======================================================================
   Nội dung panel
   ====================================================================== */
.sgk-panel p { margin: 0; }
.sgk-ico { flex: none; }
.sgk-muted { color: var(--sgk-muted); font-size: 13px; }

.sgk-carrier { border: 1px solid var(--sgk-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: linear-gradient(180deg, #f6fdf9 0, #fff 60%); }
.sgk-carrier__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sgk-logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.sgk-logo__mark { width: 40px; height: 40px; border-radius: 11px; background: var(--sgk-green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(22, 163, 74, .3); }
.sgk-logo__mark .sgk-ico { width: 22px; height: 22px; }
.sgk-logo__text { display: flex; flex-direction: column; font-size: 24px; font-weight: 800; letter-spacing: .6px; color: var(--sgk-green-dark); }
.sgk-logo__text small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--sgk-muted); margin-top: 3px; }
.sgk-carrier__line { font-size: 14px; color: #374151; display: flex; align-items: center; gap: 6px; margin-top: 4px !important; }
.sgk-carrier__line strong { color: var(--sgk-text); font-variant-numeric: tabular-nums; }
.sgk-copy { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 6px; padding: 0; margin: 0; min-height: 0; color: var(--sgk-muted); cursor: pointer; }
.sgk-copy .sgk-ico { width: 15px; height: 15px; }
.sgk-copy:hover { background: #f3f4f6; color: var(--sgk-text); }
.sgk-copy.is-copied { color: var(--sgk-green); }

.sgk-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.sgk-pill--success { background: var(--sgk-green); color: #fff; }
.sgk-pill--info { background: var(--sgk-blue-bg); color: var(--sgk-blue); }
.sgk-pill--warning { background: var(--sgk-amber-bg); color: var(--sgk-amber); }
.sgk-pill--danger { background: #fee2e2; color: #b91c1c; }
.sgk-pill--muted { background: #f3f4f6; color: #4b5563; }

.sgk-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
.sgk-alert--warning { background: var(--sgk-amber-bg); color: var(--sgk-amber); }
.sgk-alert--danger { background: #fee2e2; color: #b91c1c; }

/* Timeline */
.sgk-timeline { list-style: none; margin: 0 0 16px; padding: 0 0 0 2px; }
.sgk-step { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 0 12px; padding-bottom: 20px; margin: 0; }
.sgk-step:last-child { padding-bottom: 0; }
.sgk-step::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--sgk-border); }
.sgk-step:last-child::before { display: none; }
.sgk-step.is-done::before { background: var(--sgk-green); }
.sgk-step__dot {
    position: relative; z-index: 1; width: 22px; height: 22px; margin: 2px 3px 0; border-radius: 50%;
    border: 2px solid #d1d5db; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff;
}
.sgk-step__dot .sgk-ico { width: 12px; height: 12px; stroke-width: 3.2; }
.sgk-step.is-done .sgk-step__dot { border-color: var(--sgk-green); background: var(--sgk-green); color: #fff; }
.sgk-step.is-current .sgk-step__dot { width: 28px; height: 28px; margin: -1px 0 0; border: 0; background: var(--sgk-green); color: #fff; box-shadow: 0 0 0 5px var(--sgk-green-bg); }
.sgk-step.is-current .sgk-step__dot .sgk-ico { width: 15px; height: 15px; stroke-width: 2.2; color: #fff; }
.sgk-step__title { font-weight: 600; font-size: 14px; color: var(--sgk-text); line-height: 1.4; }
.sgk-step.is-current .sgk-step__title { color: var(--sgk-green-dark); }
.sgk-step.is-todo .sgk-step__title { font-weight: 400; color: #6b7280; }
.sgk-step__desc { font-size: 12.5px; color: var(--sgk-muted); margin-top: 2px; line-height: 1.4; }
.sgk-step__time { font-size: 12.5px; color: var(--sgk-muted); white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }

.sgk-eta { display: flex; gap: 12px; align-items: flex-start; background: var(--sgk-green-bg); border: 1px solid var(--sgk-green-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; color: var(--sgk-green); }
.sgk-eta > .sgk-ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; }
.sgk-eta strong { display: block; color: #15803d; font-size: 14px; }
.sgk-eta span { display: block; color: #4b5563; font-size: 12.5px; margin-top: 2px; }
.sgk-eta--info { background: #eff6ff; border-color: #bfdbfe; color: var(--sgk-blue); }
.sgk-eta--info strong { color: var(--sgk-blue); }

.sgk-box { border: 1px solid var(--sgk-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.sgk-box__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--sgk-text); }
.sgk-box__title .sgk-ico { width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--sgk-red-soft); color: var(--sgk-red); }
.sgk-dl { display: grid; grid-template-columns: 128px 1fr; gap: 7px 10px; margin: 0; }
.sgk-dl dt, .sgk-dl dd { text-transform: none; letter-spacing: 0; font-size: 13.5px; line-height: 1.5; padding: 0; }
.sgk-dl dt { color: var(--sgk-muted); font-weight: 400; margin: 0; }
.sgk-dl dd { color: var(--sgk-text); margin: 0; word-break: break-word; }

.sgk-btn-outline {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; margin: 4px 0 8px;
    border: 1px solid var(--sgk-red); border-radius: 8px; background: #fff; color: var(--sgk-red) !important;
    font-size: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0;
    transition: background .15s;
}
.sgk-btn-outline:hover { background: var(--sgk-red-soft); }
.sgk-updated { font-size: 12px; color: #9ca3af; font-style: italic; text-align: center; }

.sgk-empty { text-align: center; padding: 32px 12px; color: var(--sgk-muted); }
.sgk-empty .sgk-ico { width: 40px; height: 40px; color: #d1d5db; margin-bottom: 8px; }
.sgk-empty__title { font-weight: 600; color: var(--sgk-text); font-size: 15px; margin-bottom: 6px !important; }

.sgk-items { list-style: none; margin: 0; padding: 0; }
.sgk-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sgk-border); align-items: start; margin: 0; }
.sgk-item__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sgk-border); display: block; }
.sgk-item__name { color: var(--sgk-text) !important; font-weight: 600; font-size: 14px; line-height: 1.4; text-decoration: none; }
.sgk-item__meta, .sgk-item__qty { color: var(--sgk-muted); font-size: 12.5px; margin-top: 2px; }
.sgk-item__price { font-weight: 600; white-space: nowrap; }
.sgk-total { display: flex; justify-content: space-between; padding: 14px 0 0; font-size: 15px; }
.sgk-total strong { color: var(--sgk-red); }

.sgk-card { border: 1px solid var(--sgk-border); border-radius: 12px; padding: 20px; margin: 0 0 24px; background: #fff; max-width: 560px; }
.sgk-card__title { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.sgk-lookup { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sgk-lookup input { flex: 1 1 200px; margin: 0; height: 42px; border-radius: 8px; }
.sgk-lookup button { margin: 0; height: 42px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--sgk-red); color: #fff; }
.sgk-lookup__err { color: #b91c1c; margin-bottom: 16px; }

/* ======================================================================
   Header: tìm kiếm · giỏ hàng · thông báo · tài khoản
   ====================================================================== */
.main-header .header-sub.sgk-has-hd { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.main-header .header-sub.sgk-has-hd > .tx-header-account { display: none; }
.sgk-hd { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-end; }
.sgk-hd__search { position: relative; flex: 0 1 380px; margin: 0 14px 0 0; }
.sgk-hd__search input[type=search] {
    width: 100%; height: 42px; margin: 0; padding: 0 44px 0 16px; border: 1px solid var(--sgk-border); border-radius: 10px;
    background: var(--sgk-soft); font-size: 14px; box-shadow: none; color: var(--sgk-text); transition: border-color .15s, background .15s, box-shadow .15s;
}
.sgk-hd__search input[type=search]:focus { border-color: var(--sgk-red); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(239, 35, 60, .12); }
.sgk-hd__search > button { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: #4b5563; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sgk-hd__search > button:hover { background: var(--sgk-red); color: #fff; }
.sgk-hd__search > button svg { width: 18px; height: 18px; }

.sgk-hd__icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-height: 0; margin: 0; padding: 0;
    border: 1px solid transparent; border-radius: 12px; background: var(--sgk-soft); color: #374151 !important; cursor: pointer; transition: background .15s, color .15s;
}
.sgk-hd__icon svg { width: 21px; height: 21px; }
.sgk-hd__icon:hover, .sgk-hd__icon[aria-expanded="true"] { background: var(--sgk-red-soft); color: var(--sgk-red) !important; }
.sgk-cart-count, .sgk-hd__dot {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--sgk-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid #fff; box-sizing: content-box;
}
.sgk-hd__drop { position: relative; }
.sgk-hd__user { margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--sgk-border); }
.sgk-hd__userbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 0; margin: 0; padding: 4px 6px 4px 4px; border: 0; border-radius: 999px; background: none; color: var(--sgk-text); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; }
.sgk-hd__userbtn:hover { background: var(--sgk-soft); }
.sgk-hd__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sgk-red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--sgk-red-soft); }
.sgk-hd__avatar svg { width: 19px; height: 19px; }
.sgk-hd__name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgk-hd__userbtn > svg:last-child { color: var(--sgk-muted); transition: transform .15s; }
.sgk-hd__userbtn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }

.sgk-hd__menu {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: #fff; border: 1px solid var(--sgk-border); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 6px; z-index: 1000;
}
.sgk-hd__menu[hidden], .sgk-sg[hidden], .sgk-sg__default[hidden], .sgk-sg__results[hidden] { display: none !important; }
.sgk-hd__menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--sgk-text) !important; font-size: 14px; text-decoration: none; }
.sgk-hd__menu a:hover { background: var(--sgk-soft); }
.sgk-hd__menu a.is-admin { color: #1d4ed8 !important; border-top: 1px solid var(--sgk-border); border-radius: 0; margin-top: 4px; font-weight: 600; }
.sgk-hd__menu a.is-logout { color: var(--sgk-red) !important; border-top: 1px solid var(--sgk-border); border-radius: 0 0 8px 8px; margin-top: 4px; }
.sgk-hd__menu--notif { width: 340px; max-height: 420px; overflow-y: auto; }
.sgk-hd__menu-title { font-weight: 700; padding: 8px 12px; font-size: 14px; }
.sgk-hd__empty { padding: 8px 12px 12px; color: var(--sgk-muted); font-size: 13px; margin: 0; }
.sgk-hd__nitem { display: flex !important; gap: 10px; line-height: 1.45; }
.sgk-hd__nitem time { display: block; color: var(--sgk-muted); font-size: 12px; }
.sgk-hd__ndot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.sgk-hd__nitem.is-new .sgk-hd__ndot { background: var(--sgk-red); }

/* Hộp gợi ý tìm kiếm */
.sgk-sg {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); min-width: 380px; background: #fff; border: 1px solid var(--sgk-border); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14); padding: 12px; z-index: 1001; max-height: 70vh; overflow-y: auto;
}
.sgk-sg__title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sgk-muted); margin: 4px 4px 10px; }
.sgk-sg__title svg { width: 15px; height: 15px; color: var(--sgk-red); }
.sgk-sg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 4px 16px; }
.sgk-sg__chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--sgk-border); border-radius: 999px; font-size: 13px; color: #374151 !important; background: #fff; text-decoration: none; transition: all .15s; }
.sgk-sg__chip:hover, .sgk-sg__chip.is-hover { border-color: var(--sgk-red); color: var(--sgk-red) !important; background: var(--sgk-red-soft); }
.sgk-sg__list { display: flex; flex-direction: column; }
.sgk-sg__item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; color: var(--sgk-text) !important; text-decoration: none; }
.sgk-sg__item:hover, .sgk-sg__item.is-hover { background: var(--sgk-soft); }
.sgk-sg__item img, .sgk-sg__noimg { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sgk-border); background: var(--sgk-soft); display: block; }
.sgk-sg__name { font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sgk-sg__name mark { background: none; color: var(--sgk-red); font-weight: 600; padding: 0; }
.sgk-sg__price { font-size: 13px; font-weight: 700; color: var(--sgk-red); white-space: nowrap; }
.sgk-sg__all { display: block; margin: 8px 0 0; padding: 10px; border-top: 1px solid var(--sgk-border); text-align: center; font-size: 13.5px; font-weight: 600; color: var(--sgk-red) !important; text-decoration: none; }
.sgk-sg__all:hover, .sgk-sg__all.is-hover { background: var(--sgk-red-soft); border-radius: 0 0 8px 8px; }
.sgk-sg__empty { padding: 4px 8px 8px; color: var(--sgk-muted); font-size: 13px; margin: 0; }
.sgk-sg__loading { display: flex; align-items: center; gap: 10px; color: var(--sgk-muted); font-size: 13px; padding: 8px; }

.sgk-hd__searchbtn { display: none; }
/* Site đã có hộp gợi ý solika-ss → ẩn hộp của GHTK để không chồng 2 lớp (mọi khổ màn hình) */
body:has(.solika-ss) .sgk-hd__search .sgk-sg,
body:has(.solika-ss) .sgk-hd__search.is-open { display: none !important; }
@media (max-width: 849px) {
    .sgk-hd { gap: 8px; }
    .sgk-hd__name { display: none; }
    .sgk-hd__user { margin-left: 2px; padding-left: 8px; }
    .sgk-hd__icon { width: 38px; height: 38px; border-radius: 10px; }
    .sgk-hd__icon svg { width: 20px; height: 20px; }
    .sgk-hd__avatar { width: 32px; height: 32px; }
    .sgk-hd__searchbtn { display: inline-flex; }
    .sgk-hd__search { display: none; }
    .sgk-hd__search.is-open {
        display: block; position: fixed; left: 12px; right: 12px; top: var(--sgk-bar-top, 72px); margin: 0; z-index: 1002;
        filter: drop-shadow(0 8px 24px rgba(0,0,0,.15));
    }
    .sgk-hd__search.is-open input[type=search] { background: #fff; height: 46px; }
    .sgk-hd__search.is-open > button { top: 7px; }
    .sgk-sg { min-width: 0; max-height: calc(100vh - var(--sgk-bar-top, 72px) - 80px); }
    .sgk-hd__menu--notif { position: fixed; left: 12px; right: 12px; top: var(--sgk-bar-top, 72px); width: auto; }
    .sgk-hd__user .sgk-hd__menu { position: fixed; left: auto; right: 12px; top: var(--sgk-bar-top, 72px); }
}

/* Điện thoại: logo tự co theo chỗ trống, luôn cách cụm icon 12px – không bao giờ bị đè */
@media (max-width: 600px) {
    .main-header .header-container { gap: 12px; }
    .main-header .header-logo-second { flex: 0 1 auto; min-width: 0; }
    .main-header .header-logo-second img { width: auto !important; max-width: min(150px, 100%) !important; height: auto !important; display: block; }
    .main-header .header-sub.sgk-has-hd { flex: 0 0 auto; min-width: 0; margin-left: auto; }
    .sgk-hd { gap: 6px; }
    .sgk-hd__icon { width: 36px; height: 36px; }
    .sgk-hd__icon svg { width: 19px; height: 19px; }
    .sgk-hd__user { margin-left: 2px; padding-left: 8px; }
    .sgk-hd__userbtn { gap: 4px; padding: 2px; }
    .sgk-hd__avatar { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--sgk-red-soft); }
    .sgk-cart-count, .sgk-hd__dot { top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
}
@media (max-width: 400px) {
    .sgk-hd__userbtn > svg:last-child { display: none; }
    .sgk-hd { gap: 4px; }
    .sgk-hd__icon { width: 34px; height: 34px; }
}

/* Điện thoại: mỗi đơn trong "Đơn hàng gần đây" là một thẻ, không phải kéo ngang */
@media (max-width: 767px) {
    .tp-recent-order .tp-table-wrap { overflow: visible !important; }
    .tp-recent-order .tp-table, .tp-recent-order .tp-table tbody { display: block; width: 100%; min-width: 0 !important; }
    .tp-recent-order .tp-table thead { display: none; }
    .tp-recent-order .tp-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
        padding: 14px; margin: 0 0 12px; border: 1px solid var(--sgk-border); border-radius: 12px; background: #fff;
    }
    .tp-recent-order .tp-table tbody tr:last-child { margin-bottom: 0; }
    .tp-recent-order .tp-table td { display: block; padding: 0 !important; border: 0 !important; white-space: normal; min-width: 0 !important; }
    .tp-recent-order .tp-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; }
    .tp-recent-order .tp-table td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
    .tp-recent-order .tp-table td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; padding: 10px 0 !important; border-top: 1px dashed var(--sgk-border) !important; border-bottom: 1px dashed var(--sgk-border) !important; }
    .tp-recent-order .tp-table td:nth-child(2) { grid-column: 1; grid-row: 3; color: var(--sgk-muted); font-size: 13px; }
    .tp-recent-order .tp-table td:nth-child(4) { grid-column: 2; grid-row: 3; text-align: right; }
    .tp-recent-order .tp-table td.sgk-td:not(.sgk-td--action) { grid-column: 1; grid-row: 4; }
    .tp-recent-order .tp-table td.sgk-td--action { grid-column: 2; grid-row: 4; text-align: right; }
    .tp-recent-order .tp-table tbody tr.sgk-row-active { background: #fff; }
}
@media (max-width: 600px) {
    .sgk-drawer { width: 100%; }
    .sgk-dl { grid-template-columns: 110px 1fr; }
    .sgk-step { grid-template-columns: 28px 1fr; }
    .sgk-step__time { grid-column: 2; padding-top: 2px; }
}