/* ==========================================================================
   Theme "modern" — Do Tho
   CSS doc lap hoan toan, khong ke thua giao dien cu.
   Bang mau:  xanh chinh #51aa1b | xanh dam #428b16 | vang #f9c938
              den #1c1c1c | do sale #e01212
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --c-primary: #51aa1b;
    --c-primary-dark: #428b16;
    --c-accent: #f9c938;
    --c-sale: #e01212;
    --c-dark: #1c1c1c;
    --c-heading: #292929;
    --c-text: #333;
    --c-muted: #666;
    --c-light: #b7b7b7;
    --c-border: #e1e1e1;
    --c-bg-soft: #f5f5f5;
    --c-white: #fff;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 3px;
    --container: 1200px;
    --shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-white);
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; color: var(--c-heading); }
p { margin: 0 0 10px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-primary); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 3. Layout ---------- */
.tm-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 15px;
}

.tm-row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tm-row > * { padding: 0 10px; }

.tm-hide-mobile { display: block; }
.tm-only-mobile { display: none; }

/* ---------- 4. Buttons ---------- */
.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: background .2s ease;
}
.tm-btn:hover { background: var(--c-primary-dark); color: var(--c-white); }
.tm-btn--ghost { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); }
.tm-btn--ghost:hover { background: var(--c-bg-soft); color: var(--c-text); }
.tm-btn--accent { background: var(--c-accent); color: var(--c-dark); }
.tm-btn--accent:hover { background: #e8b91f; color: var(--c-dark); }
.tm-btn--block { width: 100%; }
.tm-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.tm-header { background: var(--c-primary); position: relative; z-index: 500; }

/* 5.1 Thanh tren cung */
.tm-header__top { background: var(--c-primary-dark); padding: 5px 0; }
.tm-header__top .tm-container { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.tm-header__slogan {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm-header__toplinks { display: flex; align-items: center; flex: 0 0 auto; }
.tm-header__toplinks li + li { margin-left: 8px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .4); }
.tm-header__toplinks a,
.tm-header__toplinks span {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
    white-space: nowrap;
}
.tm-header__toplinks a:hover { color: var(--c-accent); }

/* 5.2 Logo + tim kiem + gio hang */
.tm-header__main .tm-container {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.tm-header__logo { flex: 0 0 auto; display: block; }
.tm-header__logo img { max-height: 62px; width: auto; }

.tm-search { flex: 1 1 auto; position: relative; max-width: 700px; }
.tm-search input {
    width: 100%;
    height: 44px;
    padding: 0 54px 0 20px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    color: var(--c-text);
    font-size: 14px;
    outline: none;
}
.tm-search input::placeholder { color: #9a9a9a; }
.tm-search button {
    position: absolute;
    top: 0;
    right: 4px;
    z-index: 3;
    height: 44px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #555;
}
.tm-search button:hover { color: var(--c-primary); }

.tm-header__aside { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; margin-left: auto; }

.tm-hotline { display: flex; align-items: center; gap: 10px; color: #fff; }
.tm-hotline__icon { display: flex; line-height: 1; color: #fff; }
.tm-hotline__text { line-height: 1.25; }
.tm-hotline__label { display: block; font-size: 12px; color: rgba(255, 255, 255, .95); }
.tm-hotline__number { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.tm-hotline__number:hover { color: var(--c-accent); }

.tm-cart {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 22px;
    color: #fff;
}
.tm-header__aside .tm-cart::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, .45);
}
.tm-cart:hover { color: var(--c-accent); }
.tm-cart__count {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--c-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.tm-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 5.3 Menu chinh */
.tm-nav { background: var(--c-primary-dark); }
.tm-nav__list { display: flex; flex-wrap: wrap; align-items: stretch; }
.tm-nav__list > li { position: relative; }
.tm-nav__list > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #fff;
}
.tm-nav__list > li:hover > a { color: var(--c-accent); }
.tm-nav__list > li.is-active > a { color: var(--c-accent); }
.tm-nav__caret { flex: 0 0 auto; transition: transform .2s ease; }
.tm-nav__list > li:hover .tm-nav__caret { transform: rotate(180deg); }

/* Mega menu trai rong bang container, chia cot theo danh muc cha */
.tm-nav .tm-container { position: relative; }
.tm-nav__list > li.tm-nav__has-mega { position: static; }

.tm-nav__mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    z-index: 999;
    max-height: 72vh;
    overflow-y: auto;
    padding: 24px 26px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.tm-nav__list > li:hover .tm-nav__mega { display: block; }

.tm-mega__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 26px;
}
.tm-mega__group { break-inside: avoid; margin-bottom: 14px; }

.tm-mega__title {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--c-dark);
}
.tm-mega__title:hover { color: var(--c-primary); }

.tm-mega__list li + li { margin-top: 2px; }
.tm-mega__list a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
}
.tm-mega__list a:hover { color: var(--c-primary); }

/* Chua co danh muc cha: do deu thanh cot */
.tm-mega__flat { column-count: 4; column-gap: 26px; }
.tm-mega__flat a {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    break-inside: avoid;
}
.tm-mega__flat a:hover { color: var(--c-primary); }

@media (max-width: 1199px) {
    .tm-mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tm-mega__flat { column-count: 3; }
}

/* 5.4 Header mobile */
.tm-header__mobile { display: none; align-items: center; gap: 12px; }
.tm-header__mobile .tm-cart { padding-left: 0; }
.tm-header__mobile .tm-cart__count { top: 0; right: 0; }

.tm-burger, .tm-header__mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}
.tm-burger span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 2px 0;
    border-radius: 1px;
    background: #fff;
}

.tm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: min(85vw, 320px);
    height: 100%;
    overflow-y: auto;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .3s ease;
}
.tm-drawer.is-open { transform: translateX(0); }
.tm-drawer__head { position: relative; padding: 15px; border-bottom: 1px solid var(--c-bg-soft); }
.tm-drawer__head img { max-height: 45px; }
.tm-drawer__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--c-dark);
}
.tm-drawer__list > li { border-bottom: 1px solid rgba(92, 92, 92, .1); }
.tm-drawer__list > li > a {
    display: block;
    padding: 12px 15px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--c-dark);
}
.tm-drawer__list > li.is-active > a { color: var(--c-primary); }
.tm-drawer__sub a { display: block; padding: 9px 15px 9px 30px; font-size: 13px; color: #5c5c5c; }
.tm-drawer__sub a.tm-drawer__parent {
    padding-left: 22px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--c-dark);
}
.tm-drawer__sub a.tm-drawer__child { padding-left: 38px; }

.tm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}
.tm-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   6. THE SAN PHAM
   ========================================================================== */
.tm-product {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background: #fff;
    margin-bottom: 14px;
}
.tm-product__img { position: relative; overflow: hidden; text-align: center; }
.tm-product__img > a { display: block; }
.tm-product__img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .5s ease;
}
.tm-product:hover .tm-product__img img { transform: scale(1.1); }

.tm-product__sale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    height: 25px;
    line-height: 25px;
    padding: 0 8px;
    border-radius: var(--radius);
    background: var(--c-sale);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
}

.tm-product__actions {
    position: absolute;
    left: 0;
    bottom: -10%;
    z-index: 2;
    display: flex;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}
.tm-product:hover .tm-product__actions { opacity: 1; visibility: visible; bottom: 0; }
.tm-product__actions button {
    flex: 1 1 0;
    width: 100%;
    padding: 8px 5px;
    border: 0;
    border-radius: 0;
    background: var(--c-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
    transition: background .2s ease;
}
.tm-product__actions button + button { margin-left: 5px; }
.tm-product__actions button:hover { background: var(--c-primary-dark); }

.tm-product__detail { padding: 10px 5px 4px; text-align: center; }
.tm-product__name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    /* giu 2 dong de cac the trong hang thang nhau */
    min-height: 2.7em;
}
.tm-product__name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--c-text);
}
.tm-product__name a:hover { color: var(--c-primary); }
.tm-product__price { margin: 0; font-size: 16px; font-weight: 600; color: var(--c-primary); }
.tm-product__price del { margin-left: 6px; font-size: 13px; font-weight: 400; color: #bbb; }

/* ==========================================================================
   7. SECTION TRANG CHU
   ========================================================================== */
.tm-section { padding: 20px 0; }
.tm-section--soft { background: var(--c-bg-soft); }

.tm-section__head { margin-bottom: 14px; text-align: left; }
.tm-section__tag {
    display: inline-block;
    margin: 0 0 4px;
    padding: 6px 15px;
    border-radius: var(--radius);
    background: var(--c-accent);
    color: #000;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tm-section__title {
    margin: 0;
    padding-top: 10px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--c-heading);
}
.tm-section__title a { color: var(--c-heading); }
.tm-section__title a:hover { color: var(--c-primary); }
.tm-section__desc {
    margin: 6px 0 0;
    max-width: 45%;
    font-size: 16px;
    color: var(--c-light);
}

/* Tieu de co ban (section danh muc) */
.tm-section__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}
.tm-section__bar h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--c-heading);
}
.tm-section__links { display: flex; flex-wrap: wrap; align-items: center; }
.tm-section__links li + li { margin-left: 5px; padding-left: 5px; border-left: 1px solid rgba(0, 0, 0, .1); }
.tm-section__links a { font-size: 13px; font-weight: 400; color: var(--c-text); }
.tm-section__links a:hover { color: var(--c-primary); }

/* 7.1 Slider hero */
.tm-hero { position: relative; overflow: hidden; }
.tm-hero__track { display: flex; transition: transform .5s ease; }
.tm-hero__slide { flex: 0 0 100%; }
.tm-hero__slide img { width: 100%; aspect-ratio: 1920 / 620; object-fit: cover; }
.tm-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.tm-hero__dots button {
    width: 10px; height: 10px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}
.tm-hero__dots button.is-active { background: var(--c-primary); }

/* 7.2 Banner khuyen mai */
.tm-banner { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
.tm-banner img { width: 100%; transition: transform .5s ease; }
.tm-banner:hover img { transform: scale(1.05); }
.tm-banner__body { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); max-width: 60%; }
.tm-banner__title { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: #fff; }
.tm-banner__text { margin: 0 0 12px; font-size: 14px; color: rgba(255, 255, 255, .9); }

/* 7.3 Bai viet */
.tm-post { background: #fff; }
.tm-post__img { display: block; overflow: hidden; border-radius: var(--radius); }
.tm-post__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.tm-post:hover .tm-post__img img { transform: scale(1.06); }
.tm-post__title { margin: 10px 0 6px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.tm-post__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-heading); }
.tm-post__meta { font-size: 12px; color: var(--c-light); }

/* ==========================================================================
   8. KHOI CATALOG (danh muc + loc + luoi + phan trang)
   ========================================================================== */
.tm-catalog { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tm-catalog__side { flex: 0 0 25%; max-width: 25%; padding: 0 10px; }
.tm-catalog__main { flex: 0 0 75%; max-width: 75%; padding: 0 10px; }

.tm-widget { margin-bottom: 25px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.tm-widget__title {
    margin: 0;
    padding: 12px 15px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: var(--radius) var(--radius) 0 0;
}
.tm-catlist { max-height: 480px; overflow-y: auto; padding: 6px 0; }
.tm-catlist button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 15px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: var(--c-text);
    transition: all .2s ease;
}
.tm-catlist button:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.tm-catlist button.is-active { background: var(--c-bg-soft); color: var(--c-primary); font-weight: 600; }
.tm-catlist img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; flex: 0 0 28px; }
.tm-catlist .tm-catlist__text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tm-sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: var(--c-bg-soft);
    border-radius: var(--radius);
}
.tm-sortbar__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--c-text); }
.tm-sortbar button {
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    transition: all .2s ease;
}
.tm-sortbar button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tm-sortbar button.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.tm-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tm-grid > * { flex: 0 0 25%; max-width: 25%; padding: 0 10px; }
.tm-grid--5 > * { flex: 0 0 20%; max-width: 20%; }
.tm-grid--3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
.tm-grid--2 > * { flex: 0 0 50%; max-width: 50%; }

.tm-empty { width: 100%; padding: 50px 15px; text-align: center; color: var(--c-muted); }

.tm-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; }
.tm-pagination button {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    transition: all .2s ease;
}
.tm-pagination button:hover:not([disabled]) { border-color: var(--c-primary); color: var(--c-primary); }
.tm-pagination button.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.tm-pagination button[disabled] { background: var(--c-bg-soft); color: #aaa; cursor: not-allowed; }
.tm-pagination span { padding: 0 4px; color: var(--c-muted); }

/* Trang thai dang tai */
.tm-loading { width: 100%; padding: 60px 15px; text-align: center; color: var(--c-muted); }
.tm-spinner {
    display: inline-block;
    width: 38px;
    height: 38px;
    border: 3px solid rgba(81, 170, 27, .25);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: tm-spin .8s linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   9. TRANG CHI TIET SAN PHAM
   ========================================================================== */
.tm-breadcrumb { padding: 10px 0; margin-bottom: 10px; border-top: 1px solid var(--c-bg-soft); border-bottom: 1px solid var(--c-bg-soft); }
.tm-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: rgba(112, 126, 137, .7); }
.tm-breadcrumb a { color: #707e89; }
.tm-breadcrumb a:hover { color: var(--c-primary); }
.tm-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #c3cbd1; }

.tm-detail { padding: 20px 0 40px; }
.tm-detail__cols { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tm-detail__main { flex: 0 0 75%; max-width: 75%; padding: 0 10px; }
.tm-detail__side { flex: 0 0 25%; max-width: 25%; padding: 0 10px; }

/* 9.1 Gallery */
.tm-gallery__main {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.tm-gallery__main img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.tm-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tm-gallery__thumbs button {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.tm-gallery__thumbs button.is-active { border-color: var(--c-primary); }
.tm-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 9.2 Thong tin */
.tm-detail__title { margin: 0 0 10px; font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--c-heading); }
.tm-detail__meta { display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 10px; font-size: 13px; color: var(--c-muted); }
.tm-detail__meta span { color: var(--c-text); font-weight: 500; }

.tm-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
}
.tm-price__now { font-size: 28px; font-weight: 600; color: var(--c-primary); }
.tm-price__old { font-size: 14px; color: #bbb; }
.tm-price__old del { color: #bbb; }
.tm-price__save { font-size: 14px; color: var(--c-sale); }

.tm-stock { margin-bottom: 15px; font-size: 13px; }
.tm-stock__label { color: var(--c-muted); }
.tm-stock__value { font-weight: 600; color: var(--c-primary); }
.tm-stock__value.is-out { color: var(--c-sale); }

/* 9.3 Bien the */
.tm-variants { margin-bottom: 18px; }
.tm-variant + .tm-variant { margin-top: 12px; }
.tm-variant__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--c-text); }
.tm-variant__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-variant__opts button {
    padding: 8px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    transition: all .2s ease;
}
.tm-variant__opts button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tm-variant__opts button.is-active { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.tm-variant__opts button[disabled] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* 9.4 So luong + nut mua */
.tm-buybox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px; }
.tm-qty__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.tm-qty__control { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.tm-qty__control button {
    width: 38px;
    height: 46px;
    border: 0;
    background: var(--c-bg-soft);
    font-size: 18px;
    line-height: 1;
    color: var(--c-text);
}
.tm-qty__control button:hover { background: var(--c-border); }
.tm-qty__control input {
    width: 56px;
    height: 46px;
    border: 0;
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    text-align: center;
    outline: none;
}
.tm-buy { flex: 1 1 260px; }
.tm-buy button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 6px 20px;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: #fff;
    transition: background .2s ease;
}
.tm-buy button:hover { background: var(--c-primary-dark); }
.tm-buy button[disabled] { background: #b5b5b5; cursor: not-allowed; }
.tm-buy__main { font-size: 16px; font-weight: 600; text-transform: uppercase; }
.tm-buy__sub { font-size: 12px; font-weight: 400; opacity: .9; }

/* 9.5 Ho tro ben phai */
.tm-support { padding: 20px 15px; text-align: center; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-soft); }
.tm-support__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; text-transform: uppercase; color: var(--c-heading); }
.tm-support__sub { margin: 10px 0 4px; font-size: 13px; font-weight: 400; color: var(--c-muted); }
.tm-support__phone { font-size: 24px; font-weight: 700; color: var(--c-primary); }
.tm-support__or { position: relative; margin: 14px 0; font-size: 12px; color: var(--c-light); }
.tm-support__or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--c-border); }
.tm-support__or span { position: relative; padding: 0 10px; background: var(--c-bg-soft); }

/* 9.6 Tabs mo ta */
.tm-tabs { margin-top: 30px; }
.tm-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-border); }
.tm-tabs__nav button {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--c-muted);
}
.tm-tabs__nav button.is-active { border-color: var(--c-border); background: #fff; color: var(--c-primary); margin-bottom: -1px; }
.tm-tabs__panel { display: none; padding: 20px 0; line-height: 1.7; }
.tm-tabs__panel.is-active { display: block; }
.tm-tabs__panel img { max-width: 100%; height: auto; }

/* 9.7 Thanh mua hang dinh duoi */
.tm-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 8px 0;
    background: #fff;
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    transform: translateY(100%);
    transition: transform .3s ease;
}
.tm-stickybar.is-visible { transform: translateY(0); }
.tm-stickybar .tm-container { display: flex; align-items: center; gap: 15px; }
.tm-stickybar__img { width: 50px; height: 50px; object-fit: cover; border: 1px solid var(--c-border); border-radius: var(--radius); }
.tm-stickybar__info { flex: 1 1 auto; min-width: 0; }
.tm-stickybar__name { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-stickybar__price { font-size: 16px; font-weight: 600; color: var(--c-primary); }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.tm-footer { margin-top: 30px; }

.tm-newsletter { padding: 20px 0; background: var(--c-accent); }
.tm-newsletter .tm-container { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.tm-newsletter__text { flex: 1 1 320px; text-align: center; }
.tm-newsletter__title { margin: 0; font-size: 24px; font-weight: 600; text-transform: uppercase; color: #222; }
.tm-newsletter__sub { margin: 0; font-size: 16px; color: #222; }
.tm-newsletter__form { flex: 1 1 320px; position: relative; }
.tm-newsletter__form input {
    width: 100%;
    height: 50px;
    padding: 0 160px 0 20px;
    border: 0;
    border-radius: 30px;
    background: #fff;
    color: #222;
    outline: none;
}
.tm-newsletter__form button {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: 0 30px 30px 0;
    background: var(--c-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}
.tm-newsletter__form button:hover { background: var(--c-primary-dark); }

.tm-footer__main { padding: 30px 0 20px; background: var(--c-bg-soft); }
.tm-footer__cols { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tm-footer__col { flex: 0 0 25%; max-width: 25%; padding: 0 10px 20px; }
.tm-footer__title { margin: 0 0 12px; font-size: 16px; font-weight: 500; text-transform: uppercase; color: #222; }
.tm-footer__logo { max-width: 200px; margin-bottom: 12px; }
.tm-footer__desc { margin-bottom: 15px; color: var(--c-muted); }
.tm-footer__list li { color: var(--c-muted); }
.tm-footer__list li + li { margin-top: 6px; }
.tm-footer__list a { color: var(--c-muted); }
.tm-footer__list a:hover { color: var(--c-primary); }
.tm-footer__contact li { display: flex; gap: 8px; }
.tm-footer__contact i { flex: 0 0 18px; margin-top: 3px; }

.tm-social { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 18px;
}
.tm-social a:hover { opacity: .85; color: #fff; }
.tm-social .is-facebook a { background: #3b5998; }
.tm-social .is-youtube a { background: #c4302b; }
.tm-social .is-instagram a { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

.tm-copyright { padding: 12px 0; background: #ebebeb; text-align: center; font-size: 13px; color: var(--c-muted); }

.tm-totop {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 800;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.tm-totop.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   11. MODAL THEM VAO GIO
   ========================================================================== */
.tm-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(0, 0, 0, .5);
}
.tm-modal.is-open { display: flex; }
.tm-modal__box {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 6px;
}
.tm-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border);
}
.tm-modal__title { margin: 0; font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--c-heading); }
.tm-modal__close { width: 32px; height: 32px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--c-muted); }
.tm-modal__body { padding: 18px; }
.tm-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--c-border); }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .tm-section__title { font-size: 35px; }
    .tm-section__desc { max-width: 65%; }
    .tm-section__bar h2 { font-size: 26px; }
}

@media (max-width: 991px) {
    .tm-section__desc { max-width: 100%; }
}

@media (max-width: 991px) {
    .tm-hide-mobile { display: none !important; }
    .tm-only-mobile { display: block; }

    .tm-header__main .tm-container { height: auto; margin: 10px auto; gap: 12px; }
    .tm-header__logo img { max-height: 55px; }
    .tm-header__mobile { display: flex; margin-left: auto; }
    .tm-nav { display: none; }

    .tm-catalog__side { flex: 0 0 100%; max-width: 100%; }
    .tm-catalog__main { flex: 0 0 100%; max-width: 100%; }
    .tm-catlist { max-height: 260px; }

    .tm-detail__main, .tm-detail__side { flex: 0 0 100%; max-width: 100%; }
    .tm-grid > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .tm-grid--5 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .tm-footer__col { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 767px) {
    .tm-section { padding: 14px 0; }
    .tm-section__tag { font-size: 12px; }
    .tm-section__title { font-size: 25px; padding-top: 4px; }
    .tm-section__desc { font-size: 13px; max-width: 100%; }
    .tm-section__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tm-section__bar h2 { font-size: 20px; }

    .tm-grid > *, .tm-grid--5 > *, .tm-grid--3 > * { flex: 0 0 50%; max-width: 50%; }
    .tm-product { margin-bottom: 12px; }
    .tm-product__name { font-size: 13px; }
    .tm-product__price { font-size: 15px; }
    /* Mobile khong co hover -> luon hien nut */
    .tm-product__actions { position: static; opacity: 1; visibility: visible; margin-top: 8px; }

    .tm-detail__title { font-size: 19px; }
    .tm-price__now { font-size: 22px; }
    .tm-buybox { flex-direction: column; align-items: stretch; }
    .tm-buy { flex: 1 1 auto; }

    .tm-newsletter__title { font-size: 18px; }
    .tm-newsletter__sub { font-size: 13px; }
    .tm-newsletter__form input { height: 40px; padding-right: 130px; }
    .tm-newsletter__form button { height: 40px; padding: 0 20px; }

    .tm-footer__title { font-size: 14px; }
    .tm-banner__body { left: 15px; max-width: 70%; }
    .tm-banner__title { font-size: 16px; }
    .tm-banner__text { display: none; }
}

@media (max-width: 479px) {
    .tm-grid > *, .tm-grid--5 > *, .tm-grid--3 > *, .tm-grid--2 > * { flex: 0 0 50%; max-width: 50%; }
    .tm-footer__col { flex: 0 0 100%; max-width: 100%; }
    .tm-gallery__thumbs button { width: 58px; height: 58px; }
}

/* ==========================================================================
   13. CAROUSEL
   ========================================================================== */
.tm-carousel { position: relative; }
.tm-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tm-carousel__viewport::-webkit-scrollbar { display: none; }
.tm-carousel__track { display: flex; margin: 0 -10px; }
.tm-carousel__track > * {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 10px;
    scroll-snap-align: start;
}
.tm-carousel__track > .tm-loading,
.tm-carousel__track > .tm-empty { flex: 0 0 100%; max-width: 100%; }

.tm-carousel__nav {
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    color: var(--c-text);
    box-shadow: var(--shadow);
    transition: all .2s ease;
}
.tm-carousel__nav:hover:not([disabled]) { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.tm-carousel__nav[disabled] { opacity: 0; visibility: hidden; }
.tm-carousel__nav.is-prev { left: -8px; }
.tm-carousel__nav.is-next { right: -8px; }

@media (max-width: 991px) {
    .tm-carousel__track > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (max-width: 767px) {
    .tm-carousel__track > * { flex: 0 0 50%; max-width: 50%; }
    .tm-carousel__nav { display: none; }
}

/* ==========================================================================
   14. NOI DUNG MODAL THEM VAO GIO
   (class do engine sinh ra — giu ten cu, chi doi style)
   ========================================================================== */
.add-to-cart-modal-content { display: block; }
.modal-product-details { display: flex; gap: 15px; margin-bottom: 18px; }
.modal-product-image {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.modal-product-info { flex: 1 1 auto; min-width: 0; }
.modal-product-name { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: var(--c-heading); }
.modal-product-price { font-size: 20px; font-weight: 600; color: var(--c-primary); }
.modal-product-unit { font-size: 13px; color: var(--c-muted); }

.modal-stock-info { margin: 10px 0; font-size: 13px; color: var(--c-primary); }
.modal-stock-info .fa-times-circle { color: var(--c-sale); }

.modal-variant-group + .modal-variant-group { margin-top: 12px; }
.modal-variant-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--c-text); }
.modal-variant-values, .modal-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-variant-item {
    padding: 8px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
    transition: all .2s ease;
}
.modal-variant-item:hover { border-color: var(--c-primary); color: var(--c-primary); }
.modal-variant-item.active, .modal-variant-item.selected, .modal-variant-item.is-active {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: #fff;
}
.modal-variant-item.disabled, .modal-variant-item[disabled] {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.modal-quantity-section { margin-top: 16px; }
.modal-quantity-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.modal-quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.btn-quantity {
    width: 38px;
    height: 42px;
    border: 0;
    background: var(--c-bg-soft);
    font-size: 18px;
    line-height: 1;
    color: var(--c-text);
}
.btn-quantity:hover { background: var(--c-border); }
.modal-quantity-input {
    width: 60px;
    height: 42px;
    border: 0;
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    text-align: center;
    outline: none;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Nut "Them vao gio" do engine sinh trong than modal */
.btn-modal-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 180px;
    padding: 11px 24px;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background .2s ease;
}
.btn-modal-update:hover:not([disabled]) { background: var(--c-primary-dark); }
.btn-modal-update[disabled] { background: #b5b5b5; cursor: not-allowed; }

/* ==========================================================================
   15. ALIAS — engine dung .active, theme dung .is-active
   ========================================================================== */
.tm-catlist button.active { background: var(--c-bg-soft); color: var(--c-primary); font-weight: 600; }
.tm-sortbar button.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.tm-pagination button.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.tm-nav__list > li.active > a { background: var(--c-primary); color: #fff; }
.tm-tabs__nav button.active { border-color: var(--c-border); background: #fff; color: var(--c-primary); margin-bottom: -1px; }
.tm-variant__opts button.active { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.tm-gallery__thumbs button.active { border-color: var(--c-primary); }
.tm-hero__dots button.active { background: var(--c-primary); }

/* ==========================================================================
   16. TRANG CHI TIET — class do JS sinh ra (giu ten cu, style moi)
   ========================================================================== */
.tm-detail__gallery, .tm-detail__info { padding: 0 10px; }

/* Bien the */
.variant-options { margin-bottom: 18px; }
.variant-option-group + .variant-option-group { margin-top: 12px; }
.variant-option-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--c-text); }
.variant-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option-item {
    padding: 8px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
    user-select: none;
    transition: all .2s ease;
}
.variant-option-item:hover { border-color: var(--c-primary); color: var(--c-primary); }
.variant-option-item.selected, .variant-option-item.active {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: #fff;
}
.variant-option-item.disabled, .variant-option-item[disabled] {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}
.variant-stock-info, #variant-stock-info { margin-top: 8px; font-size: 13px; color: var(--c-primary); }
.variant-stock-info .fa-times-circle, #variant-stock-info .fa-times-circle { color: var(--c-sale); }

/* Trang thai con/het hang */
.product-status-badge:empty { display: none; }
.product-status-badge .fa-check-circle { color: var(--c-primary); }
.product-status-badge .fa-times-circle { color: var(--c-sale); }

/* So luong */
.quantity-selector { display: block; }
.quantity-input-group { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.quantity-btn {
    width: 38px;
    height: 46px;
    border: 0;
    background: var(--c-bg-soft);
    font-size: 18px;
    line-height: 1;
    color: var(--c-text);
}
.quantity-btn:hover { background: var(--c-border); }
.quantity-input {
    width: 60px;
    height: 46px;
    border: 0;
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Nut mua */
.btn-add-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 6px 20px;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: #fff;
    transition: background .2s ease;
}
.btn-add-cart:hover { background: var(--c-primary-dark); }
.btn-add-cart[disabled] { background: #b5b5b5; cursor: not-allowed; }

/* Cam ket */
.tm-commit { margin-top: 18px; }
.tm-commit li { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--c-muted); }
.tm-commit i { color: var(--c-primary); margin-top: 3px; }

@media (max-width: 767px) {
    .tm-detail__gallery, .tm-detail__info { flex: 0 0 100% !important; max-width: 100% !important; }
    .tm-detail__info { margin-top: 18px; }
    /* Chua cho thanh mua hang dinh duoi */
    body.tm-has-stickybar { padding-bottom: 70px; }
}

/* Trich dan bai viet */
.tm-post__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   17. BOX SAN PHAM THEO DANH MUC
   (tieu de danh muc cha + hang danh muc con + luoi 8 san pham)
   ========================================================================== */
.tm-catbox__head { margin-bottom: 14px; }

.tm-catbox__title {
    margin: 0;
    font-size: 35px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--c-heading);
}

.tm-subcats { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.tm-subcats li + li { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(0, 0, 0, .12); }
.tm-subcats a { font-size: 14px; font-weight: 400; color: var(--c-text); }
.tm-subcats a:hover { color: var(--c-primary); }

/* Luoi 8 san pham: 4 cot x 2 hang, khong slider */
.tm-catbox__grid > * { flex: 0 0 25%; max-width: 25%; }
.tm-catbox__grid > .tm-loading,
.tm-catbox__grid > .tm-empty { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 1199px) {
    .tm-catbox__title { font-size: 30px; }
}

@media (max-width: 991px) {
    .tm-catbox__grid > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 767px) {
    .tm-catbox__title { font-size: 20px; }
    .tm-subcats a { font-size: 13px; }
    .tm-catbox__grid > * { flex: 0 0 50%; max-width: 50%; }
}

/* ==========================================================================
   18. TRANG DANH MUC (render san server -> dung <a> thay vi <button>)
   ========================================================================== */
.tm-catlist__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    font-size: 14px;
    color: var(--c-text);
    border-bottom: 1px solid #f1f1f1;
    transition: all .2s ease;
}
.tm-catlist__link:last-child { border-bottom: 0; }
.tm-catlist__link:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.tm-catlist__link.active { background: var(--c-bg-soft); color: var(--c-primary); font-weight: 600; }

.tm-sortbar__link {
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    transition: all .2s ease;
}
.tm-sortbar__link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tm-sortbar__link.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.tm-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    color: var(--c-text);
    transition: all .2s ease;
}
.tm-pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Trang danh muc: tieu de nho hon trang chu */
.tm-catalog__main .tm-catbox__title { font-size: 26px; }

@media (max-width: 767px) {
    .tm-catalog__main .tm-catbox__title { font-size: 19px; }
}

/* ==========================================================================
   19. TRANG CHI TIET BAI VIET
   ========================================================================== */
.tm-article__title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-heading);
}
.tm-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    color: var(--c-muted);
}
.tm-article__meta i { margin-right: 5px; color: var(--c-primary); }

.tm-article__thumb { margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; }
.tm-article__thumb img { width: 100%; height: auto; display: block; }

.tm-article__sapo {
    margin: 0 0 18px;
    padding-left: 14px;
    border-left: 3px solid var(--c-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-text);
    font-weight: 500;
}

.tm-article__body { font-size: 15px; line-height: 1.8; color: var(--c-text); }
.tm-article__body p { margin: 0 0 14px; }
.tm-article__body h2 { margin: 24px 0 12px; font-size: 22px; font-weight: 600; }
.tm-article__body h3 { margin: 20px 0 10px; font-size: 18px; font-weight: 600; }
.tm-article__body ul,
.tm-article__body ol { margin: 0 0 14px; padding-left: 22px; list-style: revert; }
.tm-article__body li { margin-bottom: 6px; }
.tm-article__body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 10px 0; }
.tm-article__body a { color: var(--c-primary); text-decoration: underline; }
.tm-article__body blockquote {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 3px solid var(--c-accent);
    background: var(--c-bg-soft);
}
.tm-article__body table { margin-bottom: 14px; }
.tm-article__body td,
.tm-article__body th { border: 1px solid var(--c-border); padding: 8px 10px; }

@media (max-width: 767px) {
    .tm-article__title { font-size: 22px; }
    .tm-article__sapo { font-size: 15px; }
}

/* ==========================================================================
   20. FLASH SALE
   ========================================================================== */
.tm-flash {
    padding: 20px 0;
    background: linear-gradient(135deg, #e01212 0%, #ff6a00 100%);
}
.tm-flash[hidden] { display: none !important; }

.tm-flash__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tm-flash__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-flash__icon { font-size: 26px; line-height: 1; }
.tm-flash__name {
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
}
.tm-flash__badge {
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--c-accent);
    color: #1c1c1c;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.tm-flash__timer { display: flex; align-items: center; gap: 10px; }
.tm-flash__timer-label { font-size: 13px; color: rgba(255, 255, 255, .9); }
.tm-flash__clock {
    padding: 6px 14px;
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tm-flash__desc {
    margin: -6px 0 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
}

/* The san pham trong flash sale nam tren nen do -> bo nen trang cho noi */
.tm-flash .tm-product { border-radius: var(--radius); }
.tm-flash .tm-carousel__nav {
    background: #fff;
    border-color: #fff;
}

@media (max-width: 767px) {
    .tm-flash__name { font-size: 19px; }
    .tm-flash__icon { font-size: 20px; }
    .tm-flash__clock { font-size: 14px; padding: 5px 10px; }
    .tm-flash__head { gap: 8px; }
}

/* ==========================================================================
   21. TUONG THICH BOOTSTRAP
   Cac trang cu (gio hang, thanh toan, trang loi) dung class cua Bootstrap.
   Theme khong nap Bootstrap nen phai dinh nghia toi thieu nhung class do,
   neu khong noi dung se trai het chieu ngang va form bi vo.
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.row > [class*="col-"] { padding: 0 15px; }

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-6, .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }

.form-group { margin-bottom: 16px; }
.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    outline: none;
    transition: border-color .2s ease;
}
.form-control:focus { border-color: var(--c-primary); }
.form-control::placeholder { color: #9a9a9a; }
textarea.form-control { min-height: 96px; resize: vertical; }

.text-danger { color: var(--c-sale); }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

.mb-3 { margin-bottom: 16px; }
.mt-3 { margin-top: 16px; }

@media (max-width: 991px) {
    .col-md-6, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   22. TRANG LIEN HE
   ========================================================================== */
.tm-contact { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }

.tm-contact__info {
    flex: 0 0 320px;
    max-width: 320px;
    padding: 22px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
}
.tm-contact__info-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--c-heading);
}
.tm-contact__list li { display: flex; gap: 12px; }
.tm-contact__list li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tm-contact__list i { flex: 0 0 20px; margin-top: 3px; font-size: 16px; color: var(--c-primary); }
.tm-contact__list span { display: block; font-size: 12px; text-transform: uppercase; color: var(--c-muted); }
.tm-contact__list p { margin: 2px 0 0; font-size: 14px; color: var(--c-text); line-height: 1.5; }

.tm-contact__form { flex: 1 1 420px; min-width: 0; }
.tm-contact__title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-heading);
}
.tm-contact__desc {
    max-width: 560px;
    margin: 0 auto 26px;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-muted);
}

.tm-field-row { display: flex; flex-wrap: wrap; gap: 20px; }
.tm-field-row > .tm-field { flex: 1 1 240px; min-width: 0; }

.tm-field { margin-bottom: 18px; }
.tm-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text);
}
.tm-required { color: var(--c-sale); }
.tm-field input,
.tm-field textarea {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 14px;
    color: var(--c-text);
    outline: none;
    transition: border-color .2s ease;
}
.tm-field input:focus,
.tm-field textarea:focus { border-color: var(--c-primary); }
.tm-field input::placeholder,
.tm-field textarea::placeholder { color: #9a9a9a; }
.tm-field textarea { resize: vertical; min-height: 150px; }

.tm-contact__submit {
    margin-top: 6px;
    padding: 15px 20px;
    font-size: 15px;
    letter-spacing: 1px;
}

/* Thong bao sau khi gui */
.tm-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
}
.tm-alert i { font-size: 17px; }
.tm-alert--success { background: #eaf6e3; border: 1px solid #bcdfa8; color: #2f6a17; }
.tm-alert--error { background: #fdeaea; border: 1px solid #f3b9b9; color: #a51d1d; }

@media (max-width: 991px) {
    .tm-contact__info { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 767px) {
    .tm-contact__title { font-size: 22px; }
    .tm-contact__desc { font-size: 14px; }
}

/* Loi validate tung truong */
.tm-field input.is-invalid,
.tm-field textarea.is-invalid { border-color: var(--c-sale); background: #fffafa; }
.tm-field__error { margin: 6px 0 0; font-size: 13px; color: var(--c-sale); }