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

/*************** ADD CUSTOM CSS HERE. ***************/

/* ===== FIX VERTICAL MENU: ẨN MẶC ĐỊNH, MỞ KHI CLICK ===== */

/* Ẩn fly-out menu khi chưa mở */
.header-vertical-menu__fly-out {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

/* Hiển thị khi có class --open */
.header-vertical-menu__fly-out--open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Đảm bảo fly-out nằm đúng vị trí (absolute, dưới opener) */
.header-vertical-menu {
  position: relative;
}

.header-vertical-menu__fly-out--open {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: #fff;
  min-width: 250px;
  box-shadow: 1px 1px 15px rgba(0,0,0,.15);
}

/* Xoay mũi tên khi menu mở */
.header-vertical-menu__opener[aria-expanded="true"] .icon-angle-down {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.header-vertical-menu__opener .icon-angle-down {
  transition: transform 0.3s ease;
  display: inline-block;
}

/* ===== END FIX VERTICAL MENU ===== */

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

}

/* Fix: Danh mc sn phm - hin th 1 dng */
.header-vertical-menu__title {
	    font-size: 12px !important;
	    white-space: nowrap;
	    line-height: 1.2;
}
}

/* ===== MQB AUTH PAGES FIX ===== */
.mqb-form-input-wrap .input-icon { position: absolute !important; top: 50% !important; left: 12px !important; transform: translateY(-50%) !important; width: 20px !important; height: 20px !important; pointer-events: none !important; }
.mqb-form-input-wrap .input-icon svg { width: 18px !important; height: 18px !important; fill: #9333ea !important; }
.mqb-form-input-wrap { position: relative !important; }
.mqb-form-input-wrap input { padding-left: 40px !important; }

.mqb-auth-wrap { display: flex !important; min-height: 420px; max-width: 820px; margin: 20px auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.10); background: #fff; }
.mqb-auth-banner { width: 240px !important; min-width: 240px !important; flex-shrink: 0 !important; }
.mqb-banner-gradient { width: 100%; height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; background: linear-gradient(135deg, #6b21e8 0%, #9333ea 60%, #7c3aed 100%); }
.mqb-banner-icon { margin-bottom: 16px; }
.mqb-banner-text { color: #fff !important; font-size: 18px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.mqb-banner-sub { color: rgba(255,255,255,0.85) !important; font-size: 13px; text-align: center; line-height: 1.5; }
.mqb-auth-form-col { flex: 1; padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; }
.mqb-auth-title { font-size: 24px !important; font-weight: 700; color: #1f1f1f; margin-bottom: 20px; }
.mqb-field { margin-bottom: 14px; }
.mqb-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 5px; }
.mqb-input { width: 100%; padding: 10px 14px; border: 1.5px solid #e0e0e0; border-radius: 50px; font-size: 14px; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.mqb-input:focus { border-color: #9333ea; box-shadow: 0 0 0 3px rgba(147,51,234,0.1); }
.mqb-btn-primary { width: 100%; background: #7c3aed; color: #fff; padding: 12px; border: none; border-radius: 50px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: 1px; transition: background 0.2s; display: block; text-align: center; }
.mqb-btn-primary:hover { background: #6b21e8; }
.mqb-auth-link { text-align: center; margin-top: 14px; color: #888; font-size: 13px; }
.mqb-auth-link a { color: #7c3aed; font-weight: 600; }
.mqb-msg-error { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
@media (max-width: 600px) { .mqb-auth-banner { display: none !important; } .mqb-auth-form-col { padding: 24px 18px; } }