/**
 * Nút chọn tiền tệ ở header, và luật ẩn/hiện hai bản giá.
 *
 * Nạp trên mọi trang: header có ở khắp nơi, và thẻ BĐS còn nằm cả ở trang chủ.
 * Xem TTC_BDS_Currency.
 */

/* ---------------------------------------------------------------- Hai bản giá
 *
 * Chỉ ẩn bản không được chọn, không đặt display cho bản còn lại — để nó giữ
 * nguyên cách hiển thị mà khối giá của từng nơi đã định.
 */
html:not(.bds-cur-eur) .bds-price__eur,
html.bds-cur-eur .bds-price__vnd,
html.bds-cur-eur .bds-price__rate {
	display: none !important;
}

/* ---------------------------------------------------------------- Nút chọn
 *
 * Header luôn là nền navy, nên chỉ một nấc cam: cam nhạt. Ô đang chọn là chữ
 * cam trên nền navy-700, không phải mảng cam đặc — mảng đặc dành cho nút CTA.
 */
.bds-cur-switch {
	--bds-cur-gold: #F0A45E;
	--bds-cur-text: #8FA3BD;
	--bds-cur-hover: #D7DEE8;
	--bds-cur-active-bg: #16283F;
	--bds-cur-line: rgba(143, 163, 189, .4);

	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--bds-cur-line);
	vertical-align: middle;
}

/* Hai class để thắng luật `button` chung của Flatsome (min-height, margin-right…). */
.bds-cur-switch .bds-cur-switch__btn {
	margin: 0;
	padding: 0 6px;
	min-height: 0;
	height: 28px;
	line-height: 28px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bds-cur-text);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}

.bds-cur-switch .bds-cur-switch__btn + .bds-cur-switch__btn {
	border-left: 1px solid var(--bds-cur-line);
}

.bds-cur-switch .bds-cur-switch__btn:hover,
.bds-cur-switch .bds-cur-switch__btn:focus-visible {
	color: var(--bds-cur-hover);
}

.bds-cur-switch .bds-cur-switch__btn:focus-visible {
	outline: 1px solid var(--bds-cur-gold);
	outline-offset: -1px;
}

/* Ô đang chọn đọc từ class trên <html> — có ngay từ nhịp vẽ đầu, không chờ JS. */
html:not(.bds-cur-eur) .bds-cur-switch .bds-cur-switch__btn[data-bds-cur="vnd"],
html.bds-cur-eur .bds-cur-switch .bds-cur-switch__btn[data-bds-cur="eur"] {
	color: var(--bds-cur-gold);
	background: var(--bds-cur-active-bg);
	cursor: default;
}

/* ---------------------------------------------------------------- Chỗ trên header
 *
 * Trước khi có nút, hàng menu desktop ở 1280px+ chỉ còn dư 57px — logo 193px
 * cộng 6 mục menu viết hoa đã chiếm gần hết. Nút cần ~80px, nên lấy lại chỗ ở
 * hai nơi khó thấy nhất: khoảng giữa các mục menu (9px → 6px mỗi bên) và lề
 * phải của logo (30px → 16px — menu dồn phải nên lề này chỉ có tác dụng lúc
 * hàng đã đầy). Còn dư khoảng 19px.
 *
 * Nút to thêm, hay menu thêm mục, là cả hàng menu rớt xuống dòng thứ hai —
 * dưới ~1230px thì vốn đã rớt sẵn, có nút hay không cũng vậy.
 */
#masthead .header-nav-main > li {
	margin-left: 6px;
	margin-right: 6px;
}

#masthead .logo-left .logo {
	margin-right: 16px;
}

.header-nav .bds-cur-item--right {
	margin-left: 4px;
}