/* TPS: my account — Long Châu–style 2-column layout (MU 1.0.28 — match .container 15px pad) */

/* Page chrome */
body.woocommerce-account.logged-in.tps-account-layout-ready #content,
body.woocommerce-account.logged-in.tps-account-layout-ready .page-wrapper,
body.woocommerce-account.logged-in:has(.tps-account-layout) #content,
body.woocommerce-account.logged-in:has(.tps-account-layout) .page-wrapper {
  background: #ebebeb !important;
  /* Kill Flatsome default #content padding (was ~30px) — breadcrumb sits under header */
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  margin-top: 0 !important;
}

/* Collapse empty Flatsome page-title / title row on My Account */
body.woocommerce-account.logged-in.tps-account-layout-ready .page-title,
body.woocommerce-account.logged-in.tps-account-layout-ready .shop-page-title,
body.woocommerce-account.logged-in.tps-account-layout-ready .page-header,
body.woocommerce-account.logged-in:has(.tps-account-layout) .page-title,
body.woocommerce-account.logged-in:has(.tps-account-layout) .shop-page-title,
body.woocommerce-account.logged-in:has(.tps-account-layout) .page-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

body.woocommerce-account.logged-in.tps-account-layout-ready #main,
body.woocommerce-account.logged-in:has(.tps-account-layout) #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.woocommerce-account.logged-in #content .woocommerce:has(.tps-account-layout),
body.woocommerce-account.logged-in.tps-account-layout-ready #content .woocommerce {
  /* Match header/nav .container (1240 boxed + 15px pad) — shared --tps-content-width */
  max-width: var(--tps-content-width, 1240px);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  /* Horizontal 15px = Flatsome .container pad so logo / danh mục / sidebar share left edge */
  padding: 8px 15px 48px;
}
@media (max-width: 1279px) {
  body.woocommerce-account.logged-in #content .woocommerce:has(.tps-account-layout),
  body.woocommerce-account.logged-in.tps-account-layout-ready #content .woocommerce {
    /* Keep same 15px as .container (was 12 — caused ~3px drift vs header) */
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Kill Flatsome .col 15px gutters so account shell = header 1240 */
body.woocommerce-account.logged-in.tps-account-layout-ready .row.row-main > .large-12.col,
body.woocommerce-account.logged-in.tps-account-layout-ready .row.row-main > .col,
body.woocommerce-account.logged-in:has(.tps-account-layout) .row.row-main > .large-12.col,
body.woocommerce-account.logged-in:has(.tps-account-layout) .row.row-main > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
body.woocommerce-account.logged-in.tps-account-layout-ready .row.row-main > .col > .col-inner,
body.woocommerce-account.logged-in:has(.tps-account-layout) .row.row-main > .col > .col-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* Breadcrumbs span full content width (same as .tps-account-layout below) */
body.woocommerce-account.logged-in #content .woocommerce > .tps-account-breadcrumbs {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* Breadcrumbs — light strip above 2-column layout (visual also in tps-breadcrumb.css MU 1.0.27 — content width 1240) */
.tps-account-breadcrumbs {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 8px 14px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-family: "Be Vietnam Pro", Montserrat, sans-serif;
  line-height: 1.4;
}

.tps-account-breadcrumbs-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.tps-account-crumb,
.tps-account-crumb-sep {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

.tps-account-crumb-sep {
  margin: 0 8px !important;
  color: #9ca3af;
  font-weight: 400;
  user-select: none;
}

.tps-account-crumb-link {
  color: #008b4b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.tps-account-crumb-link:hover,
.tps-account-crumb-link:focus {
  color: #006b3a !important;
  text-decoration: underline !important;
  outline: none;
}

.tps-account-crumb--current {
  color: #1f2937 !important;
  font-weight: 600 !important;
}

@media (max-width: 899px) {
  .tps-account-breadcrumbs {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .tps-account-crumb,
  .tps-account-crumb-sep {
    font-size: 12px;
  }
  .tps-account-crumb-sep {
    margin: 0 6px !important;
  }
}

/* 2-column shell */
.tps-account-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Side column shell: stretch tall so sticky sidebar can travel with main */
.tps-account-side-col {
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
  align-self: stretch;
  position: relative;
  min-height: 1px;
}

.tps-account-sidebar {
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
  /* Account pages disable sticky header (tps-no-header-sticky) — use small top */
  position: sticky;
  top: 12px;
  z-index: 20;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 24px);
  overflow: visible;
  box-sizing: border-box;
  /* Avoid compositor thrash / jump when sibling main reflows (orders thumbs) */
  backface-visibility: hidden;
}

/* 1.0.38 — CSS sticky only (no JS position:fixed pin; fixed reflow caused scroll jump) */
body.admin-bar .tps-account-sidebar {
  top: 44px; /* WP admin bar ~32px + gap */
}

@media (max-width: 782px) {
  body.admin-bar .tps-account-sidebar {
    top: 58px;
  }
}

/* Neutralize any leftover .tps-side-fixed from older cached JS */
.tps-account-sidebar.tps-side-fixed {
  position: sticky !important;
  left: auto !important;
  width: 100% !important;
  z-index: 20;
  overflow: visible;
}

/* Keep sticky working: avoid overflow clipping on account wrappers */
body.woocommerce-account.logged-in.tps-account-layout-ready #content,
body.woocommerce-account.logged-in.tps-account-layout-ready .page-wrapper,
body.woocommerce-account.logged-in.tps-account-layout-ready .page-wrapper-inner,
body.woocommerce-account.logged-in.tps-account-layout-ready #main,
body.woocommerce-account.logged-in.tps-account-layout-ready .row,
body.woocommerce-account.logged-in.tps-account-layout-ready .large-12,
body.woocommerce-account.logged-in.tps-account-layout-ready .col,
body.woocommerce-account.logged-in.tps-account-layout-ready #content .woocommerce,
body.woocommerce-account.logged-in.tps-account-layout-ready .tps-account-layout {
  overflow: visible !important;
}

.tps-account-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* User card — Long Châu–style tall vertical (shop green soft gradient) */
.tps-account-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding: 28px 18px 26px;
  min-height: 196px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(165deg, #e9f8f0 0%, #d4f0e4 38%, #bfe9d6 72%, #a8dfc7 100%);
  border: 1px solid #b7e2cd;
  border-radius: 16px;
  box-shadow:
    0 8px 24px rgba(0, 139, 75, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
}

.tps-account-user-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(0, 168, 90, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(0, 139, 75, 0.10) 0%, transparent 46%);
  pointer-events: none;
  z-index: 0;
}

.tps-account-avatar,
.tps-account-user-meta {
  position: relative;
  z-index: 1;
}

.tps-account-avatar {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #00a85a 0%, #008b4b 100%);
  color: #fff;
  font-family: "Be Vietnam Pro", Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 4px 14px rgba(0, 139, 75, 0.28),
    0 0 0 1px rgba(0, 139, 75, 0.08);
  overflow: hidden;
}

.tps-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.tps-account-user-meta {
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tps-account-user-name {
  font-family: "Be Vietnam Pro", Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f3d2a;
  line-height: 1.35;
  margin: 0;
  word-break: break-word;
  max-width: 100%;
}

.tps-account-user-phone {
  margin-top: 6px;
  font-family: "Be Vietnam Pro", Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3d6b55;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Side nav card */
.tps-account-side-nav {
  background: #fff;
  border: 1px solid #e8eee9;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  padding: 8px;
}

.tps-account-side-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tps-account-side-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
}

.tps-account-side-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #222 !important;
  font-family: "Be Vietnam Pro", Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.tps-account-side-link:hover,
.tps-account-side-link:focus {
  background: #f3faf6 !important;
  color: #008b4b !important;
  outline: none !important;
}

.tps-account-side-item.is-active > .tps-account-side-link,
.tps-account-side-item.active > .tps-account-side-link {
  background: #e8f6ef !important;
  color: #008b4b !important;
  font-weight: 600 !important;
}

/* Icons (reuse dropdown chip style) */
.tps-account-side-link .tps-acc-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef8f2;
  color: #008b4b;
  line-height: 0;
}

.tps-account-side-link .tps-acc-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tps-account-side-link .tps-acc-icon svg .tps-fill {
  fill: currentColor;
  stroke: none;
}

.tps-account-side-link .tps-acc-label {
  flex: 1 1 auto;
  min-width: 0;
}

.tps-account-side-link .tps-acc-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  stroke: #9ca3af;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.tps-account-side-item.is-active .tps-acc-chevron,
.tps-account-side-link:hover .tps-acc-chevron {
  stroke: #008b4b;
}

/* Per-item accent chips */
.tps-account-side-item.woocommerce-MyAccount-navigation-link--edit-account .tps-acc-icon {
  background: #e8f6ef;
  color: #008b4b;
}
.tps-account-side-item.woocommerce-MyAccount-navigation-link--orders .tps-acc-icon {
  background: #eaf3ff;
  color: #2f6fed;
}
.tps-account-side-item.woocommerce-MyAccount-navigation-link--tps-wishlist .tps-acc-icon {
  background: #fff4e8;
  color: #e8a317;
}
.tps-account-side-item.woocommerce-MyAccount-navigation-link--edit-address .tps-acc-icon {
  background: #eafaf4;
  color: #00a85a;
}
.tps-account-side-item.woocommerce-MyAccount-navigation-link--customer-logout .tps-acc-icon {
  background: #fff0f0;
  color: #c0392b;
}

.tps-account-side-item.woocommerce-MyAccount-navigation-link--tps-wishlist > .tps-account-side-link:hover {
  background: #fff9ef !important;
  color: #c48a0e !important;
}

.tps-account-side-item.woocommerce-MyAccount-navigation-link--customer-logout > .tps-account-side-link {
  color: #c0392b !important;
  margin-top: 4px !important;
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 10px 10px !important;
  padding-top: 14px !important;
}

.tps-account-side-item.woocommerce-MyAccount-navigation-link--customer-logout > .tps-account-side-link:hover {
  background: #fff5f5 !important;
  color: #a93226 !important;
}

/* Right pane — keep white card polish for dashboard (endpoint pages have their own) */
body.woocommerce-account.logged-in .tps-account-main > .woocommerce-MyAccount-content {
  background: #fff !important;
  border: 1px solid #F3F4F6 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

/* Avoid double-card when orders/edit already style content — still OK (same look) */

/* Dashboard welcome polish */
body.woocommerce-account.logged-in:not(.woocommerce-edit-account):not(.woocommerce-orders):not(.woocommerce-view-order):not(.woocommerce-edit-address)
  .tps-account-main
  > .woocommerce-MyAccount-content {
  padding: 28px 32px 32px !important;
}

body.woocommerce-account.logged-in
  .tps-account-main
  > .woocommerce-MyAccount-content
  > p.tps-account-welcome-hi {
  font-family: "Be Vietnam Pro", Montserrat, sans-serif !important;
  font-size: 15px !important;
  color: #374151 !important;
  margin: 0 0 10px !important;
  line-height: 1.6 !important;
}
body.woocommerce-account.logged-in
  .tps-account-main
  > .woocommerce-MyAccount-content
  > p.tps-account-welcome-hi
  strong {
  color: #111827 !important;
  font-weight: 700 !important;
}
body.woocommerce-account.logged-in
  .tps-account-main
  > .woocommerce-MyAccount-content
  > p.tps-account-welcome-logout {
  display: none !important;
}
body.woocommerce-account.logged-in
  .tps-account-main
  > .woocommerce-MyAccount-content
  > p.tps-account-welcome-help {
  font-family: "Be Vietnam Pro", Montserrat, sans-serif !important;
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  margin: 0 0 4px !important;
}
body.woocommerce-account.logged-in
  .tps-account-main
  > .woocommerce-MyAccount-content
  > p.tps-account-welcome-help
  a {
  color: #008b4b !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Hide old Flatsome dashboard pill grid */
body.woocommerce-account.logged-in ul.dashboard-links,
.tps-account-layout ul.dashboard-links {
  display: none !important;
}

/* Hide classic WC nav if theme ever shows it (replaced by sidebar) */
body.woocommerce-account.logged-in.tps-account-layout-ready .woocommerce-MyAccount-navigation {
  display: none !important;
}

/* When endpoint CSS already pads content (orders/edit), don't force dashboard padding */
body.woocommerce-account.woocommerce-orders.logged-in .tps-account-main > .woocommerce-MyAccount-content,
body.woocommerce-account.woocommerce-view-order.logged-in .tps-account-main > .woocommerce-MyAccount-content {
  /* leave to tps-account-orders.css */
}

body.woocommerce-account.woocommerce-edit-account.logged-in .tps-account-main > .woocommerce-MyAccount-content,
body.woocommerce-account.woocommerce-edit-address.logged-in .tps-account-main > .woocommerce-MyAccount-content {
  /* leave to endpoint CSS */
}

/* Nested endpoint cards: tighten .woocommerce outer padding already set */

/* Mobile: stack sidebar above content */
@media (max-width: 899px) {
  body.woocommerce-account.logged-in #content .woocommerce:has(.tps-account-layout),
  body.woocommerce-account.logged-in.tps-account-layout-ready #content .woocommerce {
    padding: 8px 10px 36px;
  }

  .tps-account-layout {
    flex-direction: column;
    gap: 14px;
  }

  .tps-account-side-col {
    flex: 0 0 auto;
    width: 100%;
  }

  .tps-account-sidebar,
  .tps-account-sidebar.tps-side-fixed {
    flex: 0 0 auto;
    width: 100% !important;
    left: auto !important;
    position: static !important;
    top: auto !important;
    max-height: none;
    overflow: visible;
  }

  .tps-account-user-card {
    padding: 22px 14px 20px;
    min-height: 168px;
    border-radius: 14px;
  }

  .tps-account-avatar {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    font-size: 20px;
    margin-bottom: 12px;
  }

  .tps-account-user-name {
    font-size: 15px;
  }

  .tps-account-side-nav {
    border-radius: 12px;
    padding: 6px;
  }

  .tps-account-side-link {
    padding: 10px 10px !important;
    font-size: 14px !important;
  }

  body.woocommerce-account.logged-in:not(.woocommerce-edit-account):not(.woocommerce-orders):not(.woocommerce-view-order):not(.woocommerce-edit-address)
    .tps-account-main
    > .woocommerce-MyAccount-content {
    padding: 20px 16px 22px !important;
    border-radius: 12px !important;
  }
}

/* admin-bar offsets set with sidebar rules above (1.0.25) */