/* Chỉnh giao diện dùng chung cho cả site.
   Nhiều chỗ phải !important vì flatsome.css load sau file này. */

/* =========================================================
   1. Icon mạng xã hội ở footer
   Bỏ viền tròn hồng nhạt cho khớp với phần còn lại của footer
   (chỉ có chữ, không khung), theo lối tối giản của Etsy.
   ========================================================= */

.footer-wrapper .social-icons a.icon.button,
.footer-wrapper .follow-icons a.icon.button {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 22px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #a27e81 !important;
	line-height: 1 !important;
	transition: color 0.18s ease, transform 0.18s ease;
}

.footer-wrapper .social-icons a.icon.button:last-child,
.footer-wrapper .follow-icons a.icon.button:last-child {
	margin-right: 0 !important;
}

.footer-wrapper .social-icons a.icon.button i,
.footer-wrapper .follow-icons a.icon.button i {
	font-size: 22px !important;
	line-height: 1 !important;
}

.footer-wrapper .social-icons a.icon.button:hover,
.footer-wrapper .follow-icons a.icon.button:hover {
	color: #6b4f52 !important;
	transform: translateY(-2px);
	background: none !important;
	border: 0 !important;
}

/* Icon phong bì mặc định của Flatsome là glyph đặc, vuông, nhìn thô hơn hẳn
   icon Instagram vẽ nét bên cạnh. Thay bằng phong bì vẽ nét bo tròn cho đồng bộ.
   Dùng mask thay vì background để icon vẫn ăn theo màu chữ, giữ được hiệu ứng hover. */
.footer-wrapper .follow-icons a.email i.icon-envelop::before {
	content: none;
}

.footer-wrapper .follow-icons a.email i.icon-envelop {
	display: inline-block;
	width: 23px;
	height: 23px;
	background-color: currentColor;
	-webkit-mask: var(--jl-envelope) no-repeat center / contain;
	mask: var(--jl-envelope) no-repeat center / contain;
	vertical-align: middle;
}

.footer-wrapper .follow-icons {
	--jl-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='5' width='18.5' height='14' rx='3.2'/%3E%3Cpath d='M4 8.2l6.9 4.7a2 2 0 0 0 2.2 0L20 8.2'/%3E%3C/svg%3E");
}

/* Hàng icon thẳng hàng với chữ của hai cột bên cạnh. */
.footer-wrapper .follow-icons {
	display: flex;
	align-items: center;
	margin-top: 6px;
}

/* =========================================================
   2. Trang nội dung thuần chữ (chính sách, giới thiệu, FAQ...)
   Class jl-doc-page do inc/site-tweaks.php gắn theo danh sách trang.

   Flatsome không tạo .entry-content cho mấy trang này — nội dung nằm trong
   .col-inner — nên phải nhắm cả hai bằng :is() cho chắc.
   ========================================================= */

.jl-doc-page #main .page-wrapper > .row > .col,
.jl-doc-page #main .entry-content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.jl-doc-page #main :is(.col-inner, .entry-content) {
	padding: 24px 20px 48px;
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1.75;
}

.jl-doc-page #main :is(.col-inner, .entry-content) h1 {
	margin: 0 0 10px !important;
	color: #2b2b2b !important;
	font-size: 32px !important;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: -0.01em;
}

.jl-doc-page #main :is(.col-inner, .entry-content) h2 {
	margin: 46px 0 14px !important;
	padding-top: 24px;
	border-top: 1px solid #efe7e2;
	color: #2b2b2b !important;
	font-size: 21px !important;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
}

.jl-doc-page #main :is(.col-inner, .entry-content) h3 {
	margin: 30px 0 10px !important;
	color: #2b2b2b !important;
	font-size: 17px !important;
	font-weight: 700;
	text-transform: none;
}

/* Dòng "Last Updated" ngay dưới tiêu đề. */
.jl-doc-page #main :is(.col-inner, .entry-content) h1 + p {
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid #efe7e2;
	color: #8b8b8b;
	font-size: 14px;
}

.jl-doc-page #main :is(.col-inner, .entry-content) h1 + p b,
.jl-doc-page #main :is(.col-inner, .entry-content) h1 + p strong {
	color: #8b8b8b;
	font-weight: 500;
}

.jl-doc-page #main :is(.col-inner, .entry-content) p {
	margin: 0 0 18px;
}

.jl-doc-page #main :is(.col-inner, .entry-content) ul,
.jl-doc-page #main :is(.col-inner, .entry-content) ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.jl-doc-page #main :is(.col-inner, .entry-content) li {
	margin-bottom: 10px;
	padding-left: 4px;
}

.jl-doc-page #main :is(.col-inner, .entry-content) li::marker {
	color: #d99894;
}

.jl-doc-page #main :is(.col-inner, .entry-content) strong,
.jl-doc-page #main :is(.col-inner, .entry-content) b {
	color: #2b2b2b;
	font-weight: 600;
}

.jl-doc-page #main :is(.col-inner, .entry-content) a {
	color: #a27e81;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jl-doc-page #main :is(.col-inner, .entry-content) a:hover {
	color: #6b4f52;
}

.jl-doc-page #main :is(.col-inner, .entry-content) table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
}

.jl-doc-page #main :is(.col-inner, .entry-content) :is(th, td) {
	padding: 10px 12px;
	border: 1px solid #efe7e2;
	text-align: left;
}

@media (max-width: 549px) {
	.jl-doc-page #main :is(.col-inner, .entry-content) {
		padding: 16px 4px 32px;
		font-size: 15px;
	}

	.jl-doc-page #main :is(.col-inner, .entry-content) h1 {
		font-size: 26px !important;
	}

	.jl-doc-page #main :is(.col-inner, .entry-content) h2 {
		margin-top: 36px !important;
		font-size: 19px !important;
	}
}

/* =========================================================
   3. Nút WhatsApp nổi góc phải
   Đặt cao hơn nút cuộn-lên-đầu-trang của Flatsome để không chồng nhau.
   ========================================================= */

.jl-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 92px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	color: #fff;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jl-whatsapp:hover,
.jl-whatsapp:focus {
	transform: scale(1.07);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	color: #fff;
}

.jl-whatsapp svg {
	width: 30px;
	height: 30px;
	fill: #fff;
}

/* Nhãn hiện khi rê chuột, ẩn trên điện thoại cho gọn. */
.jl-whatsapp__label {
	position: absolute;
	right: calc(100% + 10px);
	padding: 6px 12px;
	border-radius: 4px;
	background: #2b2b2b;
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.jl-whatsapp:hover .jl-whatsapp__label {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 849px) {
	.jl-whatsapp {
		right: 16px;
		bottom: 78px;
		width: 50px;
		height: 50px;
	}

	.jl-whatsapp svg {
		width: 27px;
		height: 27px;
	}

	.jl-whatsapp__label {
		display: none;
	}
}

/* =========================================================
   4. Khối kêu gọi sang Etsy trên trang Our Etsy
   HTML nằm trong nội dung trang (post 1901), CSS để ở đây cho dễ sửa.
   ========================================================= */

.etsy-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 4px;
	padding: 26px 28px;
	border-top: 1px solid #e6e6e6;
	background: linear-gradient(135deg, #fff8f3 0%, #fdf1e7 100%);
}

.etsy-cta__kicker {
	margin: 0 0 6px !important;
	color: #f1641e;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.etsy-cta__title {
	margin: 0 0 6px !important;
	color: #2b2b2b;
	font-size: 22px !important;
	font-weight: 700;
	line-height: 1.3;
}

.etsy-cta__sub {
	margin: 0 !important;
	color: #6f6f6f;
	font-size: 14px;
}

.etsy-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding: 15px 30px;
	border-radius: 999px;
	background: #f1641e;
	box-shadow: 0 4px 14px rgba(241, 100, 30, 0.32);
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.etsy-cta__btn:hover,
.etsy-cta__btn:focus {
	background: #d4520f;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(241, 100, 30, 0.4);
	color: #fff !important;
}

.etsy-cta__btn svg {
	width: 18px;
	height: 18px;
}

/* Hai nút Contact / Follow giờ là thẻ <a>, bỏ gạch chân mặc định. */
.etsy-shop-header .info-actions .btn {
	text-decoration: none !important;
}

@media (max-width: 699px) {
	.etsy-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px 18px;
	}

	.etsy-cta__title {
		font-size: 19px !important;
	}

	.etsy-cta__btn {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================
   5. Menu thả xuống ở header
   Mặc định Flatsome chỉ fade 0.25s không đặt easing (mặc định 'ease'), lại ẩn
   bằng left:-99999px nên cảm giác nhoè và chậm. Thêm chuyển động trượt xuống,
   dùng ease-in-out, mở 0.2s và đóng 0.12s — đóng nhanh hơn mở cho dứt khoát.

   Trượt bằng margin-top chứ không phải transform: trên phần tử này transform bị
   một luật !important nào đó của theme vô hiệu hoá, đặt inline cũng không ăn
   (đã thử và xác nhận). margin-top chạy bình thường, và vì dropdown là
   position:absolute nên dịch nó không đẩy phần tử nào khác.

   Nhắm #header chứ không phải #masthead: menu chính nằm ở #wide-nav, là khối
   anh em với #masthead chứ không nằm bên trong. Menu mobile (#main-menu) nằm
   ngoài #header nên không bị ảnh hưởng.
   ========================================================= */

#header .nav-dropdown:not(.nav-dropdown-full) {
	margin-top: -8px !important;
	transition: opacity 0.12s ease-in-out, margin-top 0.12s ease-in-out !important;
	will-change: opacity, margin-top;
}

#header li.current-dropdown > .nav-dropdown:not(.nav-dropdown-full),
#header li.has-dropdown:hover > .nav-dropdown:not(.nav-dropdown-full) {
	margin-top: 0 !important;
	transition: opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out !important;
}

/* Mũi tên nhỏ chỉ lên dropdown, cho chạy cùng nhịp kẻo bị trễ lại phía sau. */
.nav-dropdown-has-arrow li.has-dropdown::before,
.nav-dropdown-has-arrow li.has-dropdown::after {
	transition: opacity 0.12s ease-in-out !important;
}

.nav-dropdown-has-arrow li.current-dropdown.has-dropdown::before,
.nav-dropdown-has-arrow li.current-dropdown.has-dropdown::after {
	transition: opacity 0.2s ease-in-out !important;
}

/* Mục bên trong dropdown: đổi nền nhanh hơn cho ăn khớp với nhịp chung. */
#header .nav-dropdown > li > a {
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
}