/**
 * Vá CSS cho menu header
 * ---------------------------------------------------------------------------
 * Nạp SAU main.css. Chỉ sửa đúng chỗ hụt của bản Webflow, không đổi thiết kế.
 */

/*
 * Bỏ gạch chân cho link đơn ở menu chính (Bảng giá, Đối tác, Câu hỏi Thường gặp).
 *
 * main.css đặt `a { text-decoration: underline }` cho mọi thẻ a (rule #380), và
 * chỉ tắt lại cho .navigation-dropdown-toggle BÊN TRONG media query mobile
 * (rule #2852) — bản desktop của rule đó không có text-decoration.
 *
 * Bản Webflow gốc không lộ lỗi này vì mọi link đơn ở cấp 1 đều mang class
 * show-on-tablet, tức bị ẩn hoàn toàn trên desktop. Khi menu có link đơn hiện
 * trên desktop thì gạch chân mới hiện ra.
 *
 * Không sửa được bằng .nav-link: theo chuẩn CSS, text-decoration do thẻ cha vẽ
 * lan xuống toàn bộ con và con KHÔNG thể tự huỷ (.nav-link có sẵn
 * text-decoration:none nhưng vô tác dụng). Phải đặt ngay trên thẻ <a>.
 *
 * Độ ưu tiên (0,2,0) — thắng cả `a` (0,0,1) lẫn `a:hover` (0,1,1).
 */
.menu-navigation .navigation-dropdown-toggle,
.menu-navigation .navigation-dropdown-toggle:hover {
	text-decoration: none;
}

/*
 * Mobile: danh sách menu bị khối logo đè lên.
 *
 * Bản Webflow nhúng sẵn `.w-nav-overlay { top: 0% }` (custom code trong <head>)
 * để tấm nền trắng phủ kín màn hình. Hệ quả: nội dung overlay bắt đầu ngay từ
 * đỉnh navbar, trong khi nút X và logo vẫn nằm trong luồng bên trên nó
 * (z-index 2 so với 1 của .menu-navigation).
 *
 * Đo trên thiết bị rộng 430px, tính từ đỉnh navbar:
 *   khối logo   35px → 96px   (logo 38px + dòng "Never Miss a Word")
 *   mục đầu tiên bắt đầu ở 66px  = 16 (padding-top .menu-navigation)
 *                                + 34 (ô tìm kiếm) + 16 (margin-bottom)
 * → đè nhau 30px, đúng chỗ chữ "Sản phẩm" chồng lên dòng tagline.
 *
 * Nâng hàng ô tìm kiếm cho cao bằng khối logo thì danh sách bên dưới tự hạ:
 *   16 + 80 + 16 = 112px, tức cách đáy logo 16px.
 *
 * Chỉ chạm một thuộc tính, không đổi thiết kế: X + logo + ô tìm kiếm vẫn nằm
 * chung một hàng như bản gốc. Từ 0 đến 991px các số đo giống nhau (khối ≤479px
 * không ghi đè gì cho logo hay navigation-container.bottom) nên một media query
 * là đủ.
 */
@media screen and (max-width: 991px) {
	.menu-navigation .mobile-navigation-menu-holder {
		min-height: 5rem;
		padding-top: .5rem;
	}
}

/*
 * Ba dòng liên hệ ở đầu cột "Kết nối" trong footer (Hotline / Zalo / email).
 *
 * Số điện thoại và địa chỉ email không được phép xuống dòng giữa chừng.
 * Trước nằm ở assets/contact-float.css — file đó đã bỏ cùng nút liên hệ nổi.
 */
.wl-footer-contact {
	display: block;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Logo tự chọn (Giao diện → Tùy biến → Wordly → Logo)                 */
/* ------------------------------------------------------------------ */

/*
 * Logo gốc là SVG có width:100% nên tự lấp đầy khung .new-nav-brand (8rem) và
 * .new-logo (6.75rem). Ảnh tải lên không có sẵn hành vi đó — không giới hạn thì
 * ảnh gốc rộng vài trăm px sẽ phá vỡ thanh điều hướng.
 *
 * Chiều cao để auto giữ đúng tỉ lệ. Muốn logo cao hơn hoặc thấp hơn thì dùng ô
 * "Chiều cao logo header (px)" trong Customizer — ô đó in style inline nên
 * thắng rule này.
 */
.wl-custom-logo {
	max-width: 100%;
	height: auto;
	display: block;
}

.wl-custom-logo--footer {
	    width: 13.75rem;
    margin-bottom: 10px;
}

/*
 * Nhãn mục cha bấm được (inc/nav-menus.php → .wl-nav-parent-link).
 * main.css đặt a { color:#000; text-decoration:underline } — nhãn phải trông
 * y hệt <div class="nav-link"> của bản gốc nên kế thừa màu từ nút dropdown.
 */
.navigation-dropdown-toggle .wl-nav-parent-link,
.navigation-dropdown-toggle .wl-nav-parent-link:hover {
	color: inherit;
	text-decoration: none;
}