/* ----------------------------------------------------------------
   Landing page widgets.

   One design, every screen. What the manager types in the builder is
   the CEILING; --lp-title-font and --lp-pad-block arrive as complete
   clamp() expressions solved for that ceiling (see LandingWidget.Fluid).
   A 44px headline really is 44px on a 27-inch monitor and lands near
   24px on an iPhone, without anyone maintaining two versions of the
   page — and a 14px one is never inflated past 14px.

   The fallbacks below are what a widget rendered outside the builder
   would get; in practice the section always supplies both.
   ---------------------------------------------------------------- */

.lp-section {
    position: relative;
    padding-block: var(--lp-pad-block, clamp(20px, 4vw, 40px));
}

.lp-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 24px);
}

.lp-inner--full {
    max-width: none;
    padding-inline: 0;
}

.lp-heading {
    font-size: var(--lp-title-font, clamp(18px, 1.1vw + 12px, 22px));
    font-weight: 600;
    margin-bottom: clamp(20px, 3vw, 32px);
}

/* Only reachable from the builder canvas: the storefront never renders a disabled widget. */
.lp-section--disabled {
    opacity: .5;
}

@media (max-width: 767.98px) {
    .lp-hide-mobile {
        display: none;
    }
}

/* ----- The block: one picture, one piece of copy -----

   Hero Banner, Promotion Banner, Brand Story and Image & Text are all this
   shape. They used to be three unrelated blocks of CSS, which is precisely why
   each could only be arranged the one way its own rules happened to allow —
   Hero locked at 40/60, Promotion always centred over its image. One system
   means a new arrangement is written once and every one of the four gets it. */

.lp-block {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}

/* The picture comes first in the markup; `order` decides which side it lands on. */
.lp-mode--split-right .lp-block {
    grid-template-columns: var(--lp-copy, 40fr) var(--lp-media, 60fr);
}

.lp-mode--split-right .lp-block__media {
    order: 2;
}

.lp-mode--split-left .lp-block {
    grid-template-columns: var(--lp-media, 60fr) var(--lp-copy, 40fr);
}

.lp-mode--stacked .lp-block,
.lp-mode--overlay .lp-block {
    grid-template-columns: 1fr;
}

/* Overlay drops both children into the same cell rather than side by side. */
.lp-mode--overlay .lp-block {
    gap: 0;
}

.lp-mode--overlay .lp-block > * {
    grid-area: 1 / 1;
}

.lp-block__media {
    aspect-ratio: var(--lp-aspect, 4 / 3);
    background-color: #d9d9d9;
    background-position: var(--lp-focus, center);
    background-repeat: no-repeat;
    background-size: var(--lp-fit, cover);
    border-radius: 12px;
}

.lp-inner--full .lp-block__media {
    border-radius: 0;
}

.lp-block__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.5vw, 16px);
    /* Without this a long unbroken word can push a grid column past its share. */
    min-width: 0;
}

/* A boxed section gets its breathing room from .lp-inner. A full-bleed one has none, and
   without this the headline starts hard against the edge of the screen. */
.lp-inner--full .lp-block__copy {
    padding: clamp(24px, 4vw, 60px) clamp(16px, 3vw, 50px);
}

/* ----- Placement of the copy ----- */

.lp-h--left .lp-block__copy { align-items: flex-start; text-align: left; }
.lp-h--center .lp-block__copy { align-items: center; text-align: center; }
.lp-h--right .lp-block__copy { align-items: flex-end; text-align: right; }

.lp-v--top .lp-block__copy { align-self: start; }
.lp-v--middle .lp-block__copy { align-self: center; }
.lp-v--bottom .lp-block__copy { align-self: end; }

/* Horizontal placement only means something in overlay, where the copy floats over
   the picture instead of owning a column of its own. */
.lp-mode--overlay .lp-block__copy {
    justify-self: stretch;
    max-width: min(100%, 640px);
    padding: clamp(20px, 4vw, 48px);
    /* A veil so the words survive a bright photograph. Overlay assumes light text —
       that is the convention for a banner sitting on a picture. */
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55));
    border-radius: 12px;
}

.lp-mode--overlay.lp-h--left .lp-block__copy { justify-self: start; }
.lp-mode--overlay.lp-h--center .lp-block__copy { justify-self: center; }
.lp-mode--overlay.lp-h--right .lp-block__copy { justify-self: end; }

/* ----- Copy ----- */

.lp-block__title {
    font-size: var(--lp-title-font, clamp(22px, 1.6vw + 13px, 30px));
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.lp-block__title--caps {
    text-transform: uppercase;
}

.lp-block__lead {
    font-size: clamp(16px, .5vw + 14px, 20px);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.lp-block__body {
    font-size: clamp(14px, .3vw + 13px, 16px);
    line-height: 1.7;
    /* Keeps the line breaks the manager typed into the textarea. */
    white-space: pre-line;
    margin: 0;
}

.lp-block__body--quiet {
    font-style: italic;
    font-weight: 300;
    opacity: .9;
}

/* Outlined rather than solid white: the manager picks the section background, and a
   white button on a white section is an invisible button. currentColor is readable
   against whatever they choose. */
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2vw, 26px);
    font-size: clamp(13px, .3vw + 12px, 15px);
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: clamp(4px, 1vw, 10px);
}

.btn-hero:hover {
    background: rgba(0, 0, 0, .06);
    color: inherit;
}

/* Over a photograph a solid button reads better than an outline. */
.lp-mode--overlay .btn-hero {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.lp-mode--overlay .btn-hero:hover {
    background: #eee;
    color: #111;
}

@media (max-width: 767.98px) {
    .lp-mode--split-right .lp-block,
    .lp-mode--split-left .lp-block {
        grid-template-columns: 1fr;
    }

    /* Both columns became one, so the split ordering no longer applies — mobileStack does. */
    .lp-mode--split-right .lp-block__media {
        order: 0;
    }

    .lp-mobile--text-first .lp-block__media {
        order: 2;
    }

    /* 21:9 across 390px is a 167px sliver with a headline on top of it. Cap how wide
       the ratio may get on a phone; a smaller --lp-aspect passes through untouched. */
    .lp-block__media {
        aspect-ratio: min(var(--lp-aspect, 4 / 3), 16 / 9);
    }

    .lp-mode--overlay .lp-block__copy {
        max-width: 100%;
    }
}

/* ----- Product and category cards ----- */

.product-card {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.product-card__image {
    background: #8d8e8d;
    aspect-ratio: var(--lp-aspect, 200 / 340);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: var(--lp-fit, cover);
    object-position: var(--lp-focus, center);
}

/* The stand-in silhouette is artwork, not a photograph — it should sit in the middle
   of the box rather than being cropped to fill it. */
.product-card__image img.is-placeholder {
    width: 40%;
    height: auto;
    margin: auto;
    opacity: .7;
    object-fit: contain;
}

.product-card__pill {
    background: #666;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9000px;
    padding: 10px clamp(14px, 3vw, 22px);
    margin-top: -24px;
    font-size: clamp(12px, .3vw + 11px, 14px);
    font-weight: 500;
    text-decoration: none;
    /* "DUNG DỊCH VỆ SINH PHỤ NỮ" on one line is 182px, wider than its own column in a
       two-across grid on a phone — it used to hang over the edge of the page. */
    max-width: 100%;
    text-align: center;
}

.product-card__pill:hover {
    background: #5f5f5f;
    color: #fff;
}

.product-card__pill img {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

/* ----- Product Carousel ----- */
.carousel-strip {
    position: relative;
}

.carousel-strip__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.carousel-strip__track::-webkit-scrollbar {
    display: none;
}

.carousel-strip__item {
    flex: 0 0 calc((100% - (var(--carousel-per-view) - 1) * 16px) / var(--carousel-per-view));
    scroll-snap-align: start;
}

.carousel-strip__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #000;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-strip__nav--prev {
    left: -18px;
}

.carousel-strip__nav--next {
    right: -18px;
}

/* Two per screen on a phone regardless of the desktop setting; six tiny cards is unreadable. */
@media (max-width: 767.98px) {
    .carousel-strip__item {
        flex-basis: calc((100% - 16px) / 2);
    }

    .carousel-strip__nav {
        display: none;
    }
}

/* ----- Product Review ----- */
.review-card {
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: clamp(16px, 2vw, 20px);
    display: flex;
    flex-direction: column;
}

.review-card__stars {
    color: #d9d9d9;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.review-card__stars .is-on {
    color: #f5a524;
}

.review-card__text {
    font-size: clamp(14px, .3vw + 13px, 15px);
    line-height: 1.6;
    flex: 1 1 auto;
}

.review-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-top: 12px;
}

.review-card__verified {
    background: #e7f6ec;
    color: #1a7f37;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
}

.review-card__date {
    opacity: .6;
}

.review-card__product {
    font-size: 13px;
    margin-top: 8px;
    color: inherit;
    opacity: .75;
}

/* Ribbon on the manager-only preview, so a draft is never mistaken for the live page. */
.preview-ribbon {
    background: #fde68a;
    color: #713f12;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
}

/* ================================================================
   Widget trang chủ TABUKI (TB_*) — các khối của index.html trong bản
   thiết kế. Nền và màu chữ đến từ tab Giao diện của từng widget, nên
   chữ phụ dùng opacity thay vì một màu cố định: đặt khối nguyên liệu
   lên nền sáng hay nền tối đều đọc được.
   ================================================================ */

.tbw { text-align: left; }
.tbw .tb-section-head h2, .tbw h2, .tbw h3 { color: inherit; }
.tbw .tb-eyebrow { color: inherit; opacity: .72; }
.tbw .tb-section-head p { color: inherit; opacity: .78; }

/* Hero */
.tbw-hero { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.tbw-hero__copy { display: grid; gap: 22px; padding-block: clamp(32px, 5vw, 72px); }
.tbw-hero__script { margin: 0 0 -6px; font-family: var(--tb-f-script); font-size: clamp(36px, 5vw, 58px); font-weight: 600; line-height: 1; color: var(--tb-red); }
.tbw-hero h1 { margin: 0; font-family: var(--tb-f-display); font-size: clamp(34px, 4.8vw, 62px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }
.tbw-hero h1 em { font-style: italic; color: var(--tb-red); }
.tbw-hero__lede { margin: 0; max-width: 50ch; font-size: clamp(15px, 1.3vw, 17px); opacity: .8; }
.tbw-hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.tbw-hero__buy form { margin: 0; }
.tbw-hero__price { margin-right: 8px; font-family: var(--tb-f-display); font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.tbw-hero__price small { margin-left: 6px; font-size: 14px; font-weight: 500; opacity: .7; }
.tbw-hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 36px; margin: 8px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(128, 128, 128, .3); list-style: none; }
.tbw-hero__facts li { display: grid; gap: 2px; font-size: 13px; opacity: .85; }
.tbw-hero__facts b { font-family: var(--tb-f-display); font-size: 22px; font-weight: 600; line-height: 1; }
.tbw-hero__media { position: relative; margin: 0; align-self: end; }
.tbw-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.tbw-hero__note { position: absolute; right: 6%; bottom: 10%; display: grid; gap: 2px; max-width: 220px; padding: 14px 18px; background: var(--tb-paper); color: var(--tb-ink); box-shadow: var(--tb-shadow); }
.tbw-hero__note span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tb-muted); }
.tbw-hero__note strong { font-family: var(--tb-f-display); font-size: 16px; font-weight: 600; line-height: 1.15; }
/* Ảnh lên trước chữ trên điện thoại như bản thiết kế — thứ tự này lưới tự co không làm được. */
@media (max-width: 767.98px) {
    .tbw-hero { grid-template-columns: 1fr; }
    .tbw-hero__media { order: -1; }
    .tbw-hero__media img { aspect-ratio: 5 / 4; }
    .tbw-hero__facts { grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
    .tbw-hero__facts b { font-size: 18px; }
}

/* Bộ sưu tập: năm ô chia đều khi đủ chỗ, hẹp hơn 200px một ô thì thành dải cuộn ngang. */
.tbw-collection { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; padding-bottom: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.tbw-tile { display: grid; grid-template-rows: auto 1fr; background: var(--tb-paper); color: var(--tb-ink); text-decoration: none; scroll-snap-align: start; transition: transform .25s ease, box-shadow .25s ease; }
.tbw-tile:hover { transform: translateY(-4px); box-shadow: var(--tb-shadow); color: var(--tb-ink); }
.tbw-tile img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--tb-mist); }
.tbw-tile__body { display: grid; gap: 4px; padding: 16px 16px 18px; border-top: 3px solid var(--c); }
.tbw-tile__body strong { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.tbw-tile__script { font-family: var(--tb-f-script); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--c); }
.tbw-tile__body small { font-size: 12.5px; color: var(--tb-muted); }

/* Minh bạch nguyên liệu */
.tbw-ing { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 5vw, 72px); }
.tbw-ing__list { flex: 999 1 480px; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(128, 128, 128, .3); }
.tbw-ing__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding: 22px 0; border-bottom: 1px solid rgba(128, 128, 128, .3); }
.tbw-ing__name { flex: 1 1 150px; font-family: var(--tb-f-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.15; }
.tbw-ing__what { flex: 2 1 260px; font-size: 14.5px; opacity: .82; }
.tbw-ing__prod { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; color: inherit; font-size: 13px; text-decoration: none; }
.tbw-ing__prod:hover { color: inherit; text-decoration: underline; }
.tbw-tech { flex: 1 1 300px; position: sticky; top: 110px; display: grid; gap: 14px; padding: 28px; border: 1px solid rgba(128, 128, 128, .3); background: rgba(255, 255, 255, .06); }
.tbw-tech .tb-eyebrow { color: var(--tb-gold-light); opacity: 1; }
.tbw-tech h3 { margin: 0; font-family: var(--tb-f-display); font-size: 26px; font-weight: 700; }
.tbw-tech p { margin: 0; font-size: 14px; opacity: .8; }
.tbw-tech ol { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: tbw-step; }
.tbw-tech li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 13.5px; counter-increment: tbw-step; }
.tbw-tech li::before { content: counter(tbw-step); display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--tb-gold-light); border-radius: 50%; color: var(--tb-gold-light); font-size: 12px; font-weight: 600; }
@media (max-width: 767.98px) {
    .tbw-tech { position: static; }
    .tbw-ing__prod { justify-content: flex-start; }
}

/* Cam kết: đường kẻ giữa các ô dùng lề âm + overflow, để lưới tự xuống dòng mà không cần biết mấy cột. */
.tbw-promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); overflow: hidden; border-top: 1px solid rgba(21, 54, 42, .2); }
.tbw-promise__item { display: grid; align-content: start; gap: 10px; margin: -1px 0 0 -1px; padding: 28px 24px 8px; border-top: 1px solid rgba(21, 54, 42, .2); border-left: 1px solid rgba(21, 54, 42, .2); }
.tbw-promise__big { font-family: var(--tb-f-display); font-size: clamp(38px, 4.2vw, 56px); font-weight: 700; line-height: .95; letter-spacing: -.03em; color: var(--tb-red); }
.tbw-promise__big small { margin-left: 4px; font-size: .36em; font-weight: 600; letter-spacing: 0; color: var(--tb-ink); }
.tbw-promise__item h3 { margin: 0; font-family: var(--tb-f-body); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.tbw-promise__item p { margin: 0; font-size: 13.5px; opacity: .8; }
.tbw-promise__src { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }

/* Chọn theo nhu cầu */
.tbw-tabs { display: flex; gap: 8px; margin-bottom: 28px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.tbw-tabs::-webkit-scrollbar { display: none; }
.tbw-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--tb-line); border-radius: 999px; background: var(--tb-paper); color: var(--tb-ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.tbw-tab:hover { border-color: var(--tb-ink); }
.tbw-tab[aria-selected="true"] { border-color: var(--tb-ink); background: var(--tb-ink); color: var(--tb-on-ink); }
.tbw-tab__n { font-size: 11.5px; opacity: .6; font-variant-numeric: tabular-nums; }
.tbw-shop__item { display: grid; }
.tbw-shop__item[hidden] { display: none; }

/* Chiến dịch */
.tbw-campaign { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 56px); }
.tbw-campaign__media { flex: 11 1 340px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 14px; }
.tbw-campaign__media--single { grid-template-columns: 1fr; }
.tbw-campaign__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tbw-campaign__media img + img { aspect-ratio: 2 / 3; }
.tbw-campaign__copy { flex: 9 1 300px; display: grid; gap: 18px; }
.tbw-campaign__copy h2 { margin: 0; font-size: clamp(26px, 3.2vw, 40px); }
.tbw-campaign__copy h2 .tb-script { display: block; font-size: .8em; color: var(--tb-red); }
.tbw-campaign__copy p { margin: 0; max-width: 46ch; opacity: .8; }
.tbw-campaign__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tbw-campaign__list li { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.tbw-campaign__list li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--tb-red); transform: translateY(-4px); }

/* Bộ ảnh: tối đa bốn cột, tối thiểu hai ô 160px trên điện thoại; dense lấp chỗ trống do ô cao/rộng để lại. */
.tbw-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(160px, calc((100% - 36px) / 4)), 1fr)); grid-auto-rows: clamp(140px, 17vw, 230px); grid-auto-flow: dense; gap: 12px; }
.tbw-gallery figure { position: relative; margin: 0; overflow: hidden; background: var(--tb-mist); }
.tbw-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tbw-gallery figure:hover img { transform: scale(1.05); }
.tbw-gallery .is-tall { grid-row: span 2; }
.tbw-gallery .is-wide { grid-column: span 2; }

/* Câu chuyện */
.tbw-story { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 80px); }
.tbw-story__media { flex: 1 1 320px; margin: 0; }
.tbw-story__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tbw-story__copy { flex: 1 1 320px; display: grid; gap: 18px; }
.tbw-story__copy h2 { margin: 0; font-size: clamp(26px, 3.2vw, 40px); }
.tbw-story__copy p { margin: 0; max-width: 52ch; opacity: .8; }
.tbw-story__quote { margin: 0; padding-left: 20px; border-left: 2px solid var(--tb-red); font-family: var(--tb-f-display); font-size: clamp(17px, 1.7vw, 21px); font-style: italic; font-weight: 500; line-height: 1.45; }
.tbw-story__stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 6px; }
.tbw-story__stats div { display: grid; }
.tbw-story__stats b { font-family: var(--tb-f-display); font-size: 22px; font-weight: 700; }
.tbw-story__stats span { font-size: 12.5px; opacity: .7; }