/*
Theme Name: Duy Anh Web — Bricks Child
Theme URI: https://duyanhweb.net
Description: Giao diện con của Bricks cho website hộ kinh doanh Duy Anh Web. Toàn bộ trang dựng 100% bằng Bricks Builder; file này chỉ giữ những thứ builder KHÔNG làm được (keyframes, hiệu ứng nhiều tầng, HTML do WordPress tự sinh).
Author: Duy Anh Web
Author URI: https://duyanhweb.net
Template: bricks
Version: 1.1.0
Text Domain: daw
*/

/* ==========================================================================
   1. Hiện dần khi cuộn (JS chỉ gắn class, không đụng bố cục)

   Đi lên 18px kèm thu nhỏ rất nhẹ rồi về đúng chỗ — đủ để mắt thấy khối
   "bước vào" trang, không phải kiểu bay từ xa tới.
   ========================================================================== */
.daw-hien {
	opacity: 0;
	transform: translateY(18px) scale(.985);
}
.daw-hien.daw-vao { animation: dawHienLen .62s cubic-bezier(.16,.84,.44,1) forwards; }

@keyframes dawHienLen {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

/* Vào từ trái / phải — dùng cho khu hai cột cho đỡ đơn điệu */
.daw-hien-trai { transform: translateX(-26px); }
.daw-hien-phai { transform: translateX(26px); }
.daw-hien-trai.daw-vao { animation: dawVaoTrai .66s cubic-bezier(.16,.84,.44,1) forwards; }
.daw-hien-phai.daw-vao { animation: dawVaoPhai .66s cubic-bezier(.16,.84,.44,1) forwards; }

@keyframes dawVaoTrai {
	from { opacity: 0; transform: translateX(-26px); }
	to   { opacity: 1; transform: none; }
}
@keyframes dawVaoPhai {
	from { opacity: 0; transform: translateX(26px); }
	to   { opacity: 1; transform: none; }
}

/* Các thẻ trong một lưới hiện lần lượt, không ùa ra cùng lúc */
.daw-hien-1.daw-vao { animation-delay: .08s }
.daw-hien-2.daw-vao { animation-delay: .17s }
.daw-hien-3.daw-vao { animation-delay: .26s }
.daw-hien-4.daw-vao { animation-delay: .35s }
.daw-hien-5.daw-vao { animation-delay: .44s }
.daw-hien-6.daw-vao { animation-delay: .53s }

/* Thẻ sinh ra từ vòng lặp đều mang class giống hệt nhau nên không đặt được độ
   trễ riêng trong builder — dùng thứ tự trong lưới để chúng hiện lần lượt. */
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(1).daw-vao { animation-delay: 0.04s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(2).daw-vao { animation-delay: 0.11s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(3).daw-vao { animation-delay: 0.19s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(4).daw-vao { animation-delay: 0.26s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(5).daw-vao { animation-delay: 0.34s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(6).daw-vao { animation-delay: 0.41s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(7).daw-vao { animation-delay: 0.49s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(8).daw-vao { animation-delay: 0.57s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(9).daw-vao { animation-delay: 0.64s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(10).daw-vao { animation-delay: 0.71s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(11).daw-vao { animation-delay: 0.79s }
.brx-grid > .daw-hien:not([class*="daw-hien-"]):nth-child(12).daw-vao { animation-delay: 0.86s }

/* Gạch nhấn dưới tiêu đề khu: kéo dài ra khi khối hiện lên */
.daw-gach { transform: scaleX(0); transform-origin: left center; }
.daw-gach-giua { transform-origin: center; }
.daw-hien.daw-vao .daw-gach {
	animation: dawGachRa .55s .22s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes dawGachRa { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
	.daw-hien, .daw-hien.daw-vao,
	.daw-hien-trai, .daw-hien-phai { opacity: 1 !important; transform: none !important; animation: none !important; }
	.daw-gach { transform: none !important; animation: none !important; }
	.daw-troi, .daw-troi-cham, .daw-dap { animation: none !important; }
}

/* ==========================================================================
   2. Keyframes trang trí — builder không tạo được animation vô hạn
   ========================================================================== */
@keyframes dawTroiLen {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
.daw-troi       { animation: dawTroiLen 7s ease-in-out infinite; }
.daw-troi-cham  { animation: dawTroiLen 11s ease-in-out infinite; }

/* Trôi chậm theo cuộn (JS đặt biến --daw-troi) — tạo chiều sâu cho banner */
.daw-troi-cuon {
	transform: translateY(var(--daw-troi, 0px));
	transition: transform .12s linear;
	will-change: transform;
}

/* Nút gọi ở khối liên hệ: vòng sáng lan ra rồi tắt, đập nhẹ liên tục */
@keyframes dawDapNhe {
	0%, 100% { transform: scale(1);   box-shadow: 0 10px 24px rgba(11,87,240,.28), 0 0 0 0 rgba(11,87,240,.45); }
	50%      { transform: scale(.965); box-shadow: 0 10px 24px rgba(11,87,240,.28), 0 0 0 14px rgba(11,87,240,0); }
}
.daw-dap { animation: dawDapNhe 2.2s ease-in-out infinite; }

@keyframes dawXoay { to { transform: rotate(360deg); } }
.daw-xoay { animation: dawXoay 26s linear infinite; }

/* Nút: mũi tên nhích sang phải khi rê chuột, lún nhẹ khi bấm */
.daw-nut-sang i,
.daw-nut-sang svg { transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.daw-nut-sang:hover i,
.daw-nut-sang:hover svg { transform: translateX(3px); }
.brxe-button:active { transform: translateY(0) scale(.975) !important; }

/* ==========================================================================
   3. Menu chính

   Mục cấp 1 dạng "viên thuốc" (nền + bo góc khai trong builder), ở đây chỉ
   thêm phần builder không có: đệm tấm menu con, bo góc từng dòng, nền khi rê.
   ========================================================================== */
.daw-menu .bricks-nav-menu > li > a,
.daw-menu .bricks-nav-menu > li > .brx-submenu-toggle > a,
.daw-menu .bricks-nav-menu > li > .brx-submenu-toggle {
	transition: background-color .18s ease, color .18s ease;
}

/* Tấm menu con */
.daw-menu .bricks-nav-menu .sub-menu {
	min-width: 250px;
	padding: 8px;
	line-height: 1.5;
}
.daw-menu .bricks-nav-menu .sub-menu > li > a,
.daw-menu .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > a {
	border-radius: 10px;
	transition: background-color .16s ease, color .16s ease;
}
.daw-menu .bricks-nav-menu .sub-menu > li > a:hover {
	background-color: #f1f6ff;
	color: #0b57f0;
}

/* Khi menu đã chuyển thành nút 3 gạch (dưới 1180px): nút đứng ngoài cùng bên phải */
@media (max-width: 1180px) {
	.daw-header-trong { justify-content: flex-end; }
	.daw-header-trong > *:first-child { margin-right: auto; }
	.daw-header-trong .brxe-nav-menu { order: 3; }
}
@media (max-width: 478px) {
	.daw-header-trong .brxe-button i { display: none; }
}

/* Menu điện thoại: chừa chỗ cho nút đóng, gạch mảnh giữa các mục */
.daw-menu .bricks-mobile-menu-wrapper { padding-top: 76px; }
.daw-menu .bricks-mobile-menu { width: 100%; }
.daw-menu .bricks-mobile-menu > li { border-bottom: 1px solid #edf1f7; width: 100%; }
.daw-menu .bricks-mobile-menu > li:last-child { border-bottom: 0; }
.daw-menu .bricks-mobile-menu .sub-menu { padding-bottom: 6px; }
.daw-menu .bricks-mobile-menu-toggle span { border-radius: 2px; }

/* Phân trang: nền/viền/chữ khai trong builder, ở đây chỉ thêm trạng thái rê
   chuột vì element phân trang của Bricks không có ô hover */
.bricks-pagination ul .page-numbers {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bricks-pagination ul a.page-numbers:hover {
	background-color: #e7f0ff;
	border-color: #0b57f0;
	color: #0b57f0;
}

/* Khối "không tìm thấy" chỉ hiện khi lưới mẫu rỗng. Bricks không có ô cấu hình
   cho trường hợp không có kết quả nên phải nhờ CSS :has(). */
.daw-luoi-gd:not(:has(> *)) + .daw-khong-thay { display: flex !important; }

/* Ô tìm giao diện: element tìm kiếm của Bricks không có ô chỉnh khoảng cách
   giữa ô nhập và nút, nên căn ở đây cho ô nhập giãn hết và nút nằm sát bên. */
.daw-o-tim .bricks-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
}
.daw-o-tim input[type="search"] { flex: 1; min-width: 0; }
.daw-o-tim button[type="submit"] { flex-shrink: 0; cursor: pointer; }
.daw-o-tim button[type="submit"] i { transition: transform .2s ease; }
.daw-o-tim button[type="submit"]:hover i { transform: scale(1.12); }

/* Menu ở chân trang: chữ sáng dần, không nhảy chỗ */
.daw-menu-chan .bricks-nav-menu a { transition: color .2s ease; }

/* Header dính: cuộn xuống thì thanh thông tin trên cuốn lên, thanh chính thấp lại */
#brx-header .daw-header-trong { transition: height .28s cubic-bezier(.2,.8,.3,1); }
#brx-header .daw-thanh-tren {
	max-height: 44px; overflow: hidden;
	transition: max-height .28s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
#brx-header.brx-sticky.scrolling .daw-thanh-tren { max-height: 0; opacity: 0; }
#brx-header.brx-sticky.scrolling { background: #fff; box-shadow: 0 4px 20px rgba(12,20,36,.08); }
#brx-header.brx-sticky.scrolling .daw-header-trong { height: 66px; }

/* ==========================================================================
   4. Thẻ nội dung + nền trang trí
   ========================================================================== */
/* Rê chuột vào thẻ: ô icon đổi hẳn sang nền xanh thương hiệu, icon trắng.
   Phải viết ở đây vì builder không đặt được hiệu ứng "cha hover thì con đổi". */
.daw-the .daw-the-icon {
	transition: transform .25s cubic-bezier(.2,.8,.3,1), background-color .25s ease, color .25s ease;
}
.daw-the:hover .daw-the-icon {
	transform: translateY(-3px);
	background-color: #0b57f0 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   Kho giao diện — thẻ mẫu website

   Bricks không đặt được luật "cha rê chuột thì con đổi", nên phần này phải
   viết tay. Mọi kích thước, màu, bóng của nút đều dựng trong builder.
   ========================================================================== */

/* Ảnh chụp phóng nhẹ cho thẻ có sức sống, không đứng im như ảnh dán. */
.daw-the-gd .daw-boc-anh img {
	transition: transform .75s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.daw-the-gd:hover .daw-boc-anh img,
.daw-the-gd:focus-within .daw-boc-anh img { transform: scale(1.07); }

/* Lớp phủ chỉ trùm đúng ảnh (khung bọc riêng), nên nút nằm chính giữa ảnh.
   Làm mờ nhẹ hậu cảnh để chữ trên nút bật hẳn lên.
   Dùng visibility chứ không chỉ opacity, để lúc ẩn thì không bấm nhầm. */
.daw-the-gd .daw-lop-phu {
	opacity: 0;
	visibility: hidden;
	backdrop-filter: blur(2px) saturate(1.12);
	-webkit-backdrop-filter: blur(2px) saturate(1.12);
	transition: opacity .3s ease, visibility .3s ease;
}
.daw-the-gd:hover .daw-lop-phu,
.daw-the-gd:focus-within .daw-lop-phu {
	opacity: 1;
	visibility: visible;
}

/* Nút bật lên có độ nảy, chậm hơn lớp phủ một nhịp cho ra chuyển động. */
.daw-the-gd .daw-nut-demo {
	transform: translateY(16px) scale(.9);
	opacity: 0;
	transition: transform .42s cubic-bezier(.18,.9,.28,1.35), opacity .26s ease;
}
.daw-the-gd:hover .daw-nut-demo,
.daw-the-gd:focus-within .daw-nut-demo {
	transform: none;
	opacity: 1;
	transition-delay: .07s;
}
.daw-the-gd .daw-nut-demo {
	transition: transform .42s cubic-bezier(.18,.9,.28,1.35), opacity .26s ease,
		background-color .22s ease, box-shadow .22s ease;
}
.daw-the-gd .daw-nut-demo > i,
.daw-the-gd .daw-nut-demo > span { transition: color .22s ease; }

/* Rê chuột vào chính viên nút thì nó hoá xanh — báo cho khách biết bấm được. */
.daw-the-gd .daw-nut-demo:hover {
	transform: scale(1.04);
	background: linear-gradient(135deg, #0b57f0 0%, #22d3ee 100%) !important;
	box-shadow: 0 18px 40px rgba(11,87,240,.45);
}
.daw-the-gd .daw-nut-demo:hover > i,
.daw-the-gd .daw-nut-demo:hover > span { color: #ffffff !important; }

/* Máy không có chuột (điện thoại, máy tính bảng) thì không "rê" được, nút xem
   demo sẽ không bao giờ hiện. Ở các máy đó cho nút nằm sẵn ở góc ảnh, bỏ lớp
   tối để vẫn nhìn rõ ảnh chụp. */
@media (hover: none) {
	/* Không có dải tối phủ kín — chỉ tối dần ở chân ảnh, đủ để viên nút trắng
	   đứng vững mà vẫn nhìn trọn mẫu website phía trên. */
	.daw-the-gd .daw-lop-phu {
		opacity: 1 !important;
		visibility: visible !important;
		background: linear-gradient(to top, rgba(5,10,22,.52) 0%, rgba(5,10,22,.14) 34%, rgba(5,10,22,0) 62%) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		align-items: flex-end !important;
		justify-content: flex-end !important;
		padding: 14px !important;
		pointer-events: none;
	}
	/* Gọn lại: trước đây nút chiếm 45% bề ngang ảnh, trông như miếng dán. */
	.daw-the-gd .daw-nut-demo {
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto;
		padding: 15px 22px !important;
		column-gap: 8px !important;
		box-shadow: 0 6px 18px rgba(3,8,18,.4) !important;
	}
	.daw-the-gd .daw-nut-demo > i { font-size: 13px !important; }
	.daw-the-gd .daw-nut-demo > span { font-size: 13.5px !important; }
}

/* Ai bật "giảm chuyển động" trong hệ điều hành thì bỏ hết phóng, nảy, đập. */
@media (prefers-reduced-motion: reduce) {
	.daw-the-gd:hover .daw-boc-anh img,
	.daw-the-gd:focus-within .daw-boc-anh img { transform: none; }
	.daw-the-gd .daw-nut-demo { transform: none; }
}

/* Mũi tên trên thẻ nhóm chủ đề nhích sang phải khi rê chuột */
.daw-the .daw-mui-ten { transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.daw-the:hover .daw-mui-ten { transform: translateX(4px); }

/* Lưới mờ trang trí */
.daw-luoi::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 72%);
	        mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 72%);
}

/* ==========================================================================
   5. HTML do WordPress / Bricks tự sinh (builder không chạm tới được)
   ========================================================================== */
.brxe-post-content h2 { margin: 2em 0 .6em; font-size: 1.6rem; line-height: 1.35; }
.brxe-post-content h3 { margin: 1.6em 0 .5em; font-size: 1.28rem; line-height: 1.4; }
.brxe-post-content p,
.brxe-post-content li { line-height: 1.85; }
.brxe-post-content ul,
.brxe-post-content ol { padding-left: 1.35em; margin: 1em 0; }
.brxe-post-content li { margin-bottom: .5em; }
.brxe-post-content blockquote {
	margin: 1.6em 0; padding: 18px 22px; border-left: 4px solid #0b57f0;
	background: #e7f0ff; border-radius: 0 12px 12px 0; font-style: normal;
}
.brxe-post-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.brxe-post-content th,
.brxe-post-content td { border: 1px solid #e3eaf5; padding: 10px 14px; text-align: left; }
.brxe-post-content th { background: #e7f0ff; }
.brxe-post-content img { border-radius: 14px; }
.brxe-post-content a { color: #0b57f0; text-decoration: underline; text-underline-offset: 3px; }

/* Form: thông báo + trạng thái focus (Bricks tự sinh phần này) */
.brxe-form .form-group input:focus,
.brxe-form .form-group textarea:focus,
.brxe-form .form-group select:focus {
	outline: none; border-color: #0b57f0; box-shadow: 0 0 0 4px rgba(11,87,240,.14);
}
.brxe-form .message { border-radius: 12px; padding: 14px 18px; margin-top: 14px; }
.brxe-form .bricks-button { justify-content: center; }

/* ==========================================================================
   Nút liên hệ nổi của DAW Pro (kiểu "pill" — plugin tự sinh HTML)
   ========================================================================== */
.dawp-lang-container.floating { bottom: 150px; }

/* Chữ trên nút dùng đúng font của site thay vì font hệ thống */
.dawp-contact-wrap .dawp-btn,
.dawp-contact-wrap .dawp-btn span {
	font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif !important;
}

/* Khổ điện thoại: bỏ nhãn chữ, nút thu về hình tròn cho đỡ che nội dung.
   Phải thêm `body` phía trước vì CSS của plugin in ở cuối trang và cũng
   dùng !important — cùng độ mạnh thì cái đứng sau thắng. */
@media (max-width: 767px) {
	body .dawp-contact-wrap { bottom: 16px !important; left: 12px !important; gap: 10px !important; }
	body .dawp-style-pill .dawp-btn {
		width: 50px !important; height: 50px !important;
		padding: 0 !important; gap: 0 !important;
		border-radius: 50% !important; justify-content: center !important;
	}
	body .dawp-style-pill .dawp-btn span { display: none !important; }
	body .dawp-style-pill .dawp-icon-circle {
		width: 100% !important; height: 100% !important;
		background: transparent !important;
		backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
	}
	body .dawp-style-pill .dawp-btn svg.dawp-svg-icon { width: 22px !important; height: 22px !important; }
	body .dawp-style-pill .dawp-btn::before,
	body .dawp-style-pill .dawp-btn::after { border-radius: 50% !important; }
}

/* ==========================================================================
   6. Chi tiết nhỏ toàn site
   ========================================================================== */
html { scroll-behavior: smooth; }
::selection { background: #0b57f0; color: #fff; }
.daw-cat-chu-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.daw-cat-chu-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Header: không cho chữ menu / nút xuống dòng giữa chừng */
.daw-menu .bricks-nav-menu > li > a,
.daw-menu .bricks-nav-menu > li > .brx-submenu-toggle > a,
.daw-header-trong .brxe-button,
.daw-header-trong .brxe-text-basic { white-space: nowrap; }
.daw-menu .bricks-nav-menu .sub-menu a { white-space: nowrap; }


/* ==========================================================================
   Lộ trình 5 bước (trang chủ)

   Trước đây là 5 hộp giống hệt nhau xếp một hàng, mỗi hộp chỉ còn ~230px nên
   tên bước gãy dòng và cả khối nhìn đơn điệu. Nay một đường nối chạy dọc, số
   bước là vòng tròn nằm trên đường, thẻ nội dung so le trái–phải.

   Bricks không có ô nào đặt được "thẻ lẻ bên trái, thẻ chẵn bên phải" hay vẽ
   đường nối phía sau, nên phần này phải viết tay.
   ========================================================================== */
.daw-lo-trinh {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: 26px;
}

/* Đường nối: đậm ở giữa, nhạt dần hai đầu cho đỡ cụt. */
.daw-lo-trinh::before {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(180deg,
		rgba(11, 87, 240, .08) 0%,
		#0b57f0 14%,
		#22d3ee 86%,
		rgba(34, 211, 238, .08) 100%);
}

.daw-buoc {
	display: grid;
	grid-template-columns: 1fr 108px 1fr;
	align-items: center;
}

/* Ghim cả vòng tròn lẫn thẻ vào CÙNG MỘT HÀNG. Thiếu dòng này thì thẻ của
   bước lẻ (nằm ở cột 1, tức phía sau con trỏ của lưới) bị đẩy xuống hàng mới,
   số và chữ lệch nhau cả trăm pixel. */
.daw-buoc > * { grid-row: 1; }

/* Vòng tròn số luôn ở cột giữa, đè lên đường nối. */
.daw-buoc .daw-buoc-so {
	grid-column: 2;
	justify-self: center;
	position: relative;
	z-index: 2;
	/* Quầng cùng màu nền khu để đường nối không xuyên qua số. */
	box-shadow: 0 0 0 9px #f3f8ff, 0 10px 24px rgba(11, 87, 240, .32);
}

/* Bước lẻ nằm trái, bước chẵn nằm phải. */
.daw-buoc .daw-buoc-the { grid-column: 1; }
.daw-buoc:nth-child(even) .daw-buoc-the { grid-column: 3; }

/* Mũi nhọn nhỏ chỉ về phía đường nối — cho thẻ dính vào lộ trình. */
.daw-buoc-the::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	background: #ffffff;
	border: 1px solid #c9daf4;
	transform: translateY(-50%) rotate(45deg);
}
.daw-buoc:nth-child(odd) .daw-buoc-the::after {
	right: -8px;
	border-left: 0;
	border-bottom: 0;
}
.daw-buoc:nth-child(even) .daw-buoc-the::after {
	left: -8px;
	border-right: 0;
	border-top: 0;
}

/* Rê chuột vào thẻ: đổi màu vòng tròn số cho biết đang ở bước nào. */
.daw-buoc .daw-buoc-so { transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.daw-buoc:hover .daw-buoc-so {
	transform: scale(1.08);
	box-shadow: 0 0 0 9px #f3f8ff, 0 14px 30px rgba(11, 87, 240, .48);
}

/* Máy tính bảng và điện thoại: đường nối dời sang trái, mọi thẻ nằm bên phải
   nó — so le trên màn hẹp thì chữ bị bóp, không đọc được. */
@media (max-width: 991px) {
	.daw-lo-trinh::before { left: 28px; }
	.daw-buoc { grid-template-columns: 56px 1fr; column-gap: 18px; }
	.daw-buoc .daw-buoc-so,
	.daw-buoc:nth-child(even) .daw-buoc-so { grid-column: 1; justify-self: start; }
	.daw-buoc .daw-buoc-the,
	.daw-buoc:nth-child(even) .daw-buoc-the { grid-column: 2; }
	.daw-buoc:nth-child(odd) .daw-buoc-the::after,
	.daw-buoc:nth-child(even) .daw-buoc-the::after {
		left: -8px;
		right: auto;
		border-right: 0;
		border-top: 0;
		border-left: 1px solid #c9daf4;
		border-bottom: 1px solid #c9daf4;
	}
}

@media (max-width: 575px) {
	.daw-lo-trinh { row-gap: 18px; }
	.daw-lo-trinh::before { left: 23px; }
	.daw-buoc { grid-template-columns: 46px 1fr; column-gap: 14px; }
	.daw-buoc .daw-buoc-so {
		width: 46px !important;
		height: 46px !important;
		box-shadow: 0 0 0 7px #f3f8ff, 0 8px 18px rgba(11, 87, 240, .3);
	}
	/* Mũi nhọn quá nhỏ trên điện thoại thì bỏ cho gọn. */
	.daw-buoc-the::after { display: none; }
}