/* Membership tier display — append after existing sidebar stylesheet. */
/* One compact tier pill in the account-card heading; each role has its own color. */
body.hm-body.hm-member .hm-sidebar .hm-tier-badge {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center;
  gap:5px!important;
  padding:5px 8px!important;
  max-width:none!important;
  min-height:28px;
  border-radius:9px!important;
  font:700 10px/1.22 var(--hm-facebook-font)!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  flex-shrink:0!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
.hm-tier-icon{display:inline-block;flex:0 0 15px;width:15px;height:15px;vertical-align:-3px}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-admin {
 background:#DC3545!important; color:#fff!important; border-color:#C82D3D!important;
}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-standard {
 background:#fff!important; color:#0B4D9E!important; border-color:#E2EDFA!important;
}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-vip {
 background:#209E57!important; color:#fff!important; border-color:#168448!important;
}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-ssvip {
 background:#F28C28!important; color:#fff!important; border-color:#D97716!important;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-tier{min-height:36px}
body.hm-body.hm-member .hm-sidebar .hm-market-member-tier .hm-tier-icon{margin-right:3px}
body.hm-body.hm-member .hm-sidebar .hm-market-member-tier-progress{
 font:11px/1.45 var(--hm-facebook-font); color:#d0e9ff;
 padding:0 3px 3px; overflow-wrap:anywhere;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-tier-progress strong{color:#fff}
body.hm-body.hm-member .hm-sidebar .hm-market-member-tier-progress small{display:block;font-size:10px;color:#d0e9ff;margin-top:3px}
@media(max-width:480px){body.hm-body.hm-member .hm-sidebar .hm-tier-badge{font-size:9px!important}}
/* Discount information on catalog and product details. */
.hm-member-price-original{display:block;font-size:11px;line-height:1.2;color:rgba(255,255,255,.85);text-decoration:line-through;font-weight:500;margin-top:2px}
.hm-member-discount-hint{display:block;font-size:10px;color:#176f35;font-weight:700;margin-top:3px}
.hm-detail-discount-note{padding:7px 10px;border-radius:8px;background:#ecf9f0;color:#126d3a;font-size:12px;font-weight:700;margin:8px 0}
.hm-order-base-price{color:#8594a9;text-decoration:line-through;font-weight:500;font-size:13px;margin-right:7px}

/* Compact perk row: tier name is already shown in the heading, do not repeat it. */
body.hm-body.hm-member .hm-sidebar .hm-market-member-tier strong{
 color:#fff!important;font-size:11px!important;white-space:nowrap;
}

/* Never break “Thành viên thường”: the badge moves as a single pill when space is tight. */
body.hm-body.hm-member .hm-sidebar > .hm-market-member-card > .hm-market-member-head {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  column-gap:5px!important;
  row-gap:6px!important;
}
body.hm-body.hm-member .hm-sidebar .hm-market-member-head .hm-tier-badge {
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
  font-size:10px!important;
  line-height:1.15!important;
}

/* Account-only top-up and VIP progress. Matches the blue/white website theme. */
.hm-body .hm-shell-main .account-v2 .account-upgrade-card {
  position:relative;
  margin:18px 22px 20px;
  padding:19px 21px 16px;
  border:1px solid #b8d7f7;
  border-radius:13px;
  background:linear-gradient(125deg,#f2f8ff 0%,#ffffff 75%);
  box-shadow:0 4px 17px rgba(20,100,190,.07);
  font-family:var(--hm-facebook-font);
  color:#18416e;
}
.account-upgrade-header{display:flex;align-items:center;gap:12px;min-width:0}
.account-upgrade-emblem{display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#dceeff;color:#0674d5}
.account-upgrade-emblem .hm-tier-icon{width:22px;height:22px;flex-basis:22px}
.account-upgrade-heading{flex:1;min-width:0}
.account-upgrade-eyebrow{display:block;color:#1b77c8;font-size:10px;font-weight:800;letter-spacing:.06em}
.hm-body .hm-shell-main .account-v2 .account-upgrade-heading h2{margin:3px 0;font:700 18px/1.3 var(--hm-facebook-font)!important;color:#0b4d9e!important;letter-spacing:normal!important}
.account-upgrade-heading p{margin:0;font-size:12px;line-height:1.5;color:#6a839d}
.account-upgrade-tier{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;padding:8px 12px;border-radius:9px;font-size:11px;line-height:1.2;font-weight:800;border:1px solid transparent}
.account-upgrade-tier-standard{background:#fff;color:#0b4d9e;border-color:#cbdff4}
.account-upgrade-tier-vip{background:#209e57;color:#fff}
.account-upgrade-tier-ssvip{background:#f28c28;color:#fff}
.account-upgrade-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:17px 0 13px}
.account-upgrade-stat{min-width:0;border-radius:10px;padding:12px 14px;background:#fff;border:1px solid #e0ebf7}
.account-upgrade-stat>span{display:block;font-size:12px;color:#617d99;font-weight:600}
.account-upgrade-stat>strong{display:block;font:800 20px/1.35 var(--hm-facebook-font);color:#0a59a6;margin-top:4px;overflow-wrap:anywhere}
.account-upgrade-stat:nth-child(2)>strong{color:#12824c}
.account-upgrade-track-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;margin:7px 1px 7px;color:#385d85}
.account-upgrade-track-head strong{font-size:12px;color:#0b4d9e}
.account-upgrade-track{height:9px;background:#dfeaf5;border-radius:999px;overflow:hidden}
.account-upgrade-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1686eb,#24af75);transition:width .2s ease}
.account-upgrade-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:11px;line-height:1.4;color:#647d98}
.account-upgrade-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;border-radius:8px;background:#086ad4;color:#fff!important;padding:9px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.account-upgrade-link:hover{background:#0757ad}
.account-upgrade-link .site-icon{width:15px;height:15px}
@media(max-width:700px){
  .hm-body .hm-shell-main .account-v2 .account-upgrade-card{margin:12px;padding:15px}
  .account-upgrade-stats{grid-template-columns:1fr}
  .account-upgrade-header{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:10px}
  .account-upgrade-emblem{grid-column:1;grid-row:1 / span 2}
  .account-upgrade-heading{grid-column:2;grid-row:1;min-width:0}
  .account-upgrade-tier{grid-column:2;grid-row:2;justify-self:start;margin-left:0}
  .account-upgrade-stat>strong{font-size:18px}
  .account-upgrade-link{width:100%;justify-content:center}
}

/* V36: Sidebar tier badges use the same flat role palette as the account dropdown. */
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-admin,
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-standard,
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-vip,
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-ssvip {
  border:0!important;
  box-shadow:none!important;
}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-admin{background:#d92d42!important;color:#fff!important}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-standard{background:#e4e6eb!important;color:#34373d!important}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-vip{background:#18894d!important;color:#fff!important}
body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-ssvip{background:#f0a029!important;color:#392004!important}
html[data-hm-theme="dark"] body.hm-body.hm-member .hm-sidebar .hm-tier-badge.hm-tier-standard{background:#4b4d50!important;color:#fff!important}