/*
Theme Name: Miora
Theme URI: https://miora.vn/
Author: Miora
Author URI: https://miora.vn/
Description: Miora — a custom WordPress full-site-editing (block) theme for a Vietnamese acne-care skincare brand. Holographic hero, product grid, brand story, commitments, testimonials and a Zalo-first contact flow. Headings in Quicksand, body in Be Vietnam Pro.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.9.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miora
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, e-commerce, one-column, two-columns, translation-ready
*/

/* =========================================================
   Miora — design tokens (ported from approved preview)
   Colors/spacing also live in theme.json; these mirror it
   so the component CSS below stays self-contained.
   ========================================================= */
:root{
  --purple:#7251B5; --purple-deep:#3F2396; --yellow:#FCDB6D; --pink:#EF8EB1;
  --blue:#BBDCF2; --orange:#FFA245;
  --ink:#2A2342; --muted:#6E6685; --line:rgba(114,81,181,.14);
  --holo:linear-gradient(120deg,#C7E0F4 0%,#E9C9E8 38%,#F3C9DD 62%,#C9B6EC 100%);
  --cta:linear-gradient(135deg,#7251B5 0%,#3F2396 100%);
  --soft:0 14px 40px rgba(114,81,181,.14);
  --soft-sm:0 8px 22px rgba(114,81,181,.10);
  --r:18px; --r-lg:26px; --r-pill:999px;
  --font-d:'Quicksand',sans-serif; --font-b:'Be Vietnam Pro',sans-serif;
}

/* =========================================================
   Base — front-end & editor
   ========================================================= */
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:#FBF7FF;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.editor-styles-wrapper{ background:#FBF7FF; }
/* No gap between the header template part and <main> (WP adds a block gap
   between .wp-site-blocks children) — hero/page content sits flush under it. */
.wp-site-blocks > main{margin-block-start:0;}
h1,h2,h3,h4,.logo{
  font-family:var(--font-d);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
}
.miora-eyebrow{
  font-family:var(--font-d);
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--purple);
}

/* Buttons — base look applied to core button blocks via className.
   Core wraps each button text in <a class="wp-block-button__link">. */
.wp-block-button.is-style-miora-primary .wp-block-button__link,
.wp-block-button.is-style-miora-ghost .wp-block-button__link,
.wp-block-button.is-style-miora-zalo .wp-block-button__link,
.wp-block-button.is-style-miora-light .wp-block-button__link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-d);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  transition:.22s;white-space:nowrap;line-height:1.2;text-decoration:none;
}
.wp-block-button.is-style-miora-primary .wp-block-button__link{
  background:var(--cta);color:#fff;box-shadow:0 10px 24px rgba(63,35,150,.32);
}
.wp-block-button.is-style-miora-primary .wp-block-button__link:hover{
  transform:translateY(-2px);box-shadow:0 16px 30px rgba(63,35,150,.4);
}
.wp-block-button.is-style-miora-ghost .wp-block-button__link{
  background:#fff;color:var(--purple-deep);border:1.5px solid var(--line);
}
.wp-block-button.is-style-miora-ghost .wp-block-button__link:hover{
  border-color:var(--purple);background:#FBF8FF;
}
.wp-block-button.is-style-miora-zalo .wp-block-button__link{
  background:#0068FF;color:#fff;box-shadow:0 10px 24px rgba(0,104,255,.28);
}
.wp-block-button.is-style-miora-zalo .wp-block-button__link:hover{ transform:translateY(-2px); }
.wp-block-button.is-style-miora-light .wp-block-button__link{ background:#fff;color:var(--purple-deep); }

/* =========================================================
   Announcement bar
   ========================================================= */
.miora-topbar{
  background:var(--cta);color:#fff;text-align:center;
  font-size:13.5px;font-weight:500;padding:9px 16px;letter-spacing:.01em;
}
.miora-topbar p{margin:0;font-size:inherit;color:inherit;}
.miora-topbar i{color:var(--yellow);}

/* =========================================================
   Header
   ========================================================= */
/* Sticky FIX: the header template part renders as a wrapper div whose height
   equals topbar+header, so position:sticky only had that tiny box to stick
   inside — the header scrolled away with the page. display:contents removes
   the wrapper box, letting .miora-header stick against the whole page. */
.wp-site-blocks > .wp-block-template-part:has(.miora-header){display:contents;}
/* Anchor jumps (hero CTA → #combos) must land below the now-pinned header. */
#combos{scroll-margin-top:88px;}
.miora-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.miora-header .miora-nav{
  display:flex;align-items:center;justify-content:space-between;
  min-height:60px;gap:22px;
}

/* Logo container & image reset */
.miora-logo-img,
.miora-logo-img.has-global-padding,
.miora-logo-img.is-layout-constrained{
  padding:0 !important;margin:0 !important;
  max-width:fit-content !important;
  flex-shrink:0 !important;
  display:flex !important;align-items:center !important;
}
.miora-logo-img figure,
.miora-logo-img figure.wp-block-image{
  margin:0 !important;display:flex !important;align-items:center !important;
}
.miora-logo-img img{
  height:28px !important;max-height:28px !important;width:auto !important;display:block !important;object-fit:contain !important;
}

/* Primary nav + dropdowns */
.miora-menu{display:flex;align-items:center;}
.miora-menu-list{
  display:flex;gap:22px;align-items:center;flex-wrap:nowrap;
  list-style:none;margin:0;padding:0;
}
.miora-menu-list > li{margin:0;position:relative;display:flex;align-items:center;}
.miora-menu-list > li > a{
  font-family:var(--font-b);font-weight:600;font-size:13.5px;color:var(--ink);
  text-transform:uppercase;letter-spacing:0.04em;
  position:relative;padding:10px 0;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
  line-height:1.5;max-width:220px;
}
.miora-menu-list > li > a:hover{color:var(--purple);}
.miora-menu-list > li > a .miora-menu-text{
  display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;line-height:1.5;padding:2px 0;
}
.miora-menu-list > li > a .miora-sub-caret{
  font-size:13px;flex-shrink:0;margin-left:1px;transition:transform .2s;
}
.miora-menu-list > li > a::after{
  content:"";position:absolute;left:0;bottom:0px;height:2px;width:0;
  background:var(--purple);transition:.25s;border-radius:2px;
}
.miora-menu-list > li > a:hover::after,
.miora-has-sub:hover > a::after,
.miora-has-sub:focus-within > a::after{width:100%;}
.miora-has-sub:hover > a .miora-sub-caret,
.miora-has-sub:focus-within > a .miora-sub-caret{transform:rotate(180deg);}

/* Submenu — desktop hover/focus dropdown */
.miora-submenu{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:calc(100% + 8px);left:-14px;z-index:60;
  min-width:230px;max-width:320px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--soft);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.miora-submenu::before{
  content:"";position:absolute;top:-8px;left:0;right:0;height:8px;
}
.miora-has-sub:hover > .miora-submenu,
.miora-has-sub:focus-within > .miora-submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.miora-submenu li{width:100%;}
.miora-submenu a{
  display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;
  padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.03em;
  color:var(--ink);text-decoration:none !important;line-height:1.5;
}
.miora-submenu a::after{display:none;}
.miora-submenu a:hover{background:#F4EFFB;color:var(--purple-deep);}
.miora-submenu a i{color:var(--purple);font-size:16px;flex-shrink:0;}
.miora-submenu a .miora-menu-text{
  flex:1;display:inline-block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%;line-height:1.5;padding:2px 0;
}

/* Level 2+ flyout for desktop */
.miora-submenu .miora-has-sub{position:relative;}
.miora-submenu .miora-has-sub > a{justify-content:space-between;}
.miora-submenu .miora-has-sub > a .miora-sub-caret{margin-left:auto;font-size:13px;flex-shrink:0;}
.miora-submenu .miora-submenu{
  top:-8px;left:100%;margin-left:6px;min-width:210px;max-width:300px;
}
.miora-submenu .miora-submenu::before{
  top:0;bottom:0;left:-10px;right:auto;width:10px;height:100%;
}

/* Sub-toggle + hamburger — hidden on desktop, shown on mobile */
.miora-sub-toggle,.miora-nav-toggle{display:none;}

.miora-nav-cta{display:flex;align-items:center;gap:12px;}
.miora-icon-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#F4EFFB;color:var(--purple-deep);font-size:20px;transition:.2s;
}
.miora-icon-btn:hover{background:var(--purple);color:#fff;}

/* sparkle / decorative images (never forced square) */
.miora-spark{position:absolute;z-index:1;opacity:.9;pointer-events:none;margin:0;}
.miora-spark img{height:auto;display:block;}

/* =========================================================
   Trust bar
   ========================================================= */
.miora-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.miora-trust .miora-trust-inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding-top:30px;padding-bottom:30px;
}
/* WP flow layout adds margin-block-start to every item except the first —
   in a grid that pushes items 2..4 down and the bar looks misaligned. */
.miora-trust .miora-trust-inner > *{margin-block-start:0;margin-top:0;}
.miora-trust b{line-height:1.35;}
.miora-trust .it{display:flex;align-items:center;gap:14px;}
.miora-trust .ic{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  font-size:24px;color:#fff;flex:none;
}
.miora-trust .t1{background:var(--purple);} .miora-trust .t2{background:var(--pink);}
.miora-trust .t3{background:var(--orange);} .miora-trust .t4{background:#5BB1E6;}
.miora-trust b{font-family:var(--font-d);font-weight:600;font-size:15.5px;display:block;color:var(--ink);}
.miora-trust span{font-size:13px;color:var(--muted);}

/* =========================================================
   Section head
   ========================================================= */
.miora-shead{text-align:center;max-width:900px;margin:0 auto 44px;}
.miora-shead h1{font-size:clamp(30px,4.6vw,48px);margin:0;}
/* Tiêu đề section trang chủ đồng bộ cỡ với title Combo tiết kiệm (48px), căn giữa. */
.miora-shead h2{font-size:clamp(30px,4.6vw,48px);color:var(--purple-deep);margin:12px 0;line-height:1.14;letter-spacing:-.01em;}
.miora-shead p{color:var(--muted);font-size:17px;margin:0;}
/* Eyebrow trong shead: ép về 14px như .miora-eyebrow gốc (thắng .miora-shead p
   nhờ specificity 2 class) → đồng bộ với nhãn dải sản phẩm trang chủ. */
.miora-shead .miora-eyebrow{display:block;font-size:14px;letter-spacing:.14em;margin-bottom:6px;color:var(--purple);}

/* =========================================================
   Category chips
   ========================================================= */
.miora-cats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:46px;}
.miora-cats .wp-block-button{margin:0;}
.miora-cats .wp-block-button__link{
  font-family:var(--font-d);font-weight:600;font-size:15px;
  padding:11px 24px;border-radius:var(--r-pill);
  background:#F4EFFB;color:var(--purple-deep);
  border:1.5px solid transparent;cursor:pointer;transition:.2s;text-decoration:none;
}
.miora-cats .wp-block-button__link:hover,
.miora-cats .wp-block-button.is-on .wp-block-button__link{background:var(--cta);color:#fff;}

/* =========================================================
   Products grid
   ========================================================= */
.miora-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:1100px){
  .miora-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
}
@media(max-width:768px){
  .miora-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media(max-width:480px){
  .miora-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}
.miora-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--soft-sm);
  overflow:hidden;transition:.25s;border:1px solid var(--line);
}
.miora-card:hover{transform:translateY(-6px);box-shadow:var(--soft);}
.miora-p-vis{aspect-ratio:1/1;display:grid;place-items:center;position:relative;}
.miora-p-vis .tag{
  position:absolute;top:14px;left:14px;background:#fff;color:var(--purple-deep);
  font-family:var(--font-d);font-weight:700;font-size:12px;padding:6px 13px;
  border-radius:var(--r-pill);box-shadow:var(--soft-sm);z-index:2;
}
.miora-p-vis .tag.sale{background:var(--orange);color:#fff;}
.miora-g1{background:linear-gradient(135deg,#D9C9F2,#EF8EB1);}
.miora-g2{background:linear-gradient(135deg,#C7E0F4,#C9B6EC);}
.miora-g3{background:linear-gradient(135deg,#F3C9DD,#FBE0A6);}
.miora-g4{background:linear-gradient(135deg,#BBDCF2,#9FE1CB);}
.miora-g5{background:linear-gradient(135deg,#E9C9E8,#FFC9A3);}
.miora-g6{background:linear-gradient(135deg,#C9B6EC,#BBDCF2);}
.miora-p-body{padding:20px 22px 24px;}
.miora-p-cat{font-size:12.5px;color:var(--purple);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
/* the row is 24px tall (late .miora-p-cat rule); 5px of vertical padding gives the inline link a
   >=24px hit box without moving the text or losing the row's ellipsis (WCAG 2.5.8) */
.miora-p-cat a{padding:5px 0;}
/* Only the first category ever fit the one-line row: the rest wrapped onto a clipped second line,
   still reachable by Tab while invisible, and their boxes sat over the product-name link (axe:
   "partially obscured"). Show the first one only — also drops the dangling comma. */
.miora-p-cat a ~ a,
.miora-p-cat .wp-block-post-terms__separator{display:none;}
.miora-p-name{font-family:var(--font-d);font-weight:600;font-size:18px;margin:6px 0 4px;color:var(--ink);}
.miora-p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.miora-price{font-family:var(--font-d);font-weight:700;font-size:21px;color:var(--purple-deep);}
.miora-price s{font-size:14px;color:#b3acc2;font-weight:500;margin-left:6px;}
.miora-buy .wp-block-button__link{
  display:inline-flex;align-items:center;gap:7px;background:#0068FF;color:#fff;
  font-family:var(--font-d);font-weight:600;font-size:13.5px;padding:10px 16px;
  border-radius:var(--r-pill);border:0;cursor:pointer;transition:.2s;text-decoration:none;
}
.miora-buy .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,104,255,.3);}
.miora-buy{margin:0;}

/* =========================================================
   Brand story
   ========================================================= */
.miora-story{background:#FBF7FF;position:relative;overflow:hidden;}
.miora-story .miora-story-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:center;
}
.miora-story-vis{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--soft);background:var(--holo);
}
.miora-story-vis img.mock{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);display:block;}
.miora-story h2{font-size:clamp(28px,3.6vw,40px);color:var(--purple-deep);margin:14px 0 18px;}
.miora-story p{color:#544c6e;font-size:16.5px;margin-bottom:16px;}
.miora-story .pts{margin-top:24px;display:grid;gap:14px;}
.miora-story .pt{display:flex;gap:13px;align-items:flex-start;}
.miora-story .pt i{
  color:#fff;background:var(--purple);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;flex:none;
}
.miora-story .pt b{font-family:var(--font-d);font-weight:600;}
.miora-story .pt p{margin:0;}

/* =========================================================
   Why / commitments
   ========================================================= */
/* Hairline rules above + below, same treatment as the trust bar,
   so the commitments band stands out from the page. */
.miora-why{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.miora-why .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.miora-why .w{
  text-align:center;padding:34px 22px;border-radius:var(--r-lg);
  background:#FBF7FF;border:1px solid var(--line);transition:.25s;
}
.miora-why .w:hover{transform:translateY(-6px);box-shadow:var(--soft);background:#fff;}
.miora-why .wi{
  width:70px;height:70px;border-radius:20px;margin:0 auto 18px;
  display:grid;place-items:center;font-size:32px;color:#fff;
}
.miora-why .wi.c1{background:var(--purple);} .miora-why .wi.c2{background:var(--pink);}
.miora-why .wi.c3{background:var(--orange);} .miora-why .wi.c4{background:#5BB1E6;}
.miora-why h3{font-size:19px;margin-bottom:8px;color:var(--ink);}
.miora-why p{font-size:14.5px;color:var(--muted);margin:0;}

/* =========================================================
   CTA band
   ========================================================= */
.miora-cta-band{
  position:relative;overflow:hidden;background:var(--cta);color:#fff;
  text-align:center;border-radius:var(--r-lg);padding:64px 30px;
}
.miora-cta-band h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px;color:#fff;}
.miora-cta-band p{font-size:18px;opacity:.92;max-width:560px;margin:0 auto 30px;}
.miora-cta-band .sp{position:absolute;opacity:.4;margin:0;z-index:1;}
.miora-cta-band .sp img{height:auto;display:block;}
.miora-cta-band .miora-cta-content{position:relative;z-index:2;}

/* =========================================================
   Footer
   ========================================================= */
.miora-footer{background:#241a3d;color:#cfc7e4;padding:64px 0 28px;margin-top:84px;clear:both;position:relative;z-index:2;}
.miora-footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;}
.miora-footer .miora-logo-img img{height:34px;margin-bottom:14px;}
.miora-footer p{font-size:14.5px;color:#a99fc4;line-height:1.8;}
/* contact links: 10.9:1 on the footer; underlined because the hue alone sits only 1.7:1 from the text */
.miora-footer p a{color:#d9cdfa;text-decoration:underline;text-underline-offset:2px;}
.miora-footer p a:hover{color:#fff;}
.miora-footer h2{font-family:var(--font-d);font-weight:600;color:#fff;font-size:16px;margin:0 0 16px;}
.miora-footer .fl a{display:block;font-size:14.5px;color:#bcb2d6;padding:6px 0;transition:.2s;text-decoration:none;}
.miora-footer .fl a:hover{color:#fff;padding-left:5px;}
.miora-footer .fl ul.fl-list{list-style:none;margin:0;padding:0;}
.miora-footer .fl ul.fl-list li{list-style:none;margin:0;padding:0;}
.miora-footer .socs{display:flex;gap:12px;margin-top:16px;}
.miora-footer .socs a{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;transition:.2s;
}
.miora-footer .socs a:hover{background:var(--purple);}
.miora-footer .socs img{width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92;}
.miora-footer .socs i{font-size:20px;color:#fff;line-height:1;display:flex;align-items:center;justify-content:center;}
.miora-footer .fbar{
  border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;
  text-align:center;font-size:13px;color:#8e84ab;
}

/* =========================================================
   Floating contact buttons
   ========================================================= */
.miora-fab{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:12px;}
.miora-fab a{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:26px;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:.2s;position:relative;
  text-decoration:none;
}
.miora-fab a:hover{transform:scale(1.08);}
.miora-fab .zalo{background:#0068FF;font-family:var(--font-d);font-weight:700;font-size:15px;}
.miora-fab .phone{background:var(--purple);}
.miora-fab .mess{background:#0084FF;}
/* ERP chat button — added at runtime by functions.php when the chat is embedded. */
.miora-fab .chat{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;
  color:#fff;font-size:26px;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:.2s;position:relative;
  background:var(--purple-deep);
}
.miora-fab .chat:hover{transform:scale(1.08);}
.miora-fab .chat:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.miora-fab .chat[data-anb-chat-unread]::after{
  content:"";position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;
  background:#E11D48;border:2px solid #fff;
}
@media (prefers-reduced-motion:reduce){.miora-fab .chat{transition:none;}.miora-fab .chat:hover{transform:none;}}
.miora-fab .pulse{position:absolute;inset:0;border-radius:50%;animation:miora-pulse 2s infinite;}
.miora-fab .zalo .pulse{box-shadow:0 0 0 0 rgba(0,104,255,.5);}
@keyframes miora-pulse{
  70%{box-shadow:0 0 0 14px rgba(0,104,255,0);}
  100%{box-shadow:0 0 0 0 rgba(0,104,255,0);}
}

/* =========================================================
   Section spacing helper (matches preview .sec)
   ========================================================= */
.miora-sec{padding-top:50px;padding-bottom:50px;}
/* Sub-pages: the top-level <main> uses .miora-sec too — 84px pushed content
   below the first fold. Tighten ONLY the page-level main (homepage bands keep 84). */
main.miora-sec{padding-top:40px;}
main.miora-sec > .miora-shead:first-child,
main.miora-sec > .wp-block-group.miora-shead{margin-bottom:40px;}
/* Trang page.html (Dịch vụ, Về Miora, Liên hệ) bọc nội dung trong 1 section
   .miora-sec alignfull → padding-top 50px CỘNG THÊM vào 40px của main, tạo
   khoảng trống đầu trang lớn hơn trang Tin tức. Bỏ padding-top của section đầu
   để đầu trang khớp Tin tức (chỉ còn 40px của main). */
main.miora-sec > .wp-block-post-content > section.miora-sec:first-child{padding-top:0;}

/* =========================================================
   Utility bar (slim, above header)
   ========================================================= */
.miora-utility{
  background:var(--cta);color:#fff;font-size:13px;font-weight:500;
  padding-top:7px;padding-bottom:7px;
}
.miora-utility-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.miora-utility a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.miora-utility-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.miora-utility-left a:hover,.miora-utility-right a:hover{color:var(--yellow);}
.miora-utility-center{display:inline-flex;align-items:center;gap:6px;opacity:.95;}
.miora-utility i{color:var(--yellow);}

/* =========================================================
   Header search box
   ========================================================= */
.miora-search{
  display:flex;align-items:center;gap:8px;background:#F4EFFB;
  border:1.5px solid transparent;border-radius:var(--r-pill);
  padding:8px 14px;transition:.2s;min-width:146px;flex:0 1 180px;
}
.miora-search:focus-within{border-color:var(--purple);background:#fff;}
.miora-search i{color:var(--purple);font-size:18px;}
.miora-search input{
  border:0;background:transparent;outline:none;width:100%;
  font-family:var(--font-b);font-size:14.5px;color:var(--ink);
}
.miora-search input::placeholder{color:var(--muted);}

/* =========================================================
   Hero carousel
   ========================================================= */
.miora-hc,
.miora-hc.has-global-padding,
.miora-hc.is-layout-constrained,
.miora-hc .miora-hc-viewport,
.miora-hc .miora-hc-viewport.has-global-padding,
.miora-hc .miora-hc-viewport.is-layout-constrained,
.miora-hc .miora-hc-track,
.miora-hc .miora-hc-track.has-global-padding,
.miora-hc .miora-hc-track.is-layout-constrained,
.miora-hc .miora-hc-slide,
.miora-hc .miora-hc-slide.has-global-padding,
.miora-hc .miora-hc-slide.is-layout-constrained {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.miora-hc{background:#FBF7FF;position:relative;overflow:hidden;}
.miora-hc .miora-hc-viewport{position:relative;overflow:hidden;}
.miora-hc .miora-hc-track{
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
  width:100% !important;max-width:100% !important;
  transition:transform .6s cubic-bezier(.4,.0,.2,1);
}
.miora-hc .miora-hc-slide{
  position:relative !important;flex:0 0 100% !important;min-width:100% !important;
  max-width:100% !important;width:100% !important;overflow:hidden !important;
  display:block !important;background:transparent !important;
}

/* Neutralize Gutenberg is-layout-constrained child rules */
.miora-hc.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.miora-hc-arrow):not(.miora-hc-dots)),
.miora-hc .miora-hc-viewport.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.miora-hc-arrow):not(.miora-hc-dots)),
.miora-hc .miora-hc-track.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.miora-hc-arrow):not(.miora-hc-dots)),
.miora-hc .miora-hc-slide.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.miora-hc-arrow):not(.miora-hc-dots)) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.miora-hc-slide a, .miora-hc-banner-img a{display:block !important;width:100% !important;line-height:0 !important;}
.miora-hc-slide img, .miora-hc-banner-img img{width:100% !important;max-width:100% !important;height:auto !important;max-height:500px !important;object-fit:cover !important;display:block !important;}
.miora-hc-slide .wp-block-image, .miora-hc-slide figure.wp-block-image{margin:0 !important;width:100% !important;max-width:100% !important;}
.miora-front-main{padding-left:0 !important;padding-right:0 !important;}
.miora-hc .miora-hc-track > *,
.miora-hc .miora-hc-track.is-layout-flow > *,
.miora-hc .miora-hc-track.is-layout-flow > * + *{
  margin-top:0 !important;margin-bottom:0 !important;margin-left:0 !important;margin-right:0 !important;
  margin-block-start:0 !important;margin-block-end:0 !important;
}
.miora-hc-s2{background:linear-gradient(120deg,#C7E0F4 0%,#C9B6EC 55%,#E9C9E8 100%);}
.miora-hc-s3{background:linear-gradient(120deg,#F3C9DD 0%,#FBE0A6 50%,#C9B6EC 100%);}
.miora-hc .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;}
.miora-hc .hb1{width:360px;height:360px;background:var(--pink);top:-120px;right:6%;}
.miora-hc .hb2{width:320px;height:320px;background:var(--blue);bottom:-140px;left:-40px;}
.miora-hc-inner{
  position:relative;z-index:2;text-align:center;max-width:680px;
  padding:88px 24px;margin:0 auto;
}
.miora-hc-inner h2,.miora-hc-inner h1{font-size:clamp(30px,4.4vw,52px);color:var(--purple-deep);margin:14px 0 0;line-height:1.12;}
.miora-hc-inner h2 .hl,.miora-hc-inner h1 .hl{
  background:linear-gradient(120deg,#EF8EB1,#7251B5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.miora-hc-inner p{font-size:18px;color:#544c6e;margin:18px auto 28px;max-width:560px;}
.miora-hc-cta{
  display:inline-flex;align-items:center;gap:9px;background:var(--cta);color:#fff;
  font-family:var(--font-d);font-weight:600;font-size:16px;padding:14px 28px;
  border-radius:var(--r-pill);text-decoration:none;
  box-shadow:0 10px 24px rgba(63,35,150,.32);transition:.22s;
}
.miora-hc-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(63,35,150,.4);color:#fff;}
.miora-hc .miora-hc-arrow,
button.miora-hc-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 46px !important;
  max-width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 0 !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--purple-deep) !important;
  font-size: 22px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 4px 14px rgba(63,35,150,.18) !important;
  transition: .2s !important;
  padding: 0 !important;
  margin: 0 !important;
}
.miora-hc .miora-hc-arrow:hover,
button.miora-hc-arrow:hover {
  background: #fff !important;
  transform: translateY(-50%) scale(1.06) !important;
}
.miora-hc .miora-hc-prev,
button.miora-hc-prev {
  left: 18px !important;
  right: auto !important;
}
.miora-hc .miora-hc-next,
button.miora-hc-next {
  right: 18px !important;
  left: auto !important;
}
.miora-hc-dots{
  position:absolute;left:0;right:0;bottom:18px;z-index:5;
  display:flex;justify-content:center;gap:0;
}
/* 24px hit area (WCAG 2.5.8) around the same 10px dot: the padding stays transparent. */
.miora-hc-dot{
  width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;padding:7px;
  background:rgba(63,35,150,.25);background-clip:content-box;transition:.2s;
}
.miora-hc-dot.is-active{background:var(--purple-deep);background-clip:content-box;width:40px;border-radius:12px;}

/* =========================================================
   Category cards (3 large)
   ========================================================= */
.miora-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.miora-cat-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:230px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;color:var(--purple-deep);text-decoration:none;
  box-shadow:var(--soft-sm);transition:.25s;
}
.miora-cat-card:hover{transform:translateY(-6px);box-shadow:var(--soft);}
.miora-cat-card.cc1{background:linear-gradient(135deg,#D9C9F2,#EF8EB1);}
.miora-cat-card.cc2{background:linear-gradient(135deg,#C7E0F4,#C9B6EC);}
.miora-cat-card.cc3{background:linear-gradient(135deg,#F3C9DD,#FBE0A6);}
.miora-cat-card.cc4{background:linear-gradient(135deg,#C9B6EC,#FFC9A3);}
.miora-cat-ic{
  position:absolute;top:24px;right:24px;width:64px;height:64px;border-radius:20px;
  background:rgba(255,255,255,.65);display:grid;place-items:center;
  font-size:32px;color:var(--purple-deep);
}
.miora-cat-meta h3{font-size:23px;margin:0 0 6px;color:var(--purple-deep);}
.miora-cat-meta p{font-size:14.5px;color:#5b5276;margin:0 0 14px;}
.miora-cat-go{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-d);
  font-weight:600;font-size:14.5px;color:var(--purple-deep);
  background:rgba(255,255,255,.7);padding:9px 18px;border-radius:var(--r-pill);
  align-self:flex-start;transition:.2s;
}
.miora-cat-card:hover .miora-cat-go{background:#fff;}

/* =========================================================
   Product carousel (horizontal scroll rows)
   ========================================================= */
/* Dải sản phẩm trang chủ: tiêu đề CĂN GIỮA, cỡ đồng bộ với title Combo tiết
   kiệm (~50px); link "Xem tất cả" xuống dưới, cũng căn giữa. */
.miora-prow-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  margin-bottom:30px;
}
.miora-prow-titles{text-align:center;}
.miora-prow-titles .miora-eyebrow{display:block;margin-bottom:6px;}
.miora-prow-titles h2{font-size:clamp(30px,4.6vw,48px);color:var(--purple-deep);margin:0;line-height:1.14;letter-spacing:-.01em;}
.miora-prow-all{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-d);
  font-weight:600;font-size:15px;color:var(--purple);text-decoration:none;
  white-space:nowrap;transition:.2s;
}
.miora-prow-all:hover{color:var(--purple-deep);gap:10px;}
/* =========================================================
   Combo page hero heading (trang Bộ sưu tập / Combo tiết kiệm)
   ========================================================= */
/* Căn giữa thường: với cỡ chữ hiện tại dòng 1 (~1168px) vừa khung constrained
   1180px nên không cần breakout — dùng margin auto để căn giữa chuẩn cả trang
   /combo-tiet-kiem/ lẫn section combo trên trang chủ. */
.miora-combo-hero{
  text-align:center;box-sizing:border-box;
  max-width:1240px;margin:0 auto 48px;
}
/* Badge phóng to 1.5× so với bản đầu (14px→21px, padding/icon theo tỉ lệ) */
.miora-combo-hero-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(120deg,#EF8EB1 0%,#7251B5 55%,#3F2396 100%);color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:21px;letter-spacing:.12em;
  text-transform:uppercase;padding:14px 33px;border-radius:var(--r-pill);
  box-shadow:0 12px 30px rgba(114,81,181,.30);margin-bottom:26px;
}
.miora-combo-hero-badge i{color:var(--yellow);font-size:27px;}
/* Tiêu đề 1 câu, căn giữa; "Giải pháp" + "hoàn thiện" gradient, còn lại tím đậm */
.miora-combo-hero-title{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(30px,4.6vw,48px);line-height:1.14;letter-spacing:-.01em;
  color:var(--purple-deep);margin:0 auto 18px;text-align:center;
}
/* Option 2: "Giải pháp" hồng→cam, "hoàn thiện" cam→hồng (mỗi từ 1 chiều).
   Chữ thường 50px, 2 từ nhấn 63px ở desktop (thu nhỏ theo tỉ lệ màn nhỏ). */
.miora-combo-hero-title .hl{
  background:linear-gradient(120deg,#EF8EB1 0%,#FFA245 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;font-size:clamp(36px,5.2vw,60px);line-height:1;
}
.miora-combo-hero-title .hl-b{
  background:linear-gradient(120deg,#FFA245 0%,#EF8EB1 100%);
  -webkit-background-clip:text;background-clip:text;
}
/* Mô tả: +2px so với bản gốc (gốc 15–18px → nay 17–20px).
   max-width 740px để dòng "…mua lẻ," đủ nằm 1 dòng (chỉ ngắt ở <br>). */
.miora-combo-hero-sub{
  font-size:clamp(17px,1.9vw,20px);color:var(--muted);
  margin:0 auto;max-width:740px;line-height:1.6;text-align:center;
}

/* =========================================================
   Combos
   ========================================================= */
.miora-combo{background:#FBF7FF;}
.miora-combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.miora-combo-card{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--soft-sm);border:1px solid var(--line);transition:.25s;
  display:flex;flex-direction:column;
}
.miora-combo-card:hover{transform:translateY(-6px);box-shadow:var(--soft);}

/* Visual & Gradients (Supports miora-cg1..3 and miora-g1..6) */
.miora-combo-vis, a.miora-combo-vis{
  aspect-ratio:1/1;display:block;position:relative;width:100%;
  text-decoration:none;overflow:hidden;background:#f5f0fc;box-sizing:border-box;
}
.miora-cg1{background:linear-gradient(135deg,#e8ddfc 0%,#ffdbe9 100%);}
.miora-cg2{background:linear-gradient(135deg,#d8f1fc 0%,#dbf8ed 100%);}
.miora-cg3{background:linear-gradient(135deg,#e2d8fa 0%,#d8ecfa 100%);}

.miora-combo-vis img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.miora-combo-card:hover .miora-combo-vis img{transform:scale(1.04);}

/* Floating saving badge (.tag) on visual */
.miora-combo-vis .tag, .miora-combo-card .tag{
  position:absolute;top:14px;right:14px;z-index:2;
  background:linear-gradient(120deg,#EF8EB1 0%,#FFA245 100%);
  color:#fff;font-family:var(--font-d);font-weight:700;font-size:12px;
  line-height:1;padding:6px 12px;border-radius:var(--r-pill);
  box-shadow:0 3px 10px rgba(239,142,177,.45);letter-spacing:.02em;white-space:nowrap;
}

/* Discount % badge (pink→orange) */
.miora-disc{
  align-self:center;flex:none;
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(120deg,#EF8EB1 0%,#FFA245 100%);
  color:#fff;font-family:var(--font-d);font-weight:700;font-size:18px;
  line-height:1;padding:8px 11px;border-radius:14px;white-space:nowrap;
  box-shadow:0 3px 8px rgba(239,142,177,.35);
}
.miora-disc i{font-size:19px;}

/* ---- Uniform combo-card layout ---- */
.miora-combo-body{padding:18px 20px 0;text-align:left;display:flex;flex-direction:column;flex:1;}
.miora-combo-card .sub, .miora-combo-body .sub, .miora-combo-body .miora-p-cat{
  display:inline-block;font-size:12px;color:var(--purple);font-weight:700;text-align:left;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;
}
.miora-combo-body .miora-p-cat a{color:inherit;text-decoration:none;}
.miora-combo-body .miora-p-cat a:hover{color:var(--purple-deep);}

.miora-combo-card h3, .miora-combo-body h3{
  font-size:17px;font-weight:700;margin:0 0 8px;color:var(--ink);line-height:1.4;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.miora-combo-card h3 a, .miora-combo-body h3 a{color:inherit;text-decoration:none;transition:color .2s;}
.miora-combo-card h3 a:hover, .miora-combo-body h3 a:hover{color:var(--purple);}

.miora-combo-card p, .miora-combo-body p{
  font-size:13.5px;color:var(--muted);margin:0 0 16px;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;line-height:1.5;
}

.miora-combo-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px 18px;border-top:1px solid rgba(0,0,0,0.06);margin-top:auto;background:#fff;
}
.miora-combo-foot .miora-price, .miora-combo-price{
  display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-size:18px;
}
.miora-combo-price b, .miora-combo-foot .miora-price b{
  font-family:var(--font-d);font-size:19px;font-weight:800;color:var(--purple-deep);
}
.miora-combo-price s, .miora-combo-foot .miora-price s{
  font-size:12.5px;color:var(--muted);text-decoration:line-through;font-weight:400;
}
.miora-combo-foot .buy-order, .miora-combo-foot .miora-btn-order{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:var(--r-pill);transition:.2s;border:0;cursor:pointer;white-space:nowrap;flex:none;
}
.miora-combo-foot .buy-order:hover, .miora-combo-foot .miora-btn-order:hover{transform:translateY(-2px);box-shadow:var(--soft-sm);}

/* Defensive fallback if elements are placed inside .miora-combo-vis without img */
.miora-combo-vis:not(:has(img)){
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:24px 20px;text-align:left;aspect-ratio:auto;min-height:240px;color:var(--ink);
}
.miora-combo-vis:not(:has(img)) h3{color:var(--ink);font-size:18px;margin:8px 0;}
.miora-combo-vis:not(:has(img)) p{color:var(--muted);font-size:13.5px;margin:0;}
.miora-combo-vis:not(:has(img)) .sub{color:var(--purple);font-weight:700;}

/* =========================================================
   Blog teaser
   ========================================================= */
.miora-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.miora-post{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--soft-sm);border:1px solid var(--line);
  text-decoration:none;transition:.25s;
}
.miora-post:hover{transform:translateY(-6px);box-shadow:var(--soft);}
.miora-post-vis{height:170px;display:grid;place-items:center;font-size:44px;color:rgba(255,255,255,.85);}
.miora-post-body{padding:22px 24px 24px;}
.miora-post-cat{
  font-size:12.5px;color:var(--purple);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.miora-post-body h3{font-size:18px;margin:8px 0 8px;color:var(--ink);line-height:1.3;}
.miora-post-body p{font-size:14.5px;color:var(--muted);margin:0 0 14px;}
.miora-post-go{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-d);
  font-weight:600;font-size:14px;color:var(--purple);transition:.2s;
}
.miora-post:hover .miora-post-go{gap:10px;color:var(--purple-deep);}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:1024px){
  .miora-story .miora-story-inner{grid-template-columns:1fr;}
  .miora-grid{grid-template-columns:repeat(2,1fr);}
  .miora-trust .miora-trust-inner,.miora-why .grid4{grid-template-columns:repeat(2,1fr);}
  .miora-cat-grid,.miora-combo-grid,.miora-blog-grid{grid-template-columns:repeat(2,1fr);}
  .miora-footer .fgrid{grid-template-columns:1fr 1fr;}
  .miora-search{display:none;}
  .miora-utility-center{display:none;}

  /* Mobile nav: hamburger reveals a vertical drawer */
  .miora-nav-toggle{
    display:grid;place-items:center;
    width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
    background:#F4EFFB;color:var(--purple-deep);font-size:22px;
    order:3;
  }
  .miora-nav-toggle:hover{background:var(--purple);color:#fff;}
  .miora-menu{
    display:block;position:absolute;left:0;right:0;top:100%;z-index:55;
    background:#fff;border-top:1px solid var(--line);box-shadow:var(--soft);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .miora-menu.is-open{max-height:80vh;overflow-y:auto;}
  .miora-menu-list{
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 18px 18px;
  }
  .miora-menu-list > li{border-bottom:1px solid var(--line);}
  .miora-menu-list > li:last-child{border-bottom:0;}
  .miora-menu-list > li > a{padding:14px 4px;font-size:16px;}
  .miora-menu-list > li > a::after{display:none;}
  .miora-has-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
  .miora-has-sub > a{flex:1;}
  .miora-sub-caret{display:none;}
  .miora-sub-toggle{
    display:grid;place-items:center;
    width:40px;height:40px;border:0;background:transparent;cursor:pointer;
    color:var(--purple-deep);font-size:20px;transition:transform .2s;
  }
  .miora-sub-toggle[aria-expanded="true"]{transform:rotate(180deg);}
  /* Mobile submenu: static, toggled open via JS class */
  .miora-submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;width:100%;
    min-width:0;padding:0 0 8px;
    display:none;
  }
  .miora-submenu.is-open{display:block;}
  .miora-submenu a{padding:11px 10px;}
  /* Nested mobile submenus: indentation & subtle nested background */
  .miora-submenu .miora-submenu{
    padding-left:14px;background:#FAF7FD;border-radius:10px;margin:4px 0 6px;
  }
}
@media(max-width:560px){
  .miora-trust .miora-trust-inner,.miora-why .grid4,
  .miora-cat-grid,.miora-combo-grid,.miora-blog-grid,
  .miora-footer .fgrid{grid-template-columns:1fr;}
  .miora-grid,
  .miora-grid.miora-grid-4{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px 10px !important;
  }
  .miora-card{border-radius:14px;}
  .miora-p-body,
  .miora-qcard .miora-p-body{padding:10px 8px 12px;}
  .miora-p-cat,
  .miora-qcard .miora-p-cat{font-size:10px;}
  .miora-p-name,
  .miora-qcard .miora-p-name{
    font-size:13px;line-height:1.35;margin:4px 0 6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.7em;
  }
  .miora-p-foot,
  .miora-qcard .miora-p-foot{gap:6px;flex-wrap:wrap;align-items:center;}
  .miora-price,
  .miora-qcard .miora-price{font-size:13px;font-weight:700;}
  .miora-buy .wp-block-button__link,
  .miora-qcard .miora-buy .wp-block-button__link{
    padding:5px 9px;font-size:11px;gap:4px;
  }
  .miora-buy .wp-block-button__link i{font-size:12px;}
  .miora-sec{padding-top:60px;padding-bottom:60px;}
  .miora-hc-inner{padding:60px 20px;}
  .miora-hc-arrow{width:38px;height:38px;font-size:18px;}
  .miora-hc-prev{left:8px;} .miora-hc-next{right:8px;}
}

/* =========================================================
   Query-Loop product cards (multi-page: archive, taxonomy,
   homepage featured rows). Maps core block markup onto the
   existing .card / .p-vis brand visual. When a product has
   no featured image, the .miora-qvis gradient shows so the
   card still looks designed.
   ========================================================= */
.miora-grid.miora-grid-4:not([class*="columns-"]){grid-template-columns:repeat(4,1fr);}
.miora-grid.columns-1{grid-template-columns:repeat(1,1fr) !important;}
.miora-grid.columns-2{grid-template-columns:repeat(2,1fr) !important;}
.miora-grid.columns-3{grid-template-columns:repeat(3,1fr) !important;}
.miora-grid.columns-4{grid-template-columns:repeat(4,1fr) !important;}
.miora-grid.columns-5{grid-template-columns:repeat(5,1fr) !important;}
.miora-grid.columns-6{grid-template-columns:repeat(6,1fr) !important;}
.miora-qcard{padding:0;}
.miora-qcard > .miora-p-vis{margin:0;}
.miora-qvis{
  aspect-ratio:1/1;height:auto;border-radius:0;overflow:hidden;padding:0;
  background:var(--holo);
}
.miora-qvis .miora-qimg{margin:0;height:100%;}
.miora-qvis .miora-qimg a,
.miora-product-vis .miora-qimg a{display:block;height:100%;}
.miora-qvis .miora-qimg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Empty featured-image block collapses to 0 height — keep the
   gradient visible by letting .miora-qvis own the height. */
.miora-qvis .wp-block-post-featured-image{height:100%;}
/* ---- Uniform product-card layout (every grid, every page) ----
   Left-aligned text · category 1 line · title clamped to EXACTLY 2 lines ·
   footer pinned to the bottom with price + "Đặt ngay" on ONE row. */
/* Image → category gap halved (was 24px block-gap margin + 16px padding = 40px;
   now a flat 20px carried by the padding alone). */
.miora-qcard .miora-p-body{padding:20px 18px 18px;text-align:left;margin-block-start:0;}
.miora-qcard .miora-p-cat{
  font-size:12px;color:var(--purple);font-weight:600;text-align:left;
  letter-spacing:.04em;text-transform:uppercase;
  /* !important: WP constrained layout centers this fit-content block via margin:auto */
  margin:0 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.miora-qcard .miora-p-cat a{color:inherit;text-decoration:none;}
.miora-qcard .miora-p-name{
  font-family:var(--font-d);font-weight:600;font-size:15px;
  margin:6px 0 12px;color:var(--ink);line-height:1.45;text-align:left;
  /* !important: core forces display:flow-root on post-title, killing the clamp */
  display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.9em;max-height:2.9em;
}
/* The 2-line clamp + ellipsis live on the link: the h2's own clamp never wins against core's
   flow-root (measured: h2 computes flow-root), and Chrome clamps this block link with them.
   min-height: a one-line name was ~20px tall — WCAG 2.5.8 wants a 24px target. */
.miora-qcard .miora-p-name a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:24px;}
.miora-qcard .miora-p-name a:hover{color:var(--purple);}
.miora-qcard .miora-p-foot{
  /* !important + width:100%: constrained layout shrinks this flex group to
     fit-content and centers it with auto side margins */
  margin:auto 0 0 !important;width:100%;display:flex;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:8px;
}
.miora-qcard .miora-price{margin:0;font-size:18px;white-space:nowrap;}
/* Card strike-through original price (auto-appended from _mira_gia_goc):
   stacked ABOVE the selling price (order:-1 beats the anonymous text item),
   selling price below — one-row footer never overflows. */
.miora-qcard .miora-price,.miora-combo-foot .miora-price{
  display:flex;flex-direction:column;align-items:flex-start;
}
.miora-qcard .miora-price s,.miora-combo-foot .miora-price s{
  display:block;margin-left:0;line-height:1.3;order:-1;font-size:16px;
}
.miora-qcard .miora-buy{margin:0;flex:none;}
.miora-qcard .miora-buy .wp-block-button__link{
  font-size:13px;padding:9px 14px;white-space:nowrap;
}

/* Query-Loop blog post cards (home + category) */
.miora-qpost{padding:0;overflow:hidden;}
.miora-qpost > .miora-post-vis{margin:0;}
.miora-qpostvis{
  height:170px;border-radius:0;overflow:hidden;padding:0;
  background:linear-gradient(135deg,#C7E0F4,#C9B6EC);
}
.miora-qpostvis .miora-qimg,
.miora-qpostvis .wp-block-post-featured-image{margin:0;height:100%;}
.miora-qpostvis .miora-qimg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.miora-qpost .miora-post-body{padding:22px 24px 24px;}
.miora-qpost .miora-post-cat{margin:0;}
.miora-qpost .miora-post-cat a{color:var(--purple);text-decoration:none;}
.miora-qpost .miora-post-body h3{
  font-size:18px;margin:8px 0 8px;color:var(--ink);line-height:1.3;
}
.miora-qpost .miora-post-body h3 a{color:inherit;text-decoration:none;}
.miora-qpost .miora-post-body h3 a:hover{color:var(--purple);}
.miora-qpost .miora-post-body p{font-size:14.5px;color:var(--muted);margin:0;}

/* =========================================================
   Single product page
   ========================================================= */
.miora-product-vis{
  border-radius:var(--r-lg);overflow:hidden;background:var(--holo);
  box-shadow:var(--soft);aspect-ratio:1/1;display:grid;place-items:center;
}
.miora-product-vis .miora-qimg{margin:0;width:100%;height:100%;}
.miora-product-vis .miora-qimg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.miora-product-single .miora-p-cat{
  font-size:13px;color:var(--purple);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;
}
.miora-product-single .miora-p-cat a{color:inherit;text-decoration:none;}
.miora-product-title{font-size:clamp(20px,2.4vw,28px);line-height:1.35;margin:0 0 12px;}
.miora-product-price{font-size:28px;margin:0 0 20px;}
.miora-product-cta{gap:14px;}
.miora-product-desc{margin-top:40px;position:relative;transition:max-height .4s ease;}
.miora-product-desc .wp-block-image{margin:14px 0;}
.miora-product-desc .wp-block-image img,
.miora-product-desc img,
.attachment img,
.entry-content img{border-radius:var(--r-lg);max-width:100%;height:auto;object-fit:contain;display:block;margin:0 auto;}

/* Expandable Product Description ("Xem thêm / Thu gọn" — Image 2 UX) */
.miora-product-desc-wrap{position:relative;margin-top:48px;display:flex;flex-direction:column;align-items:center;}
.miora-product-desc-wrap .miora-product-desc{width:100%;}
.miora-product-desc.is-collapsible{max-height:480px;overflow:hidden;}
.miora-product-desc.is-collapsible::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:140px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.98) 100%);
  pointer-events:none;
}
.miora-product-desc.is-expanded{max-height:none !important;}
.miora-product-desc.is-expanded::after{display:none;}
.miora-desc-toggle-wrap{text-align:center;margin-top:16px;z-index:3;width:100%;}
.miora-desc-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 28px;background:#ffffff;border:1.5px solid var(--purple);
  color:var(--purple);font-weight:600;font-size:14px;border-radius:30px;
  cursor:pointer;box-shadow:0 3px 12px rgba(114,81,181,0.08);
  transition:all .2s ease;font-family:inherit;
}
.miora-desc-toggle-btn:hover{background:var(--purple);color:#ffffff;box-shadow:0 4px 16px rgba(114,81,181,0.25);}

/* Multi-column Product Specifications & Structured Layout (Image 3 UI) */
.miora-specs-title{font-size:20px;font-weight:700;color:var(--purple-deep);margin:24px 0 16px;}
.miora-product-specs-table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 32px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #eae5f2;}
.miora-product-specs-table tr:nth-child(even){background:#f9f8fc;}
.miora-product-specs-table td,.miora-product-specs-table th{padding:12px 18px;font-size:14px;line-height:1.5;border-bottom:1px solid #f0ecf6;}
.miora-product-specs-table tr:last-child td,.miora-product-specs-table tr:last-child th{border-bottom:none;}
.miora-product-specs-table th{width:35%;color:#666;font-weight:500;text-align:left;background:inherit;}
.miora-product-specs-table td{color:#222;font-weight:600;}
.miora-feature-card{background:#ffffff;border:1px solid #eae5f2;border-radius:14px;padding:20px;margin-bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,0.03);transition:transform .2s ease,box-shadow .2s ease;}
.miora-feature-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(114,81,181,0.12);}
.miora-feature-card h4{margin:0 0 8px;font-size:16px;color:var(--purple-deep);}
.miora-feature-card p{margin:0;font-size:14px;color:#555;line-height:1.6;}

/* Product image gallery (carousel) — single product & combo pages */
.miora-pgal-main{
  position:relative;aspect-ratio:590 / 323;border-radius:var(--r-lg);overflow:hidden;
  background:var(--holo);box-shadow:var(--soft);
}
.miora-pgal-empty{aspect-ratio:590 / 323;border-radius:var(--r-lg);background:var(--holo);box-shadow:var(--soft);}
.miora-pgal-track{display:flex;height:100%;transition:transform .35s ease;}
.miora-pgal-track figure{flex:0 0 100%;margin:0;height:100%;}
.miora-pgal-track img{width:100%;height:100%;object-fit:contain;background:var(--holo, #fbf9fe);display:block;}
.miora-pgal-prev,.miora-pgal-next{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--purple-deep);
  display:grid;place-items:center;cursor:pointer;font-size:19px;box-shadow:var(--soft-sm);z-index:2;
}
.miora-pgal-prev{left:12px;}
.miora-pgal-next{right:12px;}
.miora-pgal-prev:hover,.miora-pgal-next:hover{background:#fff;}
.miora-pgal-count{
  position:absolute;right:14px;bottom:12px;background:rgba(36,28,58,.55);color:#fff;
  font-size:12px;padding:3px 10px;border-radius:var(--r-pill);z-index:2;
  font-family:var(--font-d);font-weight:600;
}
.miora-pgal-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;}
.miora-pgal-thumb{
  flex:0 0 64px;width:64px;height:64px;border-radius:10px;overflow:hidden;
  border:2px solid var(--line);padding:0;background:none;cursor:pointer;
}
.miora-pgal-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.miora-pgal-thumb.is-active{border-color:var(--purple);}
.miora-pgal-thumb:focus-visible{outline:2px solid var(--pink);outline-offset:1px;}
@media (prefers-reduced-motion: reduce){
  .miora-pgal-track{transition:none;}
}

/* Buy box (single product / combo) */
.miora-buybox{margin-top:6px;}
/* Equal-height cards: pin the price/buttons row to the card bottom so grids
   stay level no matter how long each title/description is. */
.miora-qcard{display:flex;flex-direction:column;}
.miora-qcard > .miora-p-vis{width:100%;}
.miora-qcard .miora-p-body{display:flex;flex-direction:column;flex:1;}
.miora-qcard .miora-p-foot{margin-top:auto;}
.miora-combo-card{display:flex;flex-direction:column;}
.miora-combo-card > .miora-combo-vis,a.miora-combo-vis{width:100%;box-sizing:border-box;}
.miora-combo-body{display:flex;flex-direction:column;flex:1;}
.miora-combo-foot{margin-top:auto;flex-wrap:wrap;}
.miora-qcard .miora-p-foot{flex-wrap:nowrap !important;gap:8px;}
.miora-buy{display:flex;gap:8px;flex-wrap:wrap;}
.is-style-miora-order .wp-block-button__link{
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;
  border-radius:var(--r-pill);font-family:var(--font-d);font-weight:700;
}
.miora-buy .is-style-miora-order .wp-block-button__link{font-size:13.5px;padding:10px 16px;}
.miora-combo-foot .buy-order{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:13.5px;
  padding:10px 16px;border-radius:var(--r-pill);transition:.2s;
}
.miora-combo-foot .buy-order:hover{transform:translateY(-2px);box-shadow:var(--soft-sm);}
.miora-bb-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
.miora-bb-now{font-family:var(--font-d);font-weight:700;font-size:32px;color:var(--purple-deep);}
.miora-bb-old{color:var(--muted);font-size:18px;}
.miora-bb-off{
  background:var(--orange);color:#fff;font-family:var(--font-d);font-weight:700;
  font-size:13px;padding:3px 10px;border-radius:var(--r-pill);
}
.miora-bb-usp{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;}
.miora-bb-usp li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:#544c6e;}
.miora-bb-usp i{color:var(--purple);font-size:18px;flex:none;margin-top:1px;}
.miora-bb-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.miora-btn-order{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:15.5px;
  padding:13px 26px;border-radius:var(--r-pill);transition:.2s;
}
.miora-btn-order:hover{transform:translateY(-2px);box-shadow:var(--soft);}
.miora-btn-zalo{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--blue-zalo,#0068ff);background:#0068ff;color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:15.5px;
  padding:13px 26px;border-radius:var(--r-pill);transition:.2s;
}
.miora-btn-zalo:hover{transform:translateY(-2px);box-shadow:var(--soft);color:#fff;}
.miora-bb-trust{
  list-style:none;margin:0 0 14px;padding:14px 16px;display:grid;
  grid-template-columns:repeat(2,1fr);gap:10px 18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
}
.miora-bb-trust li{display:flex;gap:8px;align-items:center;font-size:13.5px;color:#544c6e;}
.miora-bb-trust i{color:var(--purple);font-size:17px;flex:none;}
.miora-bb-meta{font-size:13px;color:var(--muted);margin:0;}
.miora-bb-meta a{color:var(--purple);text-decoration:none;}
.miora-bb-meta a:hover{text-decoration:underline;}
@media(max-width:560px){
  .miora-bb-cta{flex-direction:column;}
  .miora-btn-order,.miora-btn-zalo{justify-content:center;}
}

/* Quick-order modal */
body.miora-modal-open{overflow:hidden;}
.miora-modal{position:fixed;inset:0;z-index:120;}
.miora-modal-backdrop{position:absolute;inset:0;background:rgba(36,28,58,.6);}
.miora-modal-panel{
  position:relative;max-width:520px;margin:4vh auto;max-height:92vh;overflow:auto;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--soft);
  padding:28px 26px 26px;
}
.miora-modal-x{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:#F1EBFA;color:var(--purple-deep);font-size:18px;cursor:pointer;
  display:grid;place-items:center;
}
.miora-modal-panel h3{margin:0 0 6px;font-size:22px;color:var(--purple-deep);}
.miora-modal-sub{font-size:14px;color:var(--muted);margin:0 0 18px;}
#miora-order-form label{display:block;font-size:13.5px;font-weight:600;color:#544c6e;margin:0 0 12px;}
#miora-order-form input,#miora-order-form textarea{
  width:100%;box-sizing:border-box;margin-top:5px;padding:10px 13px;
  border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14.5px;
  background:#FCFAFF;
}
#miora-order-form input:focus,#miora-order-form textarea:focus{outline:2px solid var(--purple);border-color:var(--purple);}
.miora-hp{position:absolute !important;left:-9999px !important;height:1px;width:1px;overflow:hidden;}
.miora-picker{margin:0 0 12px;}
.miora-picker-lbl{display:block;font-size:13.5px;font-weight:600;color:#544c6e;margin-bottom:5px;}
.miora-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.miora-chip{
  display:inline-flex;align-items:center;gap:6px;background:#F1EBFA;color:var(--purple-deep);
  font-size:12.5px;font-weight:600;padding:4px 8px 4px 10px;border-radius:var(--r-pill);
}
.miora-chip button{border:0;background:none;color:var(--purple-deep);font-size:15px;cursor:pointer;line-height:1;padding:0;}
#miora-picker-search{
  width:100%;box-sizing:border-box;padding:10px 13px;border:1px solid var(--line);
  border-radius:10px 10px 0 0;font:inherit;font-size:14.5px;background:#FCFAFF;
}
.miora-picker-list{
  max-height:180px;overflow-y:auto;border:1px solid var(--line);border-top:0;
  border-radius:0 0 10px 10px;
}
.miora-picker-item{
  display:flex;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 13px;border:0;background:#fff;cursor:pointer;text-align:left;font:inherit;
  font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--line);
}
.miora-picker-item:last-child{border-bottom:0;}
.miora-picker-item:hover{background:#FBF7FF;}
.miora-picker-item.is-selected{background:#F1EBFA;}
.miora-picker-item.is-selected .t::before{content:"✓ ";color:var(--purple);font-weight:700;}
.miora-picker-item .p{color:var(--purple-deep);font-weight:600;white-space:nowrap;}
.miora-bb-submit{width:100%;justify-content:center;margin-top:4px;}
.miora-form-msg{color:#B4232C;font-size:13.5px;margin:10px 0 0;min-height:18px;}
#miora-order-done{text-align:center;padding:18px 6px 6px;}
#miora-order-done i{font-size:54px;color:#2E9E5B;}
#miora-order-done h3{margin:10px 0 6px;}
#miora-order-done p{color:var(--muted);font-size:14.5px;margin:0 0 16px;}

/* FAQ accordions (trang Câu hỏi thường gặp) — core details block */
.miora-sec .wp-block-details{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;margin-bottom:10px;
}
.miora-sec .wp-block-details summary{
  font-family:var(--font-d);font-weight:600;font-size:15.5px;color:var(--ink);
  cursor:pointer;
}
.miora-sec .wp-block-details[open] summary{color:var(--purple-deep);margin-bottom:6px;}
.miora-sec .wp-block-details p{font-size:14.5px;color:#544c6e;margin:0;}

/* =========================================================
   Services grid (Dịch vụ page) — 3-up cards, reuses .w look
   ========================================================= */
.miora-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.miora-svc-grid .w{
  text-align:center;padding:34px 24px;border-radius:var(--r-lg);
  background:#FBF7FF;border:1px solid var(--line);transition:.25s;
}
.miora-svc-grid .w:hover{transform:translateY(-6px);box-shadow:var(--soft);background:#fff;}
.miora-svc-grid .wi{
  width:70px;height:70px;border-radius:20px;margin:0 auto 18px;
  display:grid;place-items:center;font-size:32px;color:#fff;
}
.miora-svc-grid h3{font-size:19px;margin-bottom:8px;color:var(--ink);}
.miora-svc-grid p{font-size:14.5px;color:var(--muted);margin:0;}

/* =========================================================
   Contact page (Liên hệ)
   ========================================================= */
.miora-contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:stretch;}
.miora-contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--soft-sm);padding:30px 30px 34px;
}
.miora-contact-item{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);}
.miora-contact-item:first-child{padding-top:0;}
.miora-contact-ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-size:21px;color:#fff;flex:none;
}
.miora-contact-ic.t1{background:var(--purple);} .miora-contact-ic.t2{background:var(--pink);}
.miora-contact-ic.t3{background:var(--orange);} .miora-contact-ic.t4{background:#5BB1E6;}
.miora-contact-item b{font-family:var(--font-d);font-weight:600;font-size:15.5px;display:block;color:var(--ink);}
.miora-contact-item span{font-size:14.5px;color:var(--muted);display:block;}
.miora-contact-item a{color:var(--purple);text-decoration:none;}
.miora-contact-item a:hover{color:var(--purple-deep);}
.miora-contact-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  background:#0068FF;color:#fff;font-family:var(--font-d);font-weight:600;
  font-size:15px;padding:13px 26px;border-radius:var(--r-pill);
  text-decoration:none;box-shadow:0 10px 24px rgba(0,104,255,.28);transition:.2s;
}
.miora-contact-cta:hover{transform:translateY(-2px);}
.miora-contact-map{
  border-radius:var(--r-lg);overflow:hidden;min-height:340px;
  background:var(--holo);display:grid;place-items:center;
  border:1px solid var(--line);box-shadow:var(--soft-sm);
}
.miora-contact-map-inner{text-align:center;color:var(--purple-deep);}
.miora-contact-map-inner i{font-size:54px;display:block;margin-bottom:10px;opacity:.7;}
.miora-contact-map-inner span{font-family:var(--font-d);font-weight:600;font-size:15px;}

@media(max-width:900px){
  .miora-grid.miora-grid-4{grid-template-columns:repeat(2,1fr);}
  .miora-svc-grid{grid-template-columns:repeat(2,1fr);}
  .miora-contact-grid{grid-template-columns:1fr;}
  /* Stack the product columns. Core forces flex-wrap:wrap!important +
     flex-basis:100%!important on columns ≤781px — in column direction that
     basis is HEIGHT and the wrapping makes each column shrink-to-fit its
     max-content width (the gallery blew up to 730px and bled off-screen).
     Same-specificity later rules put it back to a single nowrap column with
     full-width children. */
  .miora-product-cols{flex-direction:column;}
  .wp-block-columns.miora-product-cols{flex-wrap:nowrap!important;gap:26px;}
  .wp-block-columns.miora-product-cols>.wp-block-column{flex-basis:auto!important;width:100%;min-width:0;}
}
@media(max-width:560px){
  .miora-svc-grid{grid-template-columns:1fr;}
}

/* =========================================================
   Visual QA 2026-06-10 — saturate Query-Loop placeholder panels
   so product/blog cards (no real photos yet) never look blank.
   (Plain background override only — NO flex: flex collapses the
   empty constrained .miora-qvis to ~0 width.)
   ========================================================= */
.miora-qvis{background:linear-gradient(135deg,#D9C9F2 0%,#EF8EB1 100%);}

/* Fix: first product/blog card sat higher than the rest. The Query-Loop
   post-template renders as is-layout-flow, so WP adds margin-block-start to
   every item EXCEPT the first — in a CSS grid that shifts items 2+ down and
   leaves item 1 protruding. The grid gap already handles spacing, so zero it. */
.miora-grid > *,.miora-grid-4 > *,.miora-blog-grid > *{margin-block-start:0;margin-top:0;}
/* .miora-post is a flex column; its EMPTY constrained child collapses to
   width 0 (that was the long-standing "white blog card" bug) — force full width. */
.miora-qpostvis,.miora-post-vis.miora-qpostvis,.miora-qpost > .miora-post-vis{
  background:linear-gradient(135deg,#BBDCF2 0%,#C9B6EC 60%,#EF8EB1 100%) !important;
  height:170px;display:grid;width:100%;
}
/* Blog cards (Homepage "Cẩm nang làm đẹp" block + Category / cam-nang archives): 1280x720 (16:9) responsive thumbnail */
.miora-blog .miora-post-vis,
.miora-blog .miora-qvis,
.miora-blog .miora-qpostvis,
.miora-blog-grid .miora-post-vis,
.miora-blog-grid .miora-qvis,
.miora-blog-grid .miora-qpostvis,
.miora-qpostvis,
.miora-post-vis.miora-qpostvis,
.miora-qpost > .miora-post-vis,
.category .miora-qpostvis,
.category .miora-post-vis.miora-qpostvis,
.category .miora-qpost > .miora-post-vis,
.miora-ratio-16-9{
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  width:100% !important;
  overflow:hidden !important;
}
.miora-blog .miora-post-vis .miora-qimg,
.miora-blog .miora-post-vis .wp-block-post-featured-image,
.miora-blog-grid .miora-qimg,
.miora-blog-grid .wp-block-post-featured-image,
.miora-qpostvis .miora-qimg,
.miora-qpostvis .wp-block-post-featured-image,
.category .miora-qpostvis .miora-qimg,
.category .miora-qpostvis .wp-block-post-featured-image,
.miora-ratio-16-9 .miora-qimg,
.miora-ratio-16-9 .wp-block-post-featured-image{
  height:100% !important;
  width:100% !important;
}
.miora-blog .miora-post-vis img,
.miora-blog-grid .miora-post-vis img,
.miora-qpostvis img,
.category .miora-qpostvis img,
.miora-ratio-16-9 img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Card equal height & pinned bottom more-link */
.miora-blog-grid{
  display:grid !important;
  align-items:stretch !important;
}
.miora-post,
.miora-qpost{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}
.miora-post-body,
.miora-qpost .miora-post-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
}
.miora-post-body .wp-block-post-excerpt{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  justify-content:space-between !important;
  margin-top:10px !important;
}
.miora-post-body .wp-block-post-excerpt__more-text{
  margin-top:auto !important;
  padding-top:12px !important;
}

/* Mobile: stop alignfull sections from breaking out wider than the viewport
   (the breakout was shifting cards past the right edge / clipping icons). */
html{overflow-x:clip;}
body, main, .entry-content, .wp-block-post-content{
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media(max-width:560px){
  .miora-sec{margin-left:0 !important;margin-right:0 !important;max-width:100% !important;}
  .miora-cat-grid,.miora-combo-grid,.miora-blog-grid{max-width:100%;}
}

/* =========================================================
   Ad slots (2026-07-13, sheet 4) — placeholder frames until
   the shop owner sends real creatives.
   ========================================================= */
/* Shared "Quảng cáo" tag + dashed placeholder area */
.miora-ad-tag{
  position:absolute;top:10px;left:12px;z-index:2;
  font-family:var(--font-d);font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  background:#F1EBFA;border-radius:var(--r-pill);padding:3px 9px;
}
.miora-ad-ph{
  height:100%;box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  border:2px dashed rgba(114,81,181,.35);border-radius:var(--r);
  padding:18px 14px;color:var(--muted);
}
.miora-ad-ph i{font-size:34px;color:var(--purple);opacity:.75;}
.miora-ad-ph b{font-family:var(--font-d);font-weight:700;font-size:14.5px;color:var(--purple-deep);}
.miora-ad-ph span{font-size:12.5px;font-weight:600;color:var(--purple);}
.miora-ad-ph small{font-size:11.5px;line-height:1.45;}

/* Left banner — fixed to the left edge, desktop only, closeable (✕ state
   kept in sessionStorage). z-index below the fab (80) and modals. */
.miora-adleft{
  position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:70;
  width:160px;height:480px;max-height:72vh;box-sizing:border-box;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--soft-sm);padding:34px 8px 8px;
}
.miora-adleft .miora-ad-ph{border-radius:12px;}
.miora-adleft-x{
  position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;
  border:0;border-radius:50%;background:#F1EBFA;color:var(--purple-deep);
  font-size:14px;cursor:pointer;display:grid;place-items:center;transition:.2s;
}
.miora-adleft-x:hover{background:var(--purple);color:#fff;}
@media(max-width:1199px){ .miora-adleft{display:none !important;} }

/* Promo popup — below the quick-order modal (z 120) so the order form
   always wins if both are ever up. */
body.miora-adpop-open{overflow:hidden;}
.miora-adpop{position:fixed;inset:0;z-index:110;}
.miora-adpop-backdrop{position:absolute;inset:0;background:rgba(36,28,58,.55);}
.miora-adpop-panel{
  position:relative;width:min(440px,92vw);margin:8vh auto 0;box-sizing:border-box;
  background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(36,28,58,.35);
  padding:40px 20px 24px;max-height:85vh;overflow-y:auto;
}
.miora-adpop-panel .miora-ad-ph{min-height:min(340px,52vh);}
.miora-adpop-panel .miora-ad-content .wp-block-image,
.miora-adleft .miora-ad-content .wp-block-image{margin:0;}
.miora-adpop-panel .miora-ad-content img{width:100%;height:auto;border-radius:12px;display:block;}
.miora-adleft .miora-ad-content img{width:160px;height:auto;border-radius:12px;display:block;}

/* Ad popup tabs — hidden on frontend (controlled via WP Admin options), shown in Site Editor */
.miora-adpop-tabs-nav{display:none !important;}
.editor-styles-wrapper .miora-adpop-tabs-nav{display:flex !important;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px;}
.miora-adpop-tab{background:#f4effa;border:1px solid transparent;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;color:#544c6e;cursor:pointer;transition:.2s;}
.miora-adpop-tab:hover{background:#ece2f8;color:var(--purple-deep);}
.miora-adpop-tab.is-active{background:var(--purple-deep);color:#fff;}

/* Ad popup tab content */
.miora-adpop-tab-content{display:none;}
.miora-adpop-tab-content.is-active{display:block;}
.editor-styles-wrapper .miora-adpop-tab-content{display:block !important;margin-bottom:16px;}

/* Lucky Wheel */
.miora-wheel-box{text-align:center;}
.miora-wheel-header{margin-bottom:12px;}
.miora-wheel-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--purple-deep);margin:0 0 4px;}
.miora-wheel-sub{font-size:12px;color:#6b6382;margin:0;}
.miora-wheel-container{position:relative;width:280px;height:280px;margin:0 auto;}
#miora-wheel-canvas{width:280px;height:280px;border-radius:50%;box-shadow:0 6px 18px rgba(114,81,181,.25);display:block;}
.miora-wheel-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:22px;color:#ff3366;text-shadow:0 2px 6px rgba(0,0,0,.3);z-index:10;line-height:1;pointer-events:none;}
.miora-wheel-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff4d6d,#7251b5);color:#fff;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25);font-weight:700;font-size:11px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.miora-wheel-btn:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.08);}
.miora-wheel-btn:disabled{opacity:.65;cursor:not-allowed;}
.miora-wheel-result{margin-top:14px;padding:12px;background:#fdf5f7;border:1px dashed #ff4d6d;border-radius:12px;text-align:center;}
.miora-wheel-congrats{font-size:13px;color:#2b1f47;margin:0 0 8px;}
.miora-voucher-box{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e0d8eb;border-radius:8px;padding:6px 12px;font-weight:700;font-size:14px;color:#ff4d6d;}
.miora-voucher-box code{background:#f3ecfb;padding:2px 6px;border-radius:4px;letter-spacing:1px;font-size:13px;}
.miora-copy-btn{background:#7251b5;color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s;}
.miora-copy-btn:hover{background:#5b3d9c;}
.miora-voucher-note{font-size:11px;color:#837a96;margin:6px 0 0;}

/* Mystery Box */
.miora-box-wrap{text-align:center;}
.miora-boxes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0;}
.miora-box-item{background:#fbf8ff;border:2px solid #e3d9f3;border-radius:14px;padding:16px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .22s cubic-bezier(.34,1.56,.64,1);}
.miora-box-item:hover{transform:translateY(-6px) scale(1.04);border-color:#7251b5;box-shadow:0 8px 20px rgba(114,81,181,.2);}
.miora-box-item.is-opened{background:#f5ecff;border-color:#ff4d6d;animation:miora-box-open .4s ease;}
@keyframes miora-box-open{0%{transform:scale(.9);}50%{transform:scale(1.1);}100%{transform:scale(1);}}
.miora-box-icon{font-size:38px;line-height:1;display:block;}
.miora-box-lbl{font-size:12px;font-weight:600;color:#544c6e;}
.miora-box-reset-btn{background:transparent;border:1px solid #c9bfdc;border-radius:20px;padding:4px 12px;font-size:11px;color:#6b6382;cursor:pointer;transition:.2s;}
.miora-box-reset-btn:hover{background:#ede6f7;color:var(--purple-deep);}

/* Flash Sale Countdown */
.miora-flash-wrap{text-align:center;padding:4px 0;}
.miora-flash-badge{display:inline-block;background:linear-gradient(135deg,#ff3366,#ff758c);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:.5px;margin-bottom:8px;box-shadow:0 4px 12px rgba(255,51,102,.3);}
.miora-flash-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--purple-deep);margin:0 0 4px;}
.miora-flash-sub{font-size:12px;color:#6b6382;margin:0 0 12px;}
.miora-countdown-timer{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:14px;}
.miora-timer-box{background:var(--purple-deep);color:#fff;border-radius:8px;padding:6px 10px;min-width:44px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px rgba(43,31,71,.25);}
.miora-timer-val{font-size:17px;font-weight:700;line-height:1;font-family:monospace;}
.miora-timer-unit{font-size:9px;color:#d2c4ec;text-transform:uppercase;margin-top:2px;}
.miora-timer-sep{font-size:18px;font-weight:700;color:var(--purple-deep);}
.miora-flash-deal-card{background:#fdf9ff;border:1px solid #ebdff8;border-radius:14px;padding:14px 12px;}
.miora-flash-pricing{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;}
.miora-flash-price-sale{font-size:20px;font-weight:700;color:#ff3366;}
.miora-flash-price-orig{font-size:13px;color:#9b92ae;text-decoration:line-through;}
.miora-flash-discount{background:#ff4d6d;color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;}
.miora-stock-bar-wrap{margin-bottom:12px;}
.miora-stock-bar{height:7px;background:#e9dfeb;border-radius:10px;overflow:hidden;margin-bottom:4px;}
.miora-stock-fill{height:100%;background:linear-gradient(90deg,#ffa06a,#ff4d6d);border-radius:10px;}
.miora-stock-text{font-size:11px;font-weight:600;color:#ff4d6d;}
.miora-flash-cta-btn{display:block;width:100%;background:linear-gradient(135deg,#ff4d6d,#7251b5);color:#fff;font-weight:700;font-size:13px;padding:11px 16px;border-radius:25px;text-decoration:none;box-shadow:0 6px 18px rgba(255,77,109,.35);transition:all .2s;box-sizing:border-box;}
.miora-flash-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,77,109,.45);color:#fff;}

/* Floating trigger button */
.miora-wheel-float-trigger{position:fixed;bottom:84px;left:20px;z-index:90;background:linear-gradient(135deg,#ff4d6d,#7251b5);color:#fff;border:none;border-radius:50px;padding:10px 18px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(114,81,181,.35);cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;transition:transform .2s,box-shadow .2s;}
.miora-wheel-float-trigger:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(114,81,181,.45);}
.miora-wheel-float-trigger .miora-wheel-icon{font-size:18px;}

/* Admin ad helper in site editor */
.miora-admin-ad-section{display:none;}
.editor-styles-wrapper .miora-admin-ad-section,
body.block-editor-page .miora-admin-ad-section,
body.wp-admin .miora-admin-ad-section{display:block !important;padding:30px 20px;border:2px dashed var(--line);border-radius:16px;margin:30px auto;max-width:460px;text-align:center;}
.miora-admin-ad-section-title{font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--purple-deep);margin-bottom:12px;}
@media(max-width:560px){ .miora-adpop-panel{margin-top:10vh;} }

/* =========================================================
   Reviews (single product/combo) — sheet 4 hạng mục 3
   ========================================================= */
.miora-reviews{margin-top:46px;}
.miora-reviews-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.miora-reviews-head h2{font-size:24px;margin:0;color:var(--ink);}
.miora-reviews-avg{
  font-family:var(--font-d);font-weight:600;font-size:14.5px;color:var(--purple-deep);
  display:inline-flex;align-items:center;gap:5px;
}
/* Stars are the ★ glyph, not Tabler icons — the enqueued outline webfont
   has no ti-star-filled (filled icons live in a separate font file). */
.miora-star{color:#F5B301;line-height:1;}
.miora-star.is-off{color:#D9D2E8;}
.miora-reviews-list{display:flex;flex-direction:column;gap:14px;}
.miora-review{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 15px;
}
.miora-review-top{display:flex;align-items:center;gap:11px;}
.miora-review-ava{
  width:40px;height:40px;flex:none;border-radius:50%;background:var(--cta);color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:17px;
  display:grid;place-items:center;
}
.miora-review-who{min-width:0;}
.miora-review-who b{
  font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--ink);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.miora-review-badge{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:#F1EBFA;border-radius:var(--r-pill);padding:2px 8px;
}
.miora-review-stars{display:inline-flex;gap:1px;font-size:14px;}
.miora-review-date{margin-left:auto;font-size:12.5px;color:var(--muted);flex:none;}
.miora-review-body{font-size:14.5px;color:#544c6e;margin-top:9px;}
.miora-review-body p{margin:0 0 6px;font-size:inherit;color:inherit;}
.miora-review-body p:last-child{margin-bottom:0;}
@media(max-width:560px){
  .miora-review-date{display:none;}
}

/* =========================================================
   "Có thể bạn quan tâm" — mini product cards (sheet 4 hạng mục 4):
   smaller than the grid cards so more fit; 6-up desktop,
   horizontal scroll on mobile; whole card is the link, no button.
   ========================================================= */
.miora-related{margin-top:46px;}
.miora-related h2{font-size:24px;margin:0 0 18px;color:var(--ink);}
.miora-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.miora-mini-card{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:8px 8px 11px;text-decoration:none;color:inherit;transition:.22s;
}
.miora-mini-card:hover{transform:translateY(-4px);box-shadow:var(--soft-sm);}
.miora-mini-vis{
  display:block;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#D9C9F2 0%,#EF8EB1 100%);
}
.miora-mini-vis img{width:100%;height:100%;object-fit:cover;display:block;}
.miora-mini-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;line-height:1.4;color:#544c6e;margin:8px 0 4px;
  min-height:calc(12.5px * 1.4 * 2);
}
.miora-mini-price{
  font-family:var(--font-d);font-weight:700;font-size:15.5px;color:var(--purple-deep);
  margin-top:auto;
}
@media(max-width:700px){
  .miora-mini-grid{
    display:flex;overflow-x:auto;gap:11px;padding-bottom:8px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .miora-mini-card{flex:0 0 138px;scroll-snap-align:start;}
}

/* =========================================================
   WooCommerce Product Collection & Stock Management
   ========================================================= */
.wc-block-product-template,
.editor-styles-wrapper .wc-block-product-template{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:24px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}
.wc-block-product-template.miora-grid-1:not([class*="columns-"]),
.editor-styles-wrapper .wc-block-product-template.miora-grid-1:not([class*="columns-"]){
  grid-template-columns:repeat(1,1fr) !important;
}
.wc-block-product-template.miora-grid-2:not([class*="columns-"]),
.editor-styles-wrapper .wc-block-product-template.miora-grid-2:not([class*="columns-"]){
  grid-template-columns:repeat(2,1fr) !important;
}
.wc-block-product-template.miora-grid-3:not([class*="columns-"]),
.editor-styles-wrapper .wc-block-product-template.miora-grid-3:not([class*="columns-"]){
  grid-template-columns:repeat(3,1fr) !important;
}
.wc-block-product-template.miora-grid-4:not([class*="columns-"]),
.editor-styles-wrapper .wc-block-product-template.miora-grid-4:not([class*="columns-"]){
  grid-template-columns:repeat(4,1fr) !important;
}
.wc-block-product-template.miora-grid-5:not([class*="columns-"]),
.editor-styles-wrapper .wc-block-product-template.miora-grid-5:not([class*="columns-"]){
  grid-template-columns:repeat(5,1fr) !important;
}
.wc-block-product-template.miora-grid-6:not([class*="columns-"]),
.editor-styles-wrapper .wc-block-product-template.miora-grid-6:not([class*="columns-"]){
  grid-template-columns:repeat(6,1fr) !important;
}

/* Dynamic columns set via Gutenberg inspector controls */
.wc-block-product-template.columns-1,
.editor-styles-wrapper .wc-block-product-template.columns-1,
.is-product-collection-layout-flex.columns-1{
  grid-template-columns:repeat(1,1fr) !important;
}
.wc-block-product-template.columns-2,
.editor-styles-wrapper .wc-block-product-template.columns-2,
.is-product-collection-layout-flex.columns-2{
  grid-template-columns:repeat(2,1fr) !important;
}
.wc-block-product-template.columns-3,
.editor-styles-wrapper .wc-block-product-template.columns-3,
.is-product-collection-layout-flex.columns-3{
  grid-template-columns:repeat(3,1fr) !important;
}
.wc-block-product-template.columns-4,
.editor-styles-wrapper .wc-block-product-template.columns-4,
.is-product-collection-layout-flex.columns-4{
  grid-template-columns:repeat(4,1fr) !important;
}
.wc-block-product-template.columns-5,
.editor-styles-wrapper .wc-block-product-template.columns-5,
.is-product-collection-layout-flex.columns-5{
  grid-template-columns:repeat(5,1fr) !important;
}
.wc-block-product-template.columns-6,
.editor-styles-wrapper .wc-block-product-template.columns-6,
.is-product-collection-layout-flex.columns-6{
  grid-template-columns:repeat(6,1fr) !important;
}

@media(max-width:991px){
  .wc-block-product-template.columns-4,
  .wc-block-product-template.columns-5,
  .wc-block-product-template.columns-6,
  .editor-styles-wrapper .wc-block-product-template.columns-4,
  .editor-styles-wrapper .wc-block-product-template.columns-5,
  .editor-styles-wrapper .wc-block-product-template.columns-6{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media(max-width:767px){
  .wc-block-product-template,
  .editor-styles-wrapper .wc-block-product-template,
  .wc-block-product-template[class*="columns-"],
  .editor-styles-wrapper .wc-block-product-template[class*="columns-"],
  .wc-block-product-template[class*="miora-grid-"],
  .editor-styles-wrapper .wc-block-product-template[class*="miora-grid-"]{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
  }
}
@media(max-width:480px){
  .wc-block-product-template.columns-1,
  .editor-styles-wrapper .wc-block-product-template.columns-1{
    grid-template-columns:1fr !important;
  }
}
.wc-block-product-template > li.wc-block-product,
.editor-styles-wrapper .wc-block-product-template > li.wc-block-product,
.wc-block-product-template .wc-block-product-template__item,
.editor-styles-wrapper .wc-block-product-template .wc-block-product-template__item{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:column !important;
}
.wc-block-product-template > li.wc-block-product .miora-card,
.editor-styles-wrapper .wc-block-product-template > li.wc-block-product .miora-card{
  height:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Fallback Card Styling for default WooCommerce inner blocks (Image 1 -> Image 2/3) */
.wc-block-product-template > li.wc-block-product:not(:has(.miora-card)),
.editor-styles-wrapper .wc-block-product-template > li.wc-block-product:not(:has(.miora-card)),
.wc-block-product-template .wc-block-product-template__item:not(:has(.miora-card)),
.editor-styles-wrapper .wc-block-product-template .wc-block-product-template__item:not(:has(.miora-card)){
  background:#fff !important;
  border-radius:var(--r-lg, 18px) !important;
  box-shadow:var(--soft-sm, 0 4px 20px rgba(0,0,0,0.06)) !important;
  border:1px solid var(--line, #ede7f6) !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-rows:auto auto 1fr auto !important;
  align-items:center !important;
  padding:0 !important;
  margin:0 !important;
  height:100% !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
.wc-block-product-template > li.wc-block-product:not(:has(.miora-card)):hover,
.editor-styles-wrapper .wc-block-product-template > li.wc-block-product:not(:has(.miora-card)):hover,
.wc-block-product-template .wc-block-product-template__item:not(:has(.miora-card)):hover,
.editor-styles-wrapper .wc-block-product-template .wc-block-product-template__item:not(:has(.miora-card)):hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--soft, 0 12px 30px rgba(107,60,233,0.12)) !important;
}

/* Default Product Image */
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-image,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-image{
  grid-column:1 / -1 !important;
  width:100% !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  background:#f8f6fc !important;
  position:relative !important;
}
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-image img,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .3s ease !important;
}
.wc-block-product-template > li:not(:has(.miora-card)):hover .wc-block-components-product-image img,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)):hover .wc-block-components-product-image img{
  transform:scale(1.04) !important;
}

/* Category Eyebrow in default template */
.wc-block-product-template > li:not(:has(.miora-card)) .taxonomy-product_cat,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .taxonomy-product_cat{
  grid-column:1 / -1 !important;
  padding:16px 20px 0 !important;
  margin:0 !important;
  font-size:12px !important;
  color:var(--purple) !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
.wc-block-product-template > li:not(:has(.miora-card)) .taxonomy-product_cat a,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .taxonomy-product_cat a{
  color:var(--purple) !important;
  text-decoration:none !important;
}

/* Title in default template */
.wc-block-product-template > li:not(:has(.miora-card)) .wp-block-post-title,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wp-block-post-title,
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-title,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-title{
  grid-column:1 / -1 !important;
  align-self:start !important;
  padding:6px 20px 14px !important;
  margin:0 !important;
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-size:16.5px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:var(--ink, #1F1635) !important;
  text-align:left !important;
}
.wc-block-product-template > li:not(:has(.miora-card)) .wp-block-post-title a,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wp-block-post-title a,
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-title a,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-title a{
  color:inherit !important;
  text-decoration:none !important;
}

/* Sale Badge Styling (Modern pill badge -XX% with gradient) */
.wc-block-components-product-sale-badge,
.editor-styles-wrapper .wc-block-components-product-sale-badge,
.miora-sale-badge{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  background:linear-gradient(135deg, #FF4B72, #FF8A3D) !important;
  color:#fff !important;
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight:800 !important;
  font-size:12px !important;
  line-height:1 !important;
  padding:5px 10px !important;
  border-radius:var(--r-pill, 999px) !important;
  border:0 !important;
  box-shadow:0 4px 12px rgba(255,75,114,0.35) !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
}
.wc-block-components-product-sale-badge .wc-block-components-product-sale-badge__text,
.editor-styles-wrapper .wc-block-components-product-sale-badge .wc-block-components-product-sale-badge__text,
.miora-sale-badge .wc-block-components-product-sale-badge__text{
  color:#fff !important;
  font-weight:800 !important;
  font-size:12px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  display:inline-block !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}
/* In Gutenberg editor: replace plain "Khuyến mại" with clean badge */
.editor-styles-wrapper .wc-block-components-product-sale-badge .wc-block-components-product-sale-badge__text{
  display:none !important;
}
.editor-styles-wrapper .wc-block-components-product-sale-badge::after{
  content:"GIẢM GIÁ" !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
}

/* Price in default template & editor */
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-price,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-price,
.wc-block-product-template > li:not(:has(.miora-card)) .miora-price,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .miora-price{
  grid-column:1 / 2 !important;
  align-self:center !important;
  padding:0 0 18px 18px !important;
  margin:0 !important;
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--purple-deep, #4C1D95) !important;
  text-align:left !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:2px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.wc-block-product-template > li:not(:has(.miora-card)) .miora-price s,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .miora-price s,
.wc-block-components-product-price del,
.editor-styles-wrapper .wc-block-components-product-price del{
  font-size:13px !important;
  color:#b3acc2 !important;
  font-weight:500 !important;
  order:-1 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  margin:0 0 2px !important;
  text-decoration:line-through !important;
}
.wc-block-components-product-price ins,
.editor-styles-wrapper .wc-block-components-product-price ins{
  text-decoration:none !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--purple-deep, #4C1D95) !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.wc-block-components-product-price .woocommerce-Price-amount,
.editor-styles-wrapper .wc-block-components-product-price .woocommerce-Price-amount{
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:baseline !important;
}
.wc-block-components-product-price .woocommerce-Price-currencySymbol,
.editor-styles-wrapper .wc-block-components-product-price .woocommerce-Price-currencySymbol{
  display:inline !important;
  margin-left:2px !important;
}

/* Button in default template (Purple pill button "Đặt ngay") */
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-button,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-button,
.wc-block-product-template > li:not(:has(.miora-card)) .wp-block-woocommerce-product-button,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wp-block-woocommerce-product-button{
  grid-column:2 / 3 !important;
  align-self:center !important;
  padding:0 18px 18px 0 !important;
  margin:0 !important;
  text-align:right !important;
}
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-button .wp-block-button__link,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-button .wp-block-button__link,
.wc-block-product-template > li:not(:has(.miora-card)) .wp-block-woocommerce-product-button button,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wp-block-woocommerce-product-button button{
  background:linear-gradient(120deg,var(--purple),var(--purple-deep)) !important;
  color:#fff !important;
  border-radius:var(--r-pill, 999px) !important;
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  padding:9px 18px !important;
  border:0 !important;
  box-shadow:0 4px 14px rgba(107,60,233,0.25) !important;
  text-decoration:none !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
}
.wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-button .wp-block-button__link:hover,
.editor-styles-wrapper .wc-block-product-template > li:not(:has(.miora-card)) .wc-block-components-product-button .wp-block-button__link:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 18px rgba(107,60,233,0.35) !important;
}

/* Button in editor: replace wide "Thêm vào giỏ hàng" with compact "Đặt ngay" */
.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link,
.editor-styles-wrapper .wp-block-woocommerce-product-button button{
  font-size:0 !important;
  padding:8px 15px !important;
  white-space:nowrap !important;
  min-width:auto !important;
}
.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-woocommerce-product-button button::after{
  content:"Đặt ngay" !important;
  font-size:13px !important;
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight:700 !important;
  color:#fff !important;
  line-height:1 !important;
}
.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link.is-disabled,
.editor-styles-wrapper .wp-block-woocommerce-product-button button:disabled,
.editor-styles-wrapper .wp-block-woocommerce-product-button button[disabled],
.editor-styles-wrapper .wp-block-woocommerce-product-button .is-disabled{
  background:#ede9f2 !important;
  color:#948da1 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}
.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link.is-disabled::after,
.editor-styles-wrapper .wp-block-woocommerce-product-button button:disabled::after,
.editor-styles-wrapper .wp-block-woocommerce-product-button button[disabled]::after,
.editor-styles-wrapper .wp-block-woocommerce-product-button .is-disabled::after{
  content:"Hết hàng" !important;
  color:#948da1 !important;
}

/* Hide unwanted WooCommerce collection pagination & auto-injected heading */
.wp-block-woocommerce-product-collection .wp-block-query-pagination,
.editor-styles-wrapper .wp-block-woocommerce-product-collection .wp-block-query-pagination{
  display:none !important;
}
.wp-block-woocommerce-product-collection > .wp-block-heading,
.editor-styles-wrapper .wp-block-woocommerce-product-collection > .wp-block-heading{
  display:none !important;
}

@media(max-width:960px){
  .wc-block-product-template,
  .editor-styles-wrapper .wc-block-product-template{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:560px){
  .wc-block-product-template,
  .editor-styles-wrapper .wc-block-product-template{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px 10px !important;
  }
}

/* Out of stock card styling */
.miora-card.is-outofstock .miora-p-vis img{
  filter:grayscale(45%);
  opacity:.8;
}
.miora-badge-outofstock{
  position:absolute;
  top:12px;left:12px;
  background:rgba(35,25,50,.85);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 9px;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:.05em;
  z-index:2;
  pointer-events:none;
}
.wp-block-button.is-outofstock .wp-block-button__link,
.miora-card.is-outofstock .miora-buy .wp-block-button__link,
.miora-buy .wp-block-button__link.is-disabled{
  background:#ede9f2 !important;
  color:#948da1 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  box-shadow:none !important;
  transform:none !important;
  border:1px solid #ddd7e6 !important;
}

/* Single product Buybox Out of stock */
.miora-buybox .miora-stock-status-wrap{
  margin-bottom:12px;
}
.miora-badge-stock.is-outofstock{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff1f0;
  color:#cf1322;
  border:1px solid #ffa39e;
  padding:5px 12px;
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:700;
}
.miora-bb-cta .miora-btn-order.is-disabled{
  background:#ede9f2 !important;
  color:#948da1 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  box-shadow:none !important;
  transform:none !important;
  border:1px solid #ddd7e6 !important;
}

/* Related mini cards out of stock */
.miora-mini-vis{position:relative;}
.miora-mini-card.is-outofstock img{filter:grayscale(45%);opacity:.8;}
.miora-mini-badge.is-outofstock{
  position:absolute;top:6px;left:6px;
  background:rgba(35,25,50,.85);
  color:#fff;font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.04em;
  z-index:2;pointer-events:none;
}

/* Quick order picker out of stock */
.miora-picker-item.is-outofstock{
  opacity:.5;
  cursor:not-allowed !important;
  background:#f9f8fa;
}
.miora-picker-item.is-outofstock:hover{
  background:#f9f8fa;
}
.miora-picker-item.is-outofstock .p{
  color:#cf1322 !important;
  font-weight:700 !important;
}

/* =========================================================
   EQUAL-HEIGHT PRODUCT CARDS & SALE BADGE POSITIONING
   Ensures cards in the same grid row have 100% identical height.
   Sale discount badge floats on top-right of image.
   Price & Đặt ngay button stay locked on one single horizontal row.
   ========================================================= */
.miora-grid > li,
.miora-grid > .wp-block-post,
.wc-block-product-template > li,
.wp-block-post-template > li,
.editor-styles-wrapper .wc-block-product-template > li,
.editor-styles-wrapper .wp-block-post-template > li {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.miora-card,
.miora-qcard,
.editor-styles-wrapper .miora-card,
.editor-styles-wrapper .miora-qcard {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.miora-p-vis,
.miora-qvis,
.editor-styles-wrapper .miora-p-vis,
.editor-styles-wrapper .miora-qvis {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  flex: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.miora-p-body,
.editor-styles-wrapper .miora-p-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 16px 18px 18px !important;
  min-height: 0 !important;
}

.miora-p-cat,
.editor-styles-wrapper .miora-p-cat {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--purple, #7C3AED) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  /* 24px row (was 15px + 6px margin): room for a 24px link target, card ~3px taller */
  line-height: 24px !important;
  height: 24px !important;
}

.miora-p-name,
.editor-styles-wrapper .miora-p-name {
  font-family: var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  color: var(--ink, #1F172E) !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.8em !important;
  min-height: 2.8em !important;
  max-height: 2.8em !important;
}

.miora-p-foot,
.editor-styles-wrapper .miora-p-foot {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
}

.miora-price,
.editor-styles-wrapper .miora-price {
  margin: 0 !important;
  font-family: var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--purple-deep, #4C1D95) !important;
  line-height: 1.25 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.miora-price s,
.editor-styles-wrapper .miora-price s {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #a39cb0 !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
  order: -1 !important;
  display: block !important;
}

.miora-buy,
.editor-styles-wrapper .miora-buy {
  margin: 0 !important;
  flex: none !important;
}

.miora-buy .wp-block-button__link,
.editor-styles-wrapper .miora-buy .wp-block-button__link {
  font-size: 13px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Discount % badge on card image (top right) */
.miora-p-vis .miora-disc,
.miora-p-vis .miora-sale-badge,
.miora-qvis .miora-disc,
.miora-qvis .miora-sale-badge,
.editor-styles-wrapper .miora-p-vis .miora-disc,
.editor-styles-wrapper .miora-p-vis .miora-sale-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  background: linear-gradient(135deg, #FF4B72, #FF8A3D) !important;
  color: #fff !important;
  font-family: var(--font-d, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 5px 10px !important;
  border-radius: var(--r-pill, 999px) !important;
  box-shadow: 0 4px 12px rgba(255,75,114,0.35) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  align-self: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}
.miora-p-vis .miora-disc i,
.miora-qvis .miora-disc i {
  display: none !important;
}

/* Fallback: if .miora-disc appears inside .miora-p-foot */
.miora-p-foot .miora-disc {
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  align-self: center !important;
  margin-left: 2px !important;
}

/* =========================================================
   Category bottom description & "Xem thêm" collapsible
   ========================================================= */
.miora-cat-bottom-wrapper {
  margin-top: 40px;
  margin-bottom: 70px;
  padding: 40px;
  background: #ffffff;
  border-radius: var(--r-lg, 26px);
  border: 1px solid var(--line, rgba(114,81,181,.14));
  box-shadow: var(--soft-sm, 0 8px 22px rgba(114,81,181,.10));
  box-sizing: border-box;
  clear: both;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .miora-cat-bottom-wrapper {
    margin-top: 30px;
    margin-bottom: 50px;
    padding: 24px 20px;
    border-radius: var(--r, 18px);
  }
}

.miora-cat-bottom-content {
  max-height: 280px;
  overflow: hidden;
  position: relative;
  font-family: var(--font-b);
  color: var(--ink, #2a2342);
  line-height: 1.7;
}

.miora-cat-bottom-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  pointer-events: none;
}

.miora-cat-bottom-content.is-expanded {
  max-height: none !important;
  overflow: visible !important;
}

.miora-cat-bottom-content.is-expanded::after {
  display: none !important;
}

.miora-cat-bottom-content h2,
.miora-cat-bottom-content h3,
.miora-cat-bottom-content h4 {
  font-family: var(--font-d, 'Quicksand', sans-serif);
  color: var(--purple-deep, #3f2396);
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

.miora-cat-bottom-content h2:first-child,
.miora-cat-bottom-content h3:first-child,
.miora-cat-bottom-content h4:first-child {
  margin-top: 0;
}

.miora-cat-bottom-content p {
  margin-bottom: 1em;
  font-size: 15px;
}

.miora-cat-bottom-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 12px 0;
}

.miora-cat-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px auto 0;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-d, 'Quicksand', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #0068ff;
  transition: color 0.2s ease, opacity 0.2s ease;
  outline: none;
}

.miora-cat-more-btn:hover {
  color: #7251b5;
  opacity: 0.85;
}

.miora-cat-more-btn i {
  font-size: 16px;
  line-height: 1;
}

/* =========================================================
   Mobile UI Optimizations (QA Fixes 2026-10-07)
   ========================================================= */

/* 1. Prevent Mobile Horizontal Overflow & Clean 2-column Product Cards */
@media (max-width: 560px) {
  .miora-card .miora-p-body,
  .miora-qcard .miora-p-body {
    padding: 10px 10px 12px !important;
  }
  .miora-p-foot,
  .miora-qcard .miora-p-foot,
  .editor-styles-wrapper .miora-p-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: auto !important;
  }
  .miora-price,
  .editor-styles-wrapper .miora-price {
    font-size: 14px !important;
  }
  .miora-buy,
  .editor-styles-wrapper .miora-buy,
  .miora-buy .wp-block-button,
  .miora-buy .wp-block-button__link {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 2. Hero Banner Carousel on Mobile */
@media (max-width: 560px) {
  .miora-hc .miora-hc-arrow,
  button.miora-hc-arrow {
    display: none !important;
  }
  .miora-hc-slide img,
  .miora-hc-banner-img img {
    min-height: 160px !important;
    height: 160px !important;
    object-fit: cover !important;
  }
  .miora-hc-dots {
    bottom: 8px !important;
  }
}

/* 3. Floating Contact Speed-Dial on Mobile */
@media (max-width: 768px) {
  .miora-fab {
    right: 16px !important;
    bottom: 16px !important;
    gap: 10px !important;
    align-items: flex-end !important;
  }
  .miora-fab-toggle {
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #7251B5 0%, #3F2396 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(63,35,150,0.4) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    z-index: 90 !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
  }
  .miora-fab-toggle:hover {
    transform: scale(1.06) !important;
  }
  .miora-fab:not(.is-open) > :not(.miora-fab-toggle) {
    display: none !important;
  }
  .miora-fab.is-open > :not(.miora-fab-toggle) {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    animation: mioraFabPop 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  }
  .miora-fab.is-open > .zalo {
    font-size: 13px !important;
  }
  .miora-fab.is-open .miora-fab-toggle {
    background: #E11D48 !important;
    transform: rotate(90deg) !important;
  }
  @keyframes mioraFabPop {
    from { opacity: 0; transform: translateY(12px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (min-width: 769px) {
  .miora-fab-toggle {
    display: none !important;
  }
}