/* Thiep Cuoi Gia Kiem Trinh — base + Liquid Glass system (mobile-first, lightweight).
   Glass is used ONLY on small fixed/sticky surfaces (header, pills, modal,
   hearts) so scrolling the album grid never pays for full-screen blur. */
:root{
  --tnm-accent:#f14f79;
  --tnm-accent-deep:#d6336c;
  --tnm-ink:#4a3a36;
  --tnm-ink-soft:#8a7168;
  --tnm-bg:#fdf8f3;
  --tnm-card:#fffdfa;
  --tnm-line:rgba(243,69,115,.16);
  --tnm-glass-bg:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,246,240,.38));
  --tnm-glass-border:rgba(255,255,255,.7);
  --tnm-glass-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),0 10px 30px rgba(178,116,110,.16);
  --tnm-radius:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.tnm-body{padding-bottom:68px /* room for the fixed call overlay (compact since 2.2.8) */}
a{color:var(--tnm-accent-deep);text-decoration:none}
img{max-width:100%;height:auto}

/* ---------- Liquid Glass primitives ---------- */
.tnm-glass{
  background:var(--tnm-glass-bg);
  border:1px solid var(--tnm-glass-border);
  box-shadow:var(--tnm-glass-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
}
.tnm-glass-strong{
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,248,242,.68));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 60px rgba(120,70,60,.25);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tnm-glass,.tnm-glass-strong{background:rgba(253,247,240,.96)}
}
@media (prefers-reduced-transparency:reduce){
  .tnm-glass,.tnm-glass-strong{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(253,247,240,.97)}
}

/* ---------- Header ---------- */
.tnm-header{position:sticky;top:0;z-index:50;border-radius:0 0 22px 22px;border-top:none;border-left:none;border-right:none}
.tnm-header-in{max-width:1180px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tnm-brand{display:flex;align-items:center;gap:9px;color:var(--tnm-ink);min-width:0}
.tnm-brand .custom-logo{max-height:52px;width:auto}
.tnm-brand-logo{height:48px;width:auto;max-width:220px;object-fit:contain;display:block}
.tnm-brand-mark{color:var(--tnm-brand-color,var(--tnm-accent));display:inline-flex}
.tnm-brand-text{display:flex;flex-direction:column;line-height:1.05}
.tnm-brand-name{font-family:var(--tnm-brand-font,Georgia,"Playfair Display","Times New Roman",serif);font-size:21px;font-weight:600;letter-spacing:.2px;white-space:nowrap;color:var(--tnm-brand-color,inherit)}
.tnm-brand-sub{font-size:8.5px;letter-spacing:3.2px;text-transform:uppercase;color:var(--tnm-brand-color,var(--tnm-ink-soft))}
.tnm-header-actions{margin-left:auto;display:flex;gap:8px}
.tnm-icon-btn{position:relative;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--tnm-accent-deep)}
.tnm-icon-btn svg{width:21px;height:21px;display:block}
.tnm-badge{position:absolute;top:-3px;right:-3px;background:var(--tnm-accent);color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid #fff}
.tnm-mainnav{max-width:1180px;margin:0 auto;padding:0 14px 8px}
.tnm-menu{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.tnm-menu a{color:var(--tnm-ink);font-size:14px}
@media(min-width:760px){
  .tnm-header-in{flex-wrap:nowrap;padding:12px 20px}
  .tnm-brand-name{font-size:25px}
    .tnm-header-actions{margin-left:0}
}

/* ---------- Layout / generic ---------- */
.tnm-main{display:block}
.tnm-wrap{max-width:1180px;margin:0 auto;padding:14px 12px 8px}
@media(min-width:760px){.tnm-wrap{padding:20px}}
.tnm-page-title{font-family:Georgia,"Playfair Display","Times New Roman",serif;font-weight:600;font-size:26px;margin:6px 0 12px}
.tnm-btn{display:inline-block;background:var(--tnm-accent);color:#fff;padding:11px 22px;border-radius:999px;font-weight:600}
.tnm-notice{background:#fff3f0;border:1px solid #f0d5cc;padding:14px 16px;border-radius:14px}
.tnm-post{margin-bottom:26px}
.tnm-footer{margin-top:34px;padding:22px 14px 8px;text-align:center;color:var(--tnm-ink-soft)}
.tnm-footer-brand{font-family:Georgia,"Playfair Display",serif;font-size:18px;color:var(--tnm-ink);margin:0 0 4px}
.tnm-footer-note{margin:0 0 8px;font-size:13.5px}
.tnm-menu-footer{justify-content:center}

/* ---------- Fixed bottom call overlay (mobile-first) ---------- */
/* 2.2.8: compact pill on every screen (user order) — hugs its text
   instead of spanning a fixed 680px, shorter, smaller type, and no
   desktop enlargement. */
.tnm-callbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:100010;width:fit-content;max-width:calc(100% - 32px);height:44px;
  padding:0 22px;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;color:#fff;font-weight:600;font-size:15px;letter-spacing:.2px;
  background:linear-gradient(135deg,rgba(255,100,137,.95),rgba(243,69,115,.94));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -8px 16px rgba(255,255,255,.12),0 10px 24px rgba(243,69,115,.35);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}
.tnm-callbar:active{transform:translateX(-50%) scale(.985)}
.tnm-callbar{transition:bottom .25s ease}
.tnm-callbar-icon{font-size:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
@media (prefers-reduced-transparency:reduce){.tnm-callbar{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Header breathing room (2.3.4): the bar never gets as tight as the
   logo itself — min 88px tall with 10px air above/below the 56px logo,
   including in the sticky state while scrolling. */
#masthead{height:auto !important;min-height:88px}
#masthead .header-inner{min-height:88px;padding-top:10px;padding-bottom:10px;box-sizing:border-box}

/* ---------- Scrolling announcement bar under the header (2.3.0) ---- */
.tnm-marquee{background:linear-gradient(90deg,#ff6489,#f34573);color:#fff;height:32px;overflow:hidden;display:flex;align-items:center;position:relative;z-index:5}
.tnm-marquee-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.tnm-marquee-seq{display:inline-flex;align-items:center}
.tnm-marquee-item{font-size:14.5px;font-weight:600;letter-spacing:.02em;padding:0 10px}
.tnm-marquee-heart{display:inline-flex;align-items:center;padding:0 4px}
.tnm-marquee-heart svg{display:block}
.tnm-marquee-line{font-size:14.5px;font-weight:600;white-space:nowrap}
.tnm-marquee.is-static{justify-content:center}
@media (prefers-reduced-motion:reduce){.tnm-marquee{justify-content:center}}

/* WooCommerce generic pages inside the shell */
.tnm-single-product .product{background:var(--tnm-card);border:1px solid var(--tnm-line);border-radius:var(--tnm-radius);padding:16px}
.woocommerce-cart .tnm-main table,.woocommerce-checkout .tnm-main table{background:#fff}
.tnm-badge[hidden]{display:none!important}

/* Site header = Flatsome Header Builder on every page (since 2.2.0): the
   slim glass bar. Background colour itself is the builder's header_bg
   setting; here we add the glass blur, rounded bottom and soft shadow,
   cap the logo height, and tidy the block cell holding the actions. */
#masthead{background-color:rgba(253,247,240,.88);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-radius:0 0 22px 22px;box-shadow:0 10px 30px rgba(150,100,90,.12)}
#logo img.header_logo{max-height:56px;width:auto}
/* Logo + favourites/viewed form ONE cluster centred in the header
   (2.2.4): cancel the left column's flex-grow (Flatsome adds it when the
   logo sits left) and centre the whole row's columns as a group.
   2.2.5: Flatsome also spreads the row with AUTO margins on the side
   columns (.flex-left margin-right:auto / .flex-right margin-left:auto),
   which override justify-content in flex layout — reset those too. */
#masthead .header-inner{justify-content:center;column-gap:12px}
#masthead .header-inner .flex-left{flex-grow:0;margin-right:0}
#masthead .header-inner .flex-right{flex-grow:0;margin-left:0}
/* 2.2.6: tighten the cluster — no column padding / logo offset / nav
   item margins inside the masthead row. */
#masthead .header-inner .flex-col{padding-left:0;padding-right:0}
#masthead #logo{margin-left:0;margin-right:0}
#masthead .header-nav>li{margin-left:0;margin-right:0}
/* 2.2.7: the logo column is fixed at logo_width (200px) by the parent's
   generated CSS while the height-capped image renders ~134px, leaving
   ~66px of dead space inside the column, and the parent's own logo
   margin outranks the plain rules above — force both off. */
#masthead #logo{width:auto!important;margin-left:0!important;margin-right:0!important}
#masthead .header-inner .flex-col{padding-left:0!important;padding-right:0!important}
#header .header-nav>li.header-block{padding-top:0;padding-bottom:0;margin:0}
.header-block .tnm-header-actions{display:inline-flex}

.tnm-header-actions{display:inline-flex;gap:8px;align-items:center}
.tnm-header-actions[hidden]{display:none!important}
.tnm-header-actions-in{margin-left:10px}
.tnm-header-actions-float{position:fixed;top:10px;right:10px;z-index:999}
/* The shop does not use the parent's Footer 1 / Footer 2 widget areas. */
.footer-1,.footer-2{display:none!important}