/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1
*/

/*************** DESIGN SYSTEM VARIABLES ***************/
:root {
  --color-primary: #D61C23;
  --color-secondary-bg: #FFFCE6;
  --color-accent: #F5A623;
  --color-text-main: #222222;
  --color-text-body: #555555;
  --color-white: #FFFFFF;
}

/*************** SYSTEM FONTS ***************/
body, h1, h2, h3, h4, h5, h6, p, a, span, button {
  font-family: 'Be Vietnam Pro', sans-serif !important;
}

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
}

/*************** SECTION HEADINGS ***************/
.manhty-section-title,
.manhty-section-title h2,
.manhty-section-title h3 {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/*************** THANH CAM KẾT (Flatsome icon-box dạng pill viền đỏ) ***************/
/* Target icon-box có custom class footer-item/futer-item (bọc trong UX Builder) */
.icon-box.footer-item,
.icon-box.futer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 20px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-box.footer-item:hover,
.icon-box.futer-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(214, 28, 35, 0.15);
}

/* Icon bên trái: tròn nền kem; ép kích thước (đè inline width của UX Builder) */
.icon-box.footer-item .icon-box-img,
.icon-box.futer-item .icon-box-img {
  margin: 0 !important;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-secondary-bg);
}

.icon-box.footer-item .icon-box-img .icon,
.icon-box.futer-item .icon-box-img .icon { margin: 0; width: auto; }

/* Ảnh icon: thu về vừa vòng tròn, giữ tỉ lệ */
.icon-box.footer-item .icon-box-img img,
.icon-box.futer-item .icon-box-img img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px;
  object-fit: contain;
}

/* Nếu icon là SVG/icon-font: tô màu đỏ thương hiệu */
.icon-box.footer-item .icon-box-img svg,
.icon-box.futer-item .icon-box-img svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  stroke: var(--color-primary);
}

/* Text bên phải: đậm, không xuống dòng */
.icon-box.footer-item .icon-box-text,
.icon-box.futer-item .icon-box-text { padding: 0 !important; }

.icon-box.footer-item .icon-box-text p,
.icon-box.futer-item .icon-box-text p,
.icon-box.footer-item .icon-box-text h3,
.icon-box.futer-item .icon-box-text h3 {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-text-main);
  white-space: nowrap;
}

@media (max-width: 575px) {
  .icon-box.footer-item,
  .icon-box.futer-item { padding: 8px 12px; border-radius: 10px; }
  .icon-box.footer-item .icon-box-text p,
  .icon-box.futer-item .icon-box-text p { font-size: 13px; white-space: normal; }
}

/*************** KHÁM PHÁ SẢN PHẨM - CATEGORY GRID ***************/
.manhty-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.manhty-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 8px;
  background-color: var(--color-white);
  border: 1px solid #f0e6c0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manhty-cat-item:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 8px 18px rgba(245, 166, 35, 0.18);
}

.manhty-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-secondary-bg);
  color: var(--color-accent);
}

.manhty-cat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-main);
  line-height: 1.3;
}

@media (max-width: 991px) {
  .manhty-cat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 575px) {
  .manhty-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .manhty-cat-icon { width: 46px; height: 46px; }
  .manhty-cat-label { font-size: 12px; }
}

/*************** PRODUCT CARD (Top sản phẩm) ***************/
.manhty-section-products .product-small .box-text,
.manhty-section-products .col-inner { text-align: center; }

.manhty-section-products .button.is-outline,
.manhty-section-products .add_to_cart_button {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: 8px;
  font-weight: 600;
}

/*************** THƯƠNG HIỆU NỔI BẬT - BRAND STRIP ***************/
.manhty-brand-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.manhty-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 80px;
  padding: 12px 24px;
  background-color: var(--color-white);
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}

.manhty-brand-item:hover { transform: translateY(-2px); }

.manhty-brand-item span {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.5px;
}

@media (max-width: 575px) {
  .manhty-brand-item { min-width: 120px; height: 64px; padding: 8px 14px; }
  .manhty-brand-item span { font-size: 15px; }
}

/*************** FOOTER (UX Block 4 cột) ***************/
/* Nền gradient gold theo thiết kế PDF (áp lên section-bg của Flatsome) */
.manhty-footer-section .section-bg.fill {
  background-image: linear-gradient(135deg, #FFD400 0%, #F5A623 100%);
}

.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper .widget-title {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
}

/* Chữ footer tông đỏ-nâu cho tương phản trên nền gold */
.manhty-footer-section,
.manhty-footer-section p,
.manhty-footer-section a,
.manhty-footer-section .ux-menu-link__text {
  color: #7a1418;
}
.manhty-footer-section a:hover,
.manhty-footer-section .ux-menu-link__link:hover .ux-menu-link__text {
  color: var(--color-primary);
}

/* Cột SOCIAL: [follow] (ux social) + nút Zalo tuỳ chỉnh */
.manhty-footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.manhty-footer-social .social-icons { margin: 0; }
.manhty-zalo-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  padding: 0 14px;
  border-radius: 999px;
  background: #0068ff;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.manhty-zalo-circle:hover { background: #0052cc; color: #fff !important; }

/*************** FLOATING ACTION BUTTONS (FAB) ***************/
.manhty-fab {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manhty-fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--color-white) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.manhty-fab-btn:hover { transform: scale(1.08); }
.manhty-fab-phone { background-color: var(--color-primary); animation: manhty-fab-ring 1.5s infinite; }
.manhty-fab-zalo { background-color: #0068ff; }
.manhty-fab-fb { background-color: #0084ff; }

@keyframes manhty-fab-ring {
  0%, 100% { box-shadow: 0 4px 12px rgba(214, 28, 35, 0.35); }
  50% { box-shadow: 0 4px 22px rgba(214, 28, 35, 0.7); }
}

@media (max-width: 575px) {
  .manhty-fab { right: 12px; bottom: 70px; }
  .manhty-fab-btn { width: 46px; height: 46px; }
}