/* Header điện thoại theo mẫu: thương hiệu, tìm kiếm và ba cam kết. */
@media (max-width: 849px) {
	.site-header .hd-top { height: auto; background: #fff; }
	.site-header .hd-top-in {
		display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px;
		column-gap: 8px; row-gap: 12px; align-items: center;
		height: auto; max-width: 620px; padding: 12px 15px 0;
	}
	.site-header .hd-burger { grid-column: 1; grid-row: 1; width: 40px; height: 44px; color: #145b38; }
	.site-header .hd-burger .vi { width: 34px; height: 34px; }
	.site-header .hd-logo { grid-column: 2; grid-row: 1; align-items: center; width: 100%; min-width: 0; margin: 0; }
	.site-header .hd-logo img { width: clamp(130px, 36vw, 170px); height: auto; }
	.site-header .hd-mobile-right { grid-column: 3; grid-row: 1; justify-content: center; }
	.site-header .hd-search-toggle { display: none; }
	.site-header .hd-cart-m { width: 40px; height: 44px; color: #145b38; }
	.site-header .hd-cart-m .vi { width: 32px; height: 32px; }
	.site-header .hd-cart-m .hd-cart-count { top: 0; right: -1px; width: 19px; height: 19px; line-height: 17px; font-size: 10px; border: 1px solid #fff; box-shadow: none; }
	.site-header .hd-search, .site-header .hd-search.is-open {
		display: block; grid-column: 1 / -1; grid-row: 2; position: relative;
		left: auto; right: auto; top: auto; width: 100%; max-width: none; min-width: 0; margin: 0;
	}
	.site-header .hd-search input[type="search"] { height: 46px; padding: 0 53px 0 40px; border-color: #a5cf90; background: #fff; font-size: 12px; }
	.site-header .hd-search input[type="search"]:focus { border-color: #145b38; box-shadow: 0 0 0 3px rgba(12,86,46,.12); }
	.site-header .hd-search input[type="search"]::placeholder { color: #939ba9; }
	.site-header .hd-search-leading { left: 15px; color: #a4aab5; }
	.site-header .hd-search-leading .vi { width: 21px; height: 21px; }
	.site-header .hd-search button { top: 4px; right: 4px; width: 38px; height: 38px; background: linear-gradient(135deg, #197443, #064f2e); }
	.site-header .hd-search button .vi { width: 22px; height: 22px; }
	.site-header .hd-info {
		display: grid; grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.05fr);
		width: calc(100% + 30px); margin: 0 -15px; padding: 10px 6px;
		border-radius: 0; border-top: 1px solid #f5f7f5; border-bottom: 1px solid #eef2ef;
		background: linear-gradient(#fff, #fafcfb);
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.site-header .hd-info-item, .site-header .hd-info-item:first-child, .site-header .hd-info-item:last-child, .site-header .hd-info-item:nth-child(2), .site-header .hd-info-item:nth-child(3) {
		display: flex; gap: 5px; min-width: 0; min-height: 32px; padding: 0 5px;
	}
	.site-header .hd-info-item + .hd-info-item::before { height: 26px; background: #e0e6e1; box-shadow: none; }
	.site-header .hd-info-icon { width: clamp(24px, 6.9vw, 34px); height: clamp(24px, 6.9vw, 34px); border: 0; box-shadow: none; }
	.site-header .hd-info-icon .vi { width: 17px; height: 17px; }
	.site-header .hd-info-copy { min-width: 0; gap: 4px; line-height: 1.15; }
	.site-header .hd-info-copy strong { font-size: clamp(7.5px, 2.15vw, 10px); color: #17613b; font-weight: 800; }
	.site-header .hd-info-copy small { font-size: clamp(6.3px, 1.7vw, 8px); color: #8b94a0; font-weight: 400; }
	.site-header .hd-burger:focus-visible, .site-header .hd-cart-m:focus-visible, .site-header .hd-search button:focus-visible { outline: 2px solid #145b38; outline-offset: 3px; border-radius: 4px; }
}
@media (max-width: 359px) {
	.site-header .hd-top-in { padding-left: 12px; padding-right: 12px; column-gap: 4px; }
	.site-header .hd-info { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; padding-left: 3px; padding-right: 3px; }
	.site-header .hd-info-item, .site-header .hd-info-item:first-child, .site-header .hd-info-item:last-child, .site-header .hd-info-item:nth-child(2), .site-header .hd-info-item:nth-child(3) { padding: 0 3px; gap: 4px; }
	.site-header .hd-info-icon { width: 22px; height: 22px; }
	.site-header .hd-info-icon .vi { width: 15px; height: 15px; }
	.site-header .hd-info-copy strong { font-size: 6.7px; }
	.site-header .hd-info-copy small { font-size: 5.8px; }
}