@charset "utf-8";
/* ============================================================
   order.css — bổ sung cho style.css gốc (KMA Glyconorm PE)
   - sửa các slot bị hụt asset (arrow banner, panel testimonial)
   - form đặt hàng thứ 2 (#pedido)
   - lớp responsive mobile (style.css gốc là desktop-only 1004px)
   ============================================================ */

/* ---------- fine-tuning panel form hero cho khớp section1.png ---------- */
.fifty-states { margin-top: 38px; }
.frm-top { height: 115px; }
.price-wrapper p { color: #fff; }
.price-wrapper .old-price { color: #8b1414; }
.frmElemts:after { content: ""; display: block; clear: both; }
.submit {
	float: none;
	display: block;
	margin: 12px auto 0 auto;
}
.frmElemts input.has-error { border: 2px solid #ff3b30; }
.form-note {
	font-size: 13px;
	line-height: 17px;
	color: #fff;
	text-align: center;
	margin: 8px auto 0 auto;
	padding: 0 6px;
}

/* ---------- banner mũi tên hero (thay s1-arrow.png vì ảnh gốc in sai brand) ---------- */
.s1-arrow-bg {
	position: relative;
	width: 562px;
	box-sizing: border-box;
	background: linear-gradient(90deg, #17a34a 0%, #37c26b 100%);
	padding: 14px 46px 16px 26px;
	clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 18px 50%);
}
.s1-arrow-bg b {
	display: block;
	font-size: 25px;
	line-height: 29px;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -0.6px;
}
.s1-arrow-bg i {
	display: block;
	font-size: 17px;
	line-height: 22px;
	color: #eafbef;
	padding-top: 3px;
}

/* ---------- section3 giữ đúng chiều cao ảnh nền ---------- */
#section3 { min-height: 793px; box-sizing: border-box; padding-bottom: 30px; }
.s3-order-btn { display: block; }
#section9 { min-height: 757px; box-sizing: border-box; }

/* ---------- section8: slider đánh giá ---------- */
#section8 { height: auto; padding-bottom: 40px; }
.review-wrapper {
	border: 1px solid #e2e6e9;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	overflow: hidden;
}
.review-author { padding: 12px 15px 0 15px; }
.review-wrapper .review-author img { border-radius: 50%; }
.review-bottom img { display: block; width: 100%; }
#fades .slick-slide { margin: 0 10px; }
#fades { padding: 0 30px; }

/* ---------- form đặt hàng thứ 2 ---------- */
#pedido {
	background: #f2f7f4;
	border-top: 1px solid #dfe7e2;
	padding: 45px 0 55px 0;
}
#pedido .order-card {
	width: 560px;
	margin: 0 auto;
	background: #fff;
	border: 3px solid #00b96b;
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
	overflow: hidden;
	box-sizing: border-box;
}
#pedido .order-card-head {
	background: #193e4e;
	padding: 18px 20px 16px 20px;
	text-align: center;
}
#pedido .order-card-head strong {
	display: block;
	font-size: 28px;
	line-height: 32px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -1px;
}
#pedido .order-card-head span {
	display: block;
	font-size: 17px;
	line-height: 22px;
	color: #19c960;
	text-transform: uppercase;
	padding-top: 4px;
}
#pedido .order-card-body { padding: 22px 40px 30px 40px; }
#pedido .order-prices {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
#pedido .order-prices .op-old {
	font-size: 30px;
	line-height: 34px;
	color: #8b8b8b;
	text-decoration: line-through;
	padding-right: 18px;
}
#pedido .order-prices .op-new {
	font-size: 44px;
	line-height: 46px;
	font-weight: 700;
	color: #00a35d;
	letter-spacing: -1.5px;
}
#pedido .order-prices .op-badge {
	margin-left: 16px;
	background: #ee1723;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	border-radius: 20px;
	padding: 6px 14px;
}
#pedido label {
	display: block;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	color: #193e4e;
	text-transform: uppercase;
	margin-bottom: 6px;
}
#pedido input[type="text"],
#pedido input[type="tel"] {
	height: 46px;
	font-size: 17px;
	border: 1px solid #b6bec2;
	border-radius: 4px;
	margin-bottom: 16px;
}
#pedido input.has-error { border: 2px solid #ff3b30; }
#pedido .submit2 {
	display: block;
	width: 100%;
	border: none;
	border-radius: 6px;
	background: #ee7203;
	color: #fff;
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	padding: 19px 10px;
	cursor: pointer;
}
#pedido .submit2:hover { background: #ff8317; }
#pedido .cod-line {
	text-align: center;
	font-size: 16px;
	line-height: 22px;
	color: #2d2d2d;
	padding-top: 14px;
}
#pedido .cod-line b { color: #009b5b; }
#pedido .cod-icons {
	display: flex;
	justify-content: center;
	gap: 26px;
	padding-top: 18px;
}
#pedido .cod-icons div {
	text-align: center;
	font-size: 13px;
	line-height: 16px;
	color: #56636a;
	max-width: 120px;
}
#pedido .cod-icons img { display: block; margin: 0 auto 6px auto; height: 44px; width: auto; }

/* ---------- footer ---------- */
#footer .disclaimer {
	max-width: 900px;
	margin: 0 auto;
	padding-top: 12px;
	font-size: 12px;
	line-height: 18px;
	color: #7d7d7d;
	text-align: center;
}

/* ============================================================
   MOBILE  (style.css gốc chỉ có desktop, min-width:1004px)
   ============================================================ */
@media (max-width: 1003px) {
	body { min-width: 0; }
	img { max-width: 100%; height: auto; }

	.container { width: 100% !important; max-width: 640px; padding: 0 14px; box-sizing: border-box; }

	#section1, #section2, #section3, #section4, #section5,
	#section6, #section7, #section8, #section9 {
		min-width: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		background: #fff !important;
		padding-bottom: 30px;
	}
	#section2 { background: #f4fafd !important; }
	#section6 { background: #f7fbf9 !important; }
	#pedido { padding: 30px 0 40px 0; }

	/* mọi element định vị tuyệt đối -> về dòng chảy bình thường */
	.s1-logo, .s9-logo, .drop, .drop2, .s1-bottle, .s3-bottle, .s5-bottle,
	.s9-bottle, .s3-seal, .s5-seal, .s9-seal2, .s3-txt8, .s3-txt9,
	.s3-order-btn, .cbd-icon, .strip-btn, .books, .s9-txt5, .sec1-arrow {
		position: static !important;
		top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
		display: block;
		margin: 14px auto 0 auto !important;
		text-align: center;
		max-width: 100%;
	}
	.drop, .drop2, .sec1-arrow, .s1-right-arrow, .books { display: none !important; }
	.s1-bottle, .s3-bottle, .s5-bottle, .s9-bottle { max-width: 210px; }

	/* reset toàn bộ margin-left/padding-left dựng theo lưới desktop */
	.s1-txt1, .s1-txt2, .s1-txt3, .s1-txt4, .s1-txt5, .s1-txt6,
	.s3-txt1, .s3-txt2, .s3-txt3, .s3-txt4, .s3-txt5, .s3-txt6, .s3-txt7,
	.s4-txt1, .s4-txt2, .s5-txt1, .s5-txt2, .s5-txt3, .s5-txt4, .s5-txt5,
	.s6-txt1, .s6-txt2, .s6-txt3, .s6-txt4, .s6-txt5,
	.s7-txt1, .s7-txt2, .s7-txt3, .s8-txt3, .s8-txt4,
	.s9-txt1, .s9-txt2, .s9-txt3, .s9-txt4,
	ul.s1-list1, ul.s2-list, ul.s3-list, ul.s4-list1, ul.s4-list2,
	.s5list1, ul.s5-list1, ul.s5-list2, ul.s7-list, ul.s9-list,
	.s1-arrow-bg, .as-seen, .s9-btn, .s9-seal, .s3-bg2 {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
		float: none !important;
		text-align: center !important;
		background-image: none !important;
	}

	.s1-left-part, .s1-right-part, .s4-prt1, .s4-prt2,
	.s6-left, .s6-right, .s8-left, .s8-right {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin: 0 auto !important;
		height: auto !important;
	}

	.s1-txt1 { font-size: 15px; padding: 10px 0 !important; margin-top: 14px !important; }
	.s1-txt2 { font-size: 22px; margin-top: 8px !important; }
	.s1-txt3 { max-width: 300px; margin: 10px auto 0 auto !important; }
	.s1-txt4 {
		background: #193e4e !important; width: auto !important; height: auto !important;
		font-size: 16px; line-height: 21px; padding: 12px 14px !important; margin-top: 12px !important;
		display: block; border-radius: 4px;
	}
	.s1-txt5 { font-size: 21px; line-height: 25px; margin-top: 14px !important; }
	.s1-txt6 { font-size: 18px; line-height: 22px; margin-top: 10px !important; }

	ul.s1-list1 li {
		background-position: left top !important;
		background-size: 60px auto !important;
		font-size: 19px; line-height: 24px;
		text-align: left !important;
		padding: 0 0 0 72px !important;
		margin-bottom: 12px !important;
		min-height: 30px;
	}
	.s1-arrow-bg {
		width: auto !important; clip-path: none; border-radius: 6px;
		padding: 14px 16px !important; margin-top: 18px !important;
	}
	.s1-arrow-bg b { font-size: 19px; line-height: 23px; }
	.s1-arrow-bg i { font-size: 15px; line-height: 19px; }
	.as-seen { margin: 16px auto 0 auto !important; max-width: 320px; }

	/* panel form hero trên mobile */
	.s1-right-part {
		margin-top: 22px !important;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
		background: #2fa96f;
	}
	.fifty-states { margin-top: 0 !important; padding-top: 14px; }
	.flag { margin-top: 8px !important; padding-bottom: 10px; }
	.frm-top { height: auto !important; background: #193e4e; padding: 14px 10px 16px 10px; }
	.s1-right-part-txt1 { font-size: 20px; line-height: 24px; padding: 0 !important; }
	.s1-right-part-txt2 { font-size: 28px; line-height: 32px; padding: 0 !important; }
	.eye-txt { padding: 0 !important; }
	.form-position-div { padding: 16px 0 22px 0 !important; }
	.frmElemts { width: 88%; }
	.frmElemts input { font-size: 16px; height: 44px; }
	.submit { max-width: 100%; background-size: 100% 100% !important; }
	.s1-lock { margin-top: 16px !important; margin-bottom: 16px !important; }

	/* section2 */
	.s2-txt1 { font-size: 28px; line-height: 32px; padding-top: 26px !important; }
	.s2-bg { background: none !important; height: auto !important; margin-top: 14px !important; }
	ul.s2-list { padding: 0 !important; }
	ul.s2-list li {
		float: none !important; display: block !important; width: 100% !important;
		margin: 0 0 18px 0 !important; font-size: 16px; line-height: 21px;
	}
	ul.s2-list li span { font-size: 21px; line-height: 25px; display: block; }

	/* section3 */
	.s3-txt1 { font-size: 28px; line-height: 32px; padding-top: 26px !important; }
	.s3-txt2, .s5-txt2, .s7-txt2 {
		background: #009b5b !important; width: auto !important; height: auto !important;
		font-size: 17px; line-height: 22px; padding: 11px 14px !important; border-radius: 4px;
	}
	.s3-txt3, .s3-txt6, .s5-txt3, .s5-txt5, .s7-txt3, .s8-txt3 { font-size: 16px; line-height: 22px; padding-top: 14px !important; }
	.s3-txt4 { font-size: 22px; line-height: 26px; margin-top: 18px !important; background: none !important; }
	.s3-txt5, .s5-txt4 { font-size: 18px; line-height: 24px; margin-top: 10px !important; }
	ul.s3-list { margin-top: 12px !important; }
	ul.s3-list li { font-size: 12px; margin: 0 3px 8px 3px; }
	.s3-txt8, .s3-txt9 { color: #193e4e !important; font-size: 18px; line-height: 24px; margin-top: 14px !important; }
	.s3-bg2 { background: #f4f6f7 !important; height: auto !important; border-left: 6px solid #193e4e; }
	.s3-txt7 { padding: 14px !important; font-size: 16px; line-height: 22px; }
	.s3-txt7 span { font-size: 20px; line-height: 26px; }

	/* section4 */
	.s4-txt1, .s5-txt1, .s6-txt1, .s7-txt1 { font-size: 28px; line-height: 32px; padding-top: 26px !important; }
	.s4-txt2 {
		background: #193e4e !important; width: auto !important; height: auto !important;
		font-size: 17px; line-height: 22px; padding: 11px 14px !important; border-radius: 4px;
	}
	.s4-prt2 { margin-top: 26px !important; }
	.s4-txt3 { color: #fff !important; background: #193e4e; border-radius: 4px; padding: 8px 10px !important; margin-top: 8px; }
	.s4-prt2 .s4-txt3 { background: #009b5b; }
	ul.s4-list1 li, ul.s4-list2 li {
		height: auto !important; min-height: 74px;
		background-size: 54px auto !important;
		text-align: left !important;
		padding: 4px 0 14px 68px !important;
		background-position: left top !important;
		font-size: 15px; line-height: 20px;
	}
	ul.s4-list2 li { background-position: left top !important; }
	ul.s4-list1 li span, ul.s4-list2 li span { font-size: 18px; line-height: 20px; }

	/* strip */
	.strip { background-size: cover !important; padding: 22px 0 26px 0; }
	.strip-txt1 { font-size: 24px; line-height: 28px; padding-top: 0 !important; text-align: center; }
	.strip-txt2 { font-size: 16px; line-height: 21px; text-align: center; padding-bottom: 16px !important; max-width: none; }
	.strip-btn { max-width: 240px; }

	/* section5 */
	.s5list1 { width: auto !important; }
	ul.s5-list1 { justify-content: center !important; }
	ul.s5-list1 li {
		flex-basis: 46% !important; width: auto !important;
		text-align: left !important; font-size: 15px; padding-left: 25px !important;
		background-position: left 4px !important;
	}
	ul.s5-list2 li { float: none !important; display: block !important; width: 100% !important; margin: 0 0 18px 0 !important; }
	.s5-list2-txt1 { font-size: 26px; line-height: 30px; text-align: center; }
	.color-img { margin: 6px auto 0 auto; display: block; }
	.s5-list2-txt2 { text-align: center; font-size: 16px; line-height: 21px; }
	.s5-list2-txt2 span { font-size: 19px; line-height: 23px; }

	/* section6 */
	.s6-txt2 { font-size: 22px; line-height: 26px; min-height: 0 !important; padding-top: 18px !important; }
	.s6-right { margin-top: 26px !important; }
	.doc { max-width: 180px; }
	.s6-txt3 { font-size: 16px; line-height: 22px; }
	.s6-txt4 { font-size: 16px; line-height: 22px; padding-top: 16px !important; }
	.s6-txt4 span { font-size: 20px; }
	.s6-txt5 { font-size: 19px; line-height: 24px; margin-top: 26px !important; }
	.s6-logos { margin-top: 16px !important; }

	/* section7 */
	ul.s7-list li {
		float: none !important; display: block !important; width: 100% !important;
		background: none !important; margin: 0 0 16px 0 !important;
		padding: 0 !important; text-align: center !important; font-size: 16px; line-height: 21px;
	}
	.s7-list-icon, .s7-list-icon2, .s7-list-icon3 { margin: 0 auto 8px auto !important; }

	/* section8 */
	.testimonials_box { padding-top: 26px; padding-bottom: 20px; }
	.testimonials_box h1 { font-size: 28px; line-height: 32px; }
	.testimonials_box h1 + p { font-size: 17px; line-height: 22px; margin-bottom: 26px; }
	#fades { padding: 0 24px; }

	/* section9 */
	.s9-seal { padding: 20px 0 0 0 !important; margin: 0 auto !important; max-width: 240px; }
	.s9-txt1 { font-size: 24px; line-height: 28px; margin-top: 16px !important; }
	.s9-txt2 { font-size: 34px; line-height: 38px; margin: 0 0 10px 0 !important; }
	.s9-txt3 { font-size: 21px; line-height: 26px; margin-top: 0 !important; }
	.s9-txt4 { font-size: 17px; line-height: 22px; margin-top: 10px !important; }
	ul.s9-list { margin-top: 22px !important; }
	.s9-list-txt1 { text-align: center; font-size: 24px; line-height: 28px; }
	.presentage1, .presentage2, .presentage3 { margin: 4px auto 0 auto !important; }
	.s9-list-txt2 { text-align: center; font-size: 16px; line-height: 21px; }
	.s9-btn { margin: 20px auto 0 auto !important; max-width: 240px; }

	/* form thứ 2 */
	#pedido .order-card { width: 100%; max-width: 480px; }
	#pedido .order-card-body { padding: 20px 18px 24px 18px; }
	#pedido .order-card-head strong { font-size: 22px; line-height: 26px; }
	#pedido .order-prices .op-new { font-size: 36px; }
	#pedido .order-prices .op-old { font-size: 24px; }
	#pedido .order-prices .op-badge { font-size: 15px; padding: 5px 11px; margin-left: 10px; }
	#pedido .submit2 { font-size: 20px; padding: 17px 8px; }
	#pedido .cod-icons { gap: 14px; }
}

@media (max-width: 400px) {
	.s1-txt2 { font-size: 19px; }
	.s1-txt5 { font-size: 18px; line-height: 22px; }
	ul.s1-list1 li { font-size: 17px; }
	#pedido .order-prices .op-new { font-size: 30px; }
}