/* ==========================================================================
   HOMEPAGE STYLES (Thú Y An Nhung - Figma Node ID: 2539:87934)
   Format: CSS-Compact (1 dòng / 1 selector)
   ========================================================================== */

/* Main Wrapper */
.tan-home-main {
   background: #f8fafb;
   padding: 0 0 60px;
   font-family: 'Be Vietnam Pro', sans-serif;
   color: #232a2c;
}

.tan-home-main .container {
   max-width: 1230px;
   margin: 0 auto;
   padding: 0 15px;
}

.tan-home-store-section a.tan-btn-zalo-pill {
   width: 100%;
   background: #0e9494;
   justify-content: center;
}

/* Section Headers Chung */
.tan-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 0 20px;
}

.tan-section-title-wrap {
   display: flex;
   align-items: center;
   gap: 12px;
}

.tan-section-bar {
   display: inline-block;
   width: 6px;
   height: 20px;
   background: #18B4B4;
   border-radius: 4px;
}

.tan-section-title {
   font-size: 20px;
   font-weight: 700;
   color: #232a2c;
   margin: 0;
   line-height: 1.2;
}

.tan-section-view-all {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 13.5px;
   font-weight: 600;
   color: #0e9494;
   text-decoration: none;
   transition: all 0.2s;
}

.tan-section-view-all:hover {
   color: #096868;
   transform: translateX(3px);
}

/* 1. Hero Section */
.tan-home-hero-section {
   padding: 25px 0 20px;
}

.tan-hero-grid {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 20px;
   align-items: stretch;
}

.tan-hero-sidebar {
   background: #ffffff;
   border-radius: 12px;
   border: 1px solid #e9edef;
   box-shadow: 0 4px 16px 0 rgba(20, 45, 45, 0.04);
   overflow: hidden;
}

.tan-hero-cat-title {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 14px 18px;
   background: #0e9494;
   color: #ffffff;
   font-size: 13.5px;
   font-weight: 700;
   letter-spacing: 0.5px;
}

.tan-hero-cat-list {
   list-style: none;
   margin: 0;
   padding: 6px 0;
}

.tan-hero-cat-item {
   margin: 0;
   padding: 0;
}

.tan-hero-cat-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 18px;
   color: #384043;
   font-size: 13.5px;
   font-weight: 500;
   text-decoration: none;
   transition: all 0.15s;
}

.tan-hero-cat-link:hover {
   background: #f6fbfc;
   color: #0e9494;
   padding-left: 22px;
}

.tan-hero-banner-wrap {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   display: flex;
}

.tan-hero-banner {
   position: relative;
   border-radius: 12px;
   padding: 50px 45px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
   box-shadow: 0 8px 24px 0 rgba(14, 148, 148, 0.18);
   width: 100%;
   min-height: 380px;
   background: linear-gradient(135deg, #0d7377 0%, #0e9494 50%, #14b8a6 100%);
}

.tan-hero-banner:before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
   pointer-events: none;
   z-index: 1;
}

.tan-hero-banner.has-slides {
   background: transparent;
   box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
}

.tan-hero-banner.has-slides:before {
   display: none;
}

.tan-hero-banner .tan-slider-track {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.tan-slide-item {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
   pointer-events: none;
}

.tan-slide-item.is-active {
   opacity: 1;
   pointer-events: auto;
}

.tan-slide-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.tan-hero-banner-content {
   position: relative;
   z-index: 5;
   max-width: 560px;
}

.tan-hero-tag {
   display: inline-block;
   padding: 4px 14px;
   background: rgba(255, 255, 255, 0.92);
   color: #e31e24;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.5px;
   margin-bottom: 14px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   line-height: 1.5;
}

.tan-hero-title {
   color: #ffffff;
   font-size: 32px;
   font-weight: 800;
   line-height: 1.25;
   margin: 0 0 14px;
}

.tan-hero-desc {
   color: rgba(255, 255, 255, 0.9);
   font-size: 15px;
   line-height: 1.55;
   margin: 0 0 24px;
}

.tan-hero-actions {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}

.tan-slider-dots {
   position: absolute;
   bottom: 20px;
   left: 45px;
   display: flex;
   align-items: center;
   gap: 8px;
   z-index: 10;
}

.tan-slider-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   min-width: 10px;
   min-height: 10px;
   max-width: 26px;
   max-height: 10px;
   padding: 0;
   margin: 0;
   border: none;
   outline: none;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.55);
   cursor: pointer;
   transition: all 0.35s ease;
   box-sizing: border-box;
}

.tan-slider-dot.is-active {
   width: 26px;
   background: rgba(255, 255, 255, 1);
}

.tan-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 22px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   transition: all 0.2s;
   cursor: pointer;
   line-height: 1;
}

.tan-btn-primary {
   background: #e31e24;
   color: #ffffff;
   border: none;
   box-shadow: 0 4px 14px rgba(227, 30, 36, 0.32);
}

.tan-btn-primary:hover {
   background: #c01318;
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(227, 30, 36, 0.4);
   color: #ffffff;
}

/* 2. Values Bar */
.tan-home-values-section {
   border-top: 1px solid #E9EDEF;
   border-bottom: 1px solid #E9EDEF;
   background: #F5F8F8;
}

.tan-values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   padding: 18px 24px;
}

.tan-value-item {
   display: flex;
   align-items: center;
   gap: 14px;
}

.tan-value-icon {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 12px;
   border: 1px solid #E9EDEF;
   background: #FFF;
}

.tan-value-text strong {
   display: block;
   font-size: 14px;
   font-weight: 700;
   color: #232a2c;
   margin-bottom: 0;
}

.tan-value-text span {
   display: block;
   font-size: 12.5px;
   color: #6b787b;
}

/* 3. Shop By Animal */
.tan-home-animal-section {
   padding: 15px 0 25px;
}

.tan-animal-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 14px;
}

.tan-animal-card {
   background: #ffffff;
   border-radius: 12px;
   border: 1px solid #e9edef;
   padding: 16px 12px;
   text-align: center;
   text-decoration: none;
   box-shadow: 0 4px 14px 0 rgba(20, 45, 45, 0.03);
   transition: all 0.2s;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.tan-animal-card:hover {
   transform: translateY(-3px);
   border-color: #0e9494;
   box-shadow: 0 8px 20px 0 rgba(14, 148, 148, 0.12);
}

.tan-animal-icon-wrap {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #f6fbfc;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
   transition: background 0.2s;
}

.tan-animal-card:hover .tan-animal-icon-wrap {
   background: #e8f5f5;
}

.tan-animal-icon {
   font-size: 28px;
   line-height: 1;
}

.tan-animal-name {
   font-size: 14px;
   font-weight: 700;
   color: #232a2c;
   margin: 0 0 2px;
}

.tan-animal-sub {
   font-size: 12px;
   color: #8c979a;
}

/* 4. Featured Categories (4 Cards) */
.tan-home-featured-cats-section {
   padding: 10px 0 25px;
}

.tan-featured-cats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}

.tan-featured-cat-card {
   position: relative;
   border-radius: 14px;
   overflow: hidden;
   min-height: 156px;
   padding: 18px 20px;
   text-decoration: none;
   box-shadow: 0 4px 16px 0 rgba(20, 45, 45, 0.06);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
}

.tan-featured-cat-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 28px 0 rgba(20, 45, 45, 0.18);
}

.tan-featured-cat-bg-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
   transition: transform 0.5s ease;
}

.tan-featured-cat-card:hover .tan-featured-cat-bg-img {
   transform: scale(1.08);
}

.tan-featured-cat-card.no-image.tan-cat-theme-red {
   background: linear-gradient(135deg, #c31e24 0%, #e31e24 100%);
}

.tan-featured-cat-card.no-image.tan-cat-theme-cyan {
   background: linear-gradient(135deg, #0d7377 0%, #0e9494 100%);
}

.tan-featured-cat-card.no-image.tan-cat-theme-green {
   background: linear-gradient(135deg, #107a3c 0%, #16a34a 100%);
}

.tan-featured-cat-card.no-image.tan-cat-theme-amber {
   background: linear-gradient(135deg, #c26508 0%, #d97706 100%);
}

.tan-featured-cat-content {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1;
}

.tan-featured-cat-count {
   align-self: flex-start;
   display: inline-block;
   padding: 6px 12px 4px 12px;
   background: #ffffff;
   color: #232a2c;
   border-radius: 999px;
   font-size: 11.5px;
   font-weight: 700;
   line-height: 1;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.tan-featured-cat-name {
   font-size: 17px;
   font-weight: 700;
   color: #ffffff;
   line-height: 1.3;
   margin: 18px 0 0;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 5. Flash Sale With Countdown */
.tan-home-flash-sale-section {
   padding: 15px 0 25px;
}

.tan-flash-sale-box {
   background: linear-gradient(135deg, #c31e24 0%, #e31e24 50%, #ea2e34 100%);
   border-radius: 18px;
   padding: 24px 22px 26px;
   box-shadow: 0 8px 26px 0 rgba(227, 30, 36, 0.22);
}

.tan-flash-sale-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 0 20px;
   flex-wrap: wrap;
   gap: 12px;
}

.tan-flash-sale-title-wrap {
   display: flex;
   align-items: center;
   gap: 10px;
}

.tan-flash-icon-badge {
   display: flex;
   align-items: center;
   justify-content: center;
}

.tan-flash-sale-title {
   font-size: 22px;
   font-weight: 800;
   color: #ffffff;
   margin: 0;
   line-height: 1;
   letter-spacing: -0.2px;
}

.tan-countdown-wrap {
   display: flex;
   align-items: center;
   gap: 8px;
}

.tan-countdown-label {
   font-size: 13.5px;
   color: #ffffff;
   font-weight: 500;
}

.tan-countdown-boxes {
   display: flex;
   align-items: center;
   gap: 5px;
}

.tan-countdown-box {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 32px;
   height: 28px;
   background: #ffffff;
   color: #e31e24;
   border-radius: 6px;
   font-size: 13.5px;
   font-weight: 800;
   padding: 0 5px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
   line-height: 1;
}

.tan-countdown-colon {
   font-size: 14px;
   font-weight: 800;
   color: #ffffff;
}

.tan-flash-sale-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 14px;
}

.tan-flash-card {
   background: #ffffff;
   border-radius: 12px;
   border: none;
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.06);
   overflow: hidden;
   transition: all 0.25s;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.tan-flash-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 26px 0 rgba(0, 0, 0, 0.16);
}

.tan-flash-card .tan-product-thumb-wrap {
   position: relative;
   padding-top: 100%;
   background: #f5f8f8;
   overflow: hidden;
}

.tan-flash-card .tan-product-thumb-link {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px;
}

.tan-flash-card .tan-product-thumb-link img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform 0.3s;
}

.tan-flash-card:hover .tan-product-thumb-link img {
   transform: scale(1.06);
}

.tan-flash-card .tan-product-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   background: #e31e24;
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
   padding: 3px 7px;
   border-radius: 6px;
   z-index: 2;
   line-height: 1;
}

.tan-flash-card .tan-quick-view-btn {
   position: absolute;
   bottom: -35px;
   left: 50%;
   transform: translateX(-50%);
   background: #18b4b4;
   color: #ffffff;
   font-size: 11.5px;
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 6px;
   text-decoration: none;
   transition: all 0.25s;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   white-space: nowrap;
   box-shadow: 0 3px 8px rgba(24, 180, 180, 0.35);
}

.tan-flash-card:hover .tan-quick-view-btn {
   bottom: 10px;
}

.tan-flash-card .tan-quick-view-btn:hover {
   background: #0e9494;
   color: #ffffff;
}

.tan-flash-card .tan-product-info {
   padding: 12px 14px 14px;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.tan-product-cat {
   font-size: 11px;
   font-weight: 700;
   color: #0e9494;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   margin-bottom: 4px;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tan-flash-card .tan-product-name {
   font-size: 13px;
   font-weight: 700;
   line-height: 1.35;
   margin: 0 0 6px;
   height: 35px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.tan-flash-card .tan-product-name a {
   color: #232a2c;
   text-decoration: none;
   transition: color 0.2s;
}

.tan-flash-card .tan-product-name a:hover {
   color: #e31e24;
}

.tan-product-rating {
   color: #f59e0b;
   font-size: 12px;
   letter-spacing: 1px;
   margin-bottom: 8px;
   line-height: 1;
}

.tan-flash-card .tan-product-price-box {
   margin-bottom: 10px;
   min-height: 26px;
   display: flex;
   align-items: baseline;
   gap: 8px;
   flex-wrap: wrap;
   line-height: 1.3;
}

.tan-flash-card .tan-product-price-box .screen-reader-text {
   display: none !important;
}

.tan-product-price-box .woocommerce-Price-amount {
   font-size: 15px;
   font-weight: 700;
   color: #e31e24;
}

.tan-flash-card .tan-product-price-box ins {
   display: inline-block;
   order: 1;
   text-decoration: none;
}

.tan-flash-card .tan-product-price-box ins .woocommerce-Price-amount,
.tan-flash-card .tan-product-price-box ins .woocommerce-Price-amount bdi {
   color: #e31e24;
   font-size: 15.5px;
   font-weight: 800;
   text-decoration: none;
}

.tan-flash-card .tan-product-price-box del {
   display: inline-block;
   order: 2;
   color: #94a3b8;
   font-size: 12px;
   font-weight: 400;
   text-decoration: line-through;
   line-height: 1.2;
}

.tan-flash-card .tan-product-price-box del .woocommerce-Price-amount,
.tan-flash-card .tan-product-price-box del .woocommerce-Price-amount bdi {
   color: #94a3b8;
   font-size: 12px;
   font-weight: 400;
   text-decoration: line-through;
}

.tan-btn-add-to-cart {
   width: 100%;
   padding: 8px 12px;
   border-radius: 8px;
   border: 1px solid #e9edef;
   background: #ffffff;
   color: #232a2c;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   text-decoration: none;
   transition: all 0.2s;
   cursor: pointer;
   line-height: 1;
   box-sizing: border-box;
}

.tan-btn-add-to-cart:hover {
   background: #e31e24;
   color: #ffffff;
   border-color: #e31e24;
}

/* Product Grid & Card Chung (Section 5, 6, 8) */
.tan-product-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
}

.tan-product-slider {
   position: relative;
   margin: 0 -8px;
}

.tan-product-slider:not(.flickity-enabled) {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding: 4px 8px 10px;
}

.tan-product-slider:not(.flickity-enabled)::-webkit-scrollbar {
   display: none;
}

.tan-product-slider:not(.flickity-enabled) .tan-product-card {
   flex: 0 0 calc(20% - 16px) !important;
   scroll-snap-align: start;
}

.tan-product-slider .flickity-viewport {
   overflow: hidden !important;
   width: 100%;
   position: relative;
   transition: height 0.25s;
}

.tan-product-slider .flickity-slider>.tan-product-card,
.tan-product-slider .tan-product-card {
   width: calc(20% - 16px) !important;
   max-width: calc(20% - 16px) !important;
   margin: 0 8px !important;
   flex: 0 0 calc(20% - 16px) !important;
   flex-shrink: 0 !important;
   box-sizing: border-box !important;
}

.tan-product-card {
   background: #ffffff;
   border-radius: 12px;
   border: 1px solid #e9edef;
   box-shadow: 0 4px 14px 0 rgba(20, 45, 45, 0.03);
   overflow: hidden;
   transition: all 0.2s;
   display: flex;
   flex-direction: column;
}

.tan-product-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 24px 0 rgba(20, 45, 45, 0.08);
   border-color: #0e9494;
}

.tan-product-thumb-wrap {
   position: relative;
   padding-top: 100%;
   background: #f8fafb;
   overflow: hidden;
}

.tan-product-thumb-link {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px;
}

.tan-product-thumb-link img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform 0.3s;
}

.tan-product-card:hover .tan-product-thumb-link img {
   transform: scale(1.05);
}

.tan-product-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   background: #e31e24;
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
   padding: 3px 7px;
   border-radius: 4px;
   z-index: 2;
}

.tan-badge-outstock {
   background: #5b4d75 !important;
   color: #ffffff !important;
}

.tan-badge-new {
   background: #0e9494;
}

.tan-quick-view-btn {
   position: absolute;
   bottom: -35px;
   left: 10px;
   right: 10px;
   background: rgba(35, 42, 44, 0.85);
   color: #ffffff;
   font-size: 12px;
   font-weight: 600;
   padding: 7px 0;
   text-align: center;
   border-radius: 6px;
   text-decoration: none;
   transition: all 0.2s;
   z-index: 2;
   backdrop-filter: blur(4px);
}

.tan-product-card:hover .tan-quick-view-btn {
   bottom: 10px;
}

.tan-quick-view-btn:hover {
   background: #0e9494;
   color: #ffffff;
}

.tan-product-info {
   padding: 14px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.tan-product-name {
   font-size: 13.5px;
   font-weight: 600;
   line-height: 1.45;
   margin: 0 0 10px;
   height: 38px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.tan-product-name a {
   color: #232a2c;
   text-decoration: none;
   transition: color 0.2s;
}

.tan-product-name a:hover {
   color: #0e9494;
}

.tan-product-price-box {
   margin-top: auto;
   display: flex;
   align-items: baseline;
   gap: 8px;
   flex-wrap: wrap;
   line-height: 1.3;
}

.tan-product-price-box .screen-reader-text {
   display: none !important;
}

.tan-product-price-box .woocommerce-Price-amount {
   font-size: 14.5px;
   font-weight: 700;
   color: #e31e24;
}

.tan-product-price-box ins {
   display: inline-block;
   order: 1;
   text-decoration: none;
}

.tan-product-price-box ins .woocommerce-Price-amount,
.tan-product-price-box ins .woocommerce-Price-amount bdi {
   color: #e31e24;
   font-size: 15px;
   font-weight: 800;
   text-decoration: none;
}

.tan-product-price-box del {
   display: inline-block;
   order: 2;
   color: #94a3b8;
   font-size: 12px;
   font-weight: 400;
   text-decoration: line-through;
   line-height: 1.2;
}

.tan-product-price-box del .woocommerce-Price-amount,
.tan-product-price-box del .woocommerce-Price-amount bdi {
   color: #94a3b8;
   font-size: 12px;
   font-weight: 400;
   text-decoration: line-through;
}

/* 6. Best Sellers */
.tan-home-best-sellers-section {
   padding: 15px 0 25px;
}

/* 7. Wholesale B2B Banner */
.tan-home-b2b-section {
   padding: 15px 0 25px;
}

.tan-b2b-card {
   background: linear-gradient(135deg, #0d7377 0%, #0e9494 100%);
   border-radius: 14px;
   padding: 30px 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px;
   box-shadow: 0 8px 24px 0 rgba(14, 148, 148, 0.2);
}

.tan-b2b-content {
   display: flex;
   align-items: center;
   gap: 20px;
}

.tan-b2b-icon {
   width: 60px;
   height: 60px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.tan-b2b-title {
   color: #ffffff;
   font-size: 22px;
   font-weight: 800;
   margin: 0 0 6px;
}

.tan-b2b-desc {
   color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
   line-height: 1.5;
   margin: 0;
}

.tan-btn-white-pill {
   background: #ffffff;
   color: #0e9494;
   border: none;
   border-radius: 999px;
   padding: 12px 28px;
   font-size: 14.5px;
   font-weight: 700;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
   white-space: nowrap;
}

.tan-btn-white-pill:hover {
   background: #f0fbfb;
   color: #0a6b6b;
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* 8. New Products */
.tan-home-new-products-section {
   padding: 15px 0 25px;
}

/* 9. Blog Section */
.tan-home-blog-section {
   padding: 15px 0 25px;
}

.tan-blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.tan-blog-card {
   background: #ffffff;
   border-radius: 12px;
   border: 1px solid #e9edef;
   box-shadow: 0 4px 14px 0 rgba(20, 45, 45, 0.03);
   overflow: hidden;
   transition: all 0.2s;
   display: flex;
   flex-direction: column;
}

.tan-blog-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 24px 0 rgba(20, 45, 45, 0.08);
   border-color: #d4dcde;
}

.tan-blog-thumb-wrap {
   position: relative;
   padding-top: 56.25%;
   overflow: hidden;
   background: #f5f7f8;
}

.tan-blog-thumb-link {
   position: absolute;
   inset: 0;
}

.tan-blog-thumb-link img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s;
}

.tan-blog-card:hover .tan-blog-thumb-link img {
   transform: scale(1.05);
}

.tan-blog-thumb-empty {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #e9edef 0%, #f5f7f8 100%);
}

.tan-blog-info {
   padding: 18px 20px 16px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.tan-blog-cat-wrap {
   margin-bottom: 10px;
}

.tan-blog-cat-badge {
   display: inline-block;
   padding: 3px 10px;
   background: #e4f7f7;
   color: #0e9494;
   font-size: 11.5px;
   font-weight: 700;
   border-radius: 999px;
   line-height: 1.4;
}

.tan-blog-title {
   font-size: 15px;
   font-weight: 700;
   line-height: 1.4;
   margin: 0 0 8px;
   height: 42px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.tan-blog-title a {
   color: #232a2c;
   text-decoration: none;
   transition: color 0.2s;
}

.tan-blog-title a:hover {
   color: #0e9494;
}

.tan-blog-excerpt {
   font-size: 13px;
   color: #6b787b;
   line-height: 1.5;
   margin: 0 0 14px;
   height: 39px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.tan-blog-footer {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: auto;
   font-size: 12px;
   color: #8c979a;
}

.tan-blog-date,
.tan-blog-views {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

/* 10. Store Info & Map Card */
.tan-home-store-section {
   padding: 15px 0 10px;
}

.tan-store-card-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
}

.tan-store-info-card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 28px;
   border-radius: 14px;
   border: 1px solid #E9EDEF;
   background: #FFF;
   box-shadow: 0 6px 22px 0 rgba(20, 45, 45, 0.07);
}

.tan-store-header {
   margin-bottom: 20px;
}

.tan-store-title {
   font-size: 24px;
   font-weight: 800;
   color: #232a2c;
   margin: 0 0 6px;
}

.tan-store-slogan {
   font-size: 14px;
   color: #6b787b;
   margin: 0;
}

.tan-store-details {
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-bottom: 24px;
}

.tan-store-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.tan-store-item-icon {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   background: #e8f5f5;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 2px;
}

.tan-store-item-content {
   flex: 1;
}

.tan-store-label {
   display: block;
   font-size: 12px;
   color: #8c979a;
   margin-bottom: 2px;
}

.tan-store-item-content strong {
   font-size: 14px;
   color: #232a2c;
   font-weight: 600;
}

.tan-store-item-content a {
   color: #232a2c;
   text-decoration: none;
   transition: color 0.2s;
}

.tan-store-item-content a:hover {
   color: #0e9494;
}

.tan-btn-zalo-pill {
   background: #0e9494;
   color: #ffffff;
   border: none;
   border-radius: 999px;
   padding: 12px 28px;
   font-size: 14px;
   font-weight: 700;
   box-shadow: 0 4px 14px rgba(14, 148, 148, 0.25);
}

.tan-btn-zalo-pill:hover {
   background: #0b7a7a;
   transform: translateY(-2px);
   color: #ffffff;
}

.tan-store-map-card {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #e9edef;
   position: relative;
   min-height: 300px;
   box-shadow: 0 6px 22px 0 rgba(20, 45, 45, 0.07);
}

.tan-map-overlay-badge {
   position: absolute;
   bottom: 12px;
   left: 12px;
   right: 12px;
   background: #ffffff;
   padding: 10px 14px;
   border-radius: 8px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12.5px;
   font-weight: 600;
   color: #232a2c;
   text-decoration: none;
   pointer-events: auto;
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.tan-map-overlay-badge:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
   background: #f8fafc;
   color: #0e9494;
}