/*
Theme Name:        Xiaomi Nha Trang
Theme URI:         https://xiaominhatrang.vn
Author:            Xiaomi Nha Trang
Description:       Theme riêng cho xiaominhatrang.vn. Thay thế Flatsome, không phụ thuộc theme thương mại. Bao gồm tầng shortcode để nội dung sẵn có trong CSDL chạy nguyên vẹn.
Version:           1.0.0
Requires at least: 6.0
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       xiaomi-nhatrang
Tags:              e-commerce, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   Token thiết kế
   Giá trị đo trực tiếp từ giao diện đang chạy của site, không lấy từ mã nguồn
   theme cũ. Đổi ở đây là đổi toàn site.
   ========================================================================== */

:root {
	/* Màu thương hiệu */
	--xmn-primary: #00a298;
	--xmn-primary-dark: #008c84;

	/* Nền các tầng header */
	--xmn-header-top-bg: #080d11;
	--xmn-header-main-bg: #121f28;
	--xmn-header-bottom-bg: #00a298;

	/* Chữ */
	--xmn-text: #111111;
	--xmn-text-muted: #555555;
	--xmn-text-light: #999999;
	--xmn-heading: #555555;

	/* Liên kết */
	--xmn-link: #334862;
	--xmn-link-dark: #446084;

	/* Đường viền và nền phụ */
	--xmn-border: #e7e7e7;
	--xmn-bg-alt: #f1f1f1;
	--xmn-bg-soft: #f7f7f7;

	/* Nhấn mạnh */
	--xmn-accent: #f28f06;
	--xmn-sale: #ff0000;

	/* Chữ */
	--xmn-font-body: Arial, Helvetica, "Helvetica Neue", sans-serif;
	--xmn-font-heading: Roboto, Arial, Helvetica, sans-serif;

	/* Chiều cao header */
	--xmn-header-top-height: 40px;
	--xmn-header-main-height: 70px;
	--xmn-header-bottom-height: 50px;
}

/* ==========================================================================
   Nền tảng
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--xmn-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--xmn-text);
	-webkit-font-smoothing: antialiased;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* Ảnh canh giữa dòng chữ thay vì theo chân chữ: không chừa khoảng trống bên
   dưới ảnh nằm trong đoạn văn (ví dụ dãy ảnh chứng nhận ở chân trang). */
img {
	display: inline-block;
	vertical-align: middle;
}

a {
	color: var(--xmn-link);
	text-decoration: none;
}

a:hover {
	color: var(--xmn-link-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--xmn-primary);
	outline-offset: 2px;
}

/* Thang cỡ tiêu đề theo em (tương đối với khối cha), khớp số đo của theme
   cũ: CSS riêng của site và nội dung sản phẩm được soạn trên thang này. */
h1, h2, h3, h4, h5, h6 {
	width: 100%;
	margin: 0 0 0.5em;
	font-family: var(--xmn-font-heading);
	font-weight: 700;
	color: var(--xmn-heading);
}

h1 { font-size: 1.7em;   line-height: 1.3; }
h2 { font-size: 1.6em;   line-height: 1.3; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: 0.85em;  opacity: 0.8; }

@media screen and (max-width: 549px) {
	h1 { font-size: 1.4em; }
	h2 { font-size: 1.2em; }
	h3 { font-size: 1em; }
}

/* Nhịp đoạn văn, danh sách và bảng: số đo lấy từ trang render bằng theme cũ.
   CSS riêng của site được viết trên giả định này (hộp chính sách, bảng thông
   số kỹ thuật, mô tả sản phẩm), nên phải khớp để bố cục không xê dịch. */
p,
ul,
ol,
dl,
pre,
form,
figure,
blockquote {
	margin: 0 0 1.3em;
}

ul,
ol {
	padding: 0;
}

/* Đoạn văn trong form (mỗi dòng nhập liệu của WooCommerce là một <p>) sát
   nhau hơn đoạn văn thường. */
form p {
	margin-bottom: 0.5em;
}

li {
	margin-bottom: 0.6em;
}

/* Chỉ thụt lề dòng nằm trong danh sách — một <li> đứng lẻ (ví dụ dòng
   "Tình trạng" trên trang sản phẩm) giữ nguyên vị trí như theme cũ. */
ul li,
ol li {
	margin-left: 1.3em;
}

/* Trích dẫn: chữ nghiêng, lớn hơn, vạch màu chính bên trái (màu vạch do
   lớp CSS động gán theo cài đặt). */
blockquote {
	position: relative;
	margin: 0 0 1.25em;
	padding: 0 1.25em 0 1.875em;
	border-left: 2px solid var(--primary-color, #446084);
	color: #333;
	font-size: 1.2em;
	font-style: italic;
}

/* Ô tick và ô chọn nằm cùng dòng với nhãn. */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline;
	margin-right: 10px;
	font-size: 16px;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	display: inline;
}

/* Nhãn ô nhập trong form (thanh toán, tài khoản…). */
label,
legend {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.9em;
	font-weight: bold;
}

label {
	color: #222;
}

/* Giá khuyến mãi WooCommerce nằm trong <ins>; trình duyệt mặc định gạch
   chân thẻ này, site gốc thì không. */
ins {
	text-decoration: none;
}

table {
	width: 100%;
	margin-bottom: 1em;
	border-spacing: 0;
	border-color: #ececec;
}

th,
td {
	padding: 0.5em;
	border-bottom: 1px solid #ececec;
	font-size: 0.9em;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
}

td {
	color: #666;
}

th:first-child,
td:first-child {
	padding-left: 0;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

/* Widget do WooSidebars bọc bằng <li> nằm ngoài danh sách: bỏ dấu chấm đầu dòng */
li.widget {
	list-style: none;
	margin: 0;
}

/* Danh sách trong widget và menu không thụt đầu dòng */
.widget ul,
.widget ol {
	margin: 0;
}

.widget ul li,
ul.menu li {
	margin-left: 0;
}

/* Phần tử form kế thừa chữ của khối chứa như văn bản thường. */
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* Khoảng cách dưới mặc định của phần tử form (theme cũ: 1em). Nút giao diện
   riêng của theme (mở/đóng menu) không nằm trong danh sách nên không đổi. */
.button,
input,
textarea,
select,
fieldset,
button[type="submit"] {
	margin-bottom: 1em;
}

/* …trừ khi nằm trong cột flex (header, thanh tìm kiếm): không có khoảng dưới. */
.flex-col button,
.flex-col .button,
.flex-col input {
	margin-bottom: 0;
}

.header-button .button {
	margin: 0;
}

/* Ô nhập liệu dùng chung (form liên hệ, đăng ký nhận tin, ô tìm kiếm…). Số
   đo khớp theme cũ: cao 2.507em, đệm ngang .75em, viền #ddd, bóng trong nhẹ.
   Ô số lượng sản phẩm dùng khung này rồi thu hẹp lại (woocommerce.css). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 2.507em;
	padding: 0 0.75em;
	border: 1px solid #ddd;
	border-radius: 0;
	background-color: #fff;
	color: #333;
	font-family: inherit;
	font-size: 0.97em;
	vertical-align: middle;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: color 0.3s, border 0.3s, background 0.3s, opacity 0.3s;
}

textarea {
	min-height: 120px;
	height: auto;
	padding-top: 0.7em;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid transparent;
	box-shadow: 0 0 5px #ccc;
	color: #333;
	background-color: #fff;
}

/* ==========================================================================
   Nút — hệ nút chung
   Mọi nút của site dùng chung bộ class này: nút WooCommerce, nút gửi form,
   nút tìm kiếm, nút giỏ hàng. CSS riêng của site (site.css) đè lên từng chỗ.
   Nút giao diện riêng của theme (mũi tên slider, mở/đóng menu) được loại ra
   bằng :where() để không tăng độ ưu tiên của luật.
   ========================================================================== */

.button,
button:where(:not(.slick-arrow):not(.xmn-nav-toggle)),
input[type="submit"],
input[type="reset"],
input[type="button"] {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2.5em;
	margin-top: 0;
	margin-right: 1em;
	padding: 0 1.2em;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: transparent;
	color: currentColor;
	font-size: 0.97em;
	font-weight: bolder;
	letter-spacing: 0.03em;
	line-height: 2.4em;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: pointer;
	transition: transform 0.3s, border 0.3s, background 0.3s, box-shadow 0.3s, opacity 0.3s, color 0.3s;
}

/* Nút đặc: nền màu chính. */
.button,
input[type="submit"],
input[type="reset"].button,
input[type="button"].button {
	border-color: rgba(0, 0, 0, 0.05);
	background-color: var(--primary-color, #446084);
	color: #fff;
}

.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	outline: none;
	opacity: 1;
	color: #fff;
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
}

/* Nút màu phụ (thanh toán, "alt"). Màu do lớp CSS động gán theo cài đặt. */
.secondary,
.checkout-button,
.button.checkout,
.button.alt {
	background-color: #d26e4b;
}

a.primary:not(.button),
a.secondary:not(.button) {
	background-color: transparent;
}

/* Nút viền */
.button.is-outline,
input[type="submit"].is-outline,
input[type="reset"].is-outline,
input[type="button"].is-outline {
	border: 2px solid currentColor;
	background-color: transparent;
	line-height: 2.19em;
}

.is-outline {
	color: silver;
}

.is-outline:hover,
.primary.is-outline:hover {
	border-color: var(--primary-color, #446084);
	background-color: var(--primary-color, #446084);
	color: #fff;
	box-shadow: none !important;
}

.primary.is-outline,
.primary.is-link,
.primary.is-underline {
	color: var(--primary-color, #446084);
}

/* Nút dạng ô form (nền xám nhạt, viền như ô nhập): nút +/- của ô số lượng,
   nút áp mã giảm giá. */
.is-form,
button.is-form,
input[type="submit"].is-form,
input[type="reset"].is-form,
input[type="button"].is-form {
	position: relative;
	overflow: hidden;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	color: #666;
	font-weight: normal;
	text-shadow: 1px 1px 1px #fff;
	text-transform: none;
}

.button.is-form:hover {
	background-color: #f1f1f1;
	color: #000;
}

/* Giãn hết bề ngang */
.full-width,
.expand {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Nút chữ (không nền) */
.button.is-link,
.button.is-underline {
	padding-left: 0.15em;
	padding-right: 0.15em;
	border-color: transparent !important;
	background-color: transparent !important;
}

.button.is-link:hover,
.button.is-underline:hover {
	color: #333;
	box-shadow: none;
}

.button.disabled,
button.disabled,
.button[disabled],
button[disabled] {
	opacity: 0.6;
}

.is-small,
.is-small.button {
	font-size: 0.8em;
}

.is-smaller {
	font-size: 0.75em;
}

.text-center .button:first-of-type {
	margin-left: 0 !important;
}

.text-center .button:last-of-type,
.text-right .button:last-of-type {
	margin-right: 0 !important;
}

.box-text .button {
	margin-top: 1em;
}

.image-tools a.button {
	display: block;
}

/* Chữ và biểu tượng trong nút */
.button span {
	display: inline-block;
	line-height: 1.6;
}

button i,
.button i {
	top: -1.5px;
	vertical-align: middle;
}

.button:not(.icon) > i {
	margin-left: -0.15em;
	margin-right: 0.4em;
}

.button:not(.icon) > span + i {
	margin-left: 0.4em;
	margin-right: -0.15em;
}

/* Nút chỉ có biểu tượng (tìm kiếm, giỏ hàng) */
.button.icon {
	display: inline-block;
	min-width: 2.5em;
	margin-left: 0.12em;
	margin-right: 0.12em;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.button.icon i {
	font-size: 1.2em;
}

.button.icon i + span {
	padding-right: 0.5em;
}

.button.icon.is-small {
	border-width: 1px;
}

.button.icon.is-small i {
	top: -1px;
}

.button.icon.circle {
	padding-left: 0;
	padding-right: 0;
}

.button.icon.circle > span,
.button.icon.circle > i {
	margin: 0 8px;
}

.button.icon.circle > span + i,
.button.icon.circle > i + span {
	margin-left: -4px;
}

.button.icon.circle > i:only-child {
	margin: 0;
}

/* Nút trong menu và ô HTML của header không có khoảng dưới */
.nav > li > a.button,
.nav > li > button,
li.html > .button {
	margin-bottom: 0;
}

.nav > li > a.button,
.nav > li > a.button:hover {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------- Form "phẳng" (ô tìm kiếm trên header) ---------- */

.form-flat input:not([type="submit"]),
.form-flat textarea,
.form-flat select {
	border-color: rgba(0, 0, 0, 0.09);
	border-radius: 99px;
	background-color: rgba(0, 0, 0, 0.03);
	color: currentColor !important;
	box-shadow: none;
}

.form-flat button,
.form-flat input {
	border-radius: 99px;
}

.form-flat textarea {
	border-radius: 15px;
}

.form-flat .flex-row .flex-col,
.flex-row.form-flat .flex-col {
	padding-right: 4px;
}

.nav-dark .form-flat input:not([type="submit"]),
.nav-dark .form-flat textarea,
.nav-dark .form-flat select,
.dark .form-flat input:not([type="submit"]) {
	border-color: rgba(255, 255, 255, 0.09);
	background-color: rgba(255, 255, 255, 0.2) !important;
	color: #fff;
}

.nav-dark .form-flat input::placeholder,
.dark .form-flat input::placeholder {
	color: #fff;
}

.form-flat .button.icon {
	border-color: transparent !important;
	background-color: transparent !important;
	color: currentColor !important;
	box-shadow: none;
}

.searchform .button.icon {
	margin: 0;
}

.searchform .button.icon i {
	font-size: 1.2em;
}

/* Nút kính lúp nằm đè lên đầu phải ô nhập */
.searchform-wrapper.form-flat .flex-col:last-of-type {
	margin-left: -2.9em;
}

.widget_search .submit-button,
.searchform-wrapper:not(.form-flat) .submit-button {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Bảng trong nội dung phải cuộn được thay vì làm vỡ bố cục trên điện thoại */
.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

/* Chỉ hiện cho trình đọc màn hình */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	background: #fff;
	color: var(--xmn-text);
	font-weight: 700;
}