/* Khối danh mục trang chủ (1.6.52): thương hiệu + dịch vụ, kiểu lưới Shopee 2 hàng cuộn ngang. */
.hw-dm{padding:clamp(36px,5vw,72px) 0;background:#fff;border-top:1px solid var(--line2,#E4E6E8)}
.hw-dm__in{max-width:1320px;margin:0 auto;padding:0 var(--pad,20px)}
.hw-dm__title{margin:0 0 clamp(18px,2.4vw,30px);font-family:var(--serif);font-size:var(--h2,28px);letter-spacing:.04em;color:var(--ink,#1A1C1E);text-align:center}
.hw-dm__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.hw-dm__grp{min-width:0;border:1px solid var(--line2,#E4E6E8);border-radius:4px;background:#fff}
.hw-dm__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 4px}
.hw-dm__hd h3{margin:0;font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#1A1C1E)}
.hw-dm__hd h3 span{margin-right:10px;font-family:var(--serif);font-size:15px;letter-spacing:0;color:var(--gold-deep,#A8864A)}
.hw-dm__hd a{flex:none;font:500 12px/1 var(--sans);color:var(--steel,#6B7177);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.hw-dm__hd a:hover{color:var(--gold-deep,#A8864A)}
.hw-dm__rail{position:relative}
.hw-dm__list{--col:92px;list-style:none;margin:0;padding:6px 8px 12px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:var(--col);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hw-dm__list::-webkit-scrollbar{display:none}
.hw-dm__list li{scroll-snap-align:start}
.hw-dm__it{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:10px 4px 8px;text-align:center;text-decoration:none;color:var(--ink,#1A1C1E);border-radius:4px;transition:background .2s}
.hw-dm__ic{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.hw-dm__ic--logo{background:#fff;border:1px solid var(--line2,#E4E6E8)}
.hw-dm__ic--logo img{width:76%;height:44%;object-fit:contain;display:block}
.hw-dm__wm{display:block;max-width:80%;font:700 clamp(6px,calc(54px / (var(--wl,6) * .8)),11px)/1.08 var(--serif);letter-spacing:-.01em;text-transform:uppercase;text-align:center;color:var(--ink,#1A1C1E);overflow-wrap:anywhere;word-break:normal;hyphens:none}
@media (max-width:767px){.hw-dm__wm{font-size:clamp(5.5px,calc(45px / (var(--wl,6) * .8)),10px)}}
.hw-dm__ic--svc{background:var(--soft,#EEF0F1);color:var(--ink,#1A1C1E)}
.hw-dm__lb{font:500 12px/1.25 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.hw-dm__n{margin-top:-4px;font:400 11px/1.2 var(--sans);color:var(--steel,#6B7177);font-variant-numeric:tabular-nums}
.hw-dm__ar{position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border:1px solid var(--line,#D3D6D9);border-radius:50%;background:#fff;color:var(--ink,#1A1C1E);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08);display:none}
.hw-dm__ar--prev{left:-12px}.hw-dm__ar--next{right:-12px}
.hw-dm__ar[hidden]{display:none!important}
/* Nhóm dịch vụ: nền tối để tách nhóm, icon vàng */
.hw-dm__grp--svc{background:var(--ink,#1A1C1E);border-color:var(--ink,#1A1C1E)}
.hw-dm__grp--svc .hw-dm__hd h3,.hw-dm__grp--svc .hw-dm__it{color:#fff}
.hw-dm__grp--svc .hw-dm__hd h3 span,.hw-dm__grp--svc .hw-dm__hd a{color:var(--gold,#C8A15A)}
.hw-dm__grp--svc .hw-dm__ic--svc{background:rgba(255,255,255,.06);color:var(--gold,#C8A15A);border:1px solid rgba(200,161,90,.35)}
.hw-dm__grp--svc .hw-dm__n{color:rgba(255,255,255,.55)}
@media (hover:hover){
	.hw-dm__ic--logo img{filter:grayscale(1);opacity:.78;transition:filter .25s,opacity .25s}
	.hw-dm__it:hover .hw-dm__ic--logo img{filter:none;opacity:1}
	.hw-dm__it:hover .hw-dm__ic{transform:translateY(-3px);border-color:var(--gold,#C8A15A);box-shadow:0 6px 16px rgba(26,28,30,.1)}
	.hw-dm__it:hover .hw-dm__lb{color:var(--gold-deep,#A8864A)}
	.hw-dm__grp--svc .hw-dm__it:hover .hw-dm__lb{color:var(--gold,#C8A15A)}
	.hw-dm__grp--svc .hw-dm__it:hover .hw-dm__ic{background:var(--gold,#C8A15A);color:var(--ink,#1A1C1E)}
}
.hw-dm__it:focus-visible{outline:2px solid var(--gold,#C8A15A);outline-offset:2px}
@media (min-width:768px){
	.hw-dm__ar{display:block}
	.hw-dm__list{--col:104px}
	.hw-dm__ic{width:72px;height:72px}
}
@media (min-width:1100px){
	.hw-dm__grid{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
	/* dịch vụ: 5 cột x 2 hàng, vừa khung, không cuộn */
	.hw-dm__grp--svc .hw-dm__list{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
	.hw-dm__grp--svc .hw-dm__ic{width:60px;height:60px}
}
@media (max-width:767px){
	.hw-dm__in{padding:0 12px}
	.hw-dm__list{--col:84px;padding:4px 4px 10px}
	.hw-dm__ic{width:58px;height:58px}
	.hw-dm__hd{padding:12px 12px 2px}
	/* gợi ý còn cuộn: mờ mép phải */
	.hw-dm__rail::after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);border-radius:0 4px 4px 0}
	.hw-dm__grp--svc .hw-dm__rail::after{background:linear-gradient(90deg,rgba(26,28,30,0),var(--ink,#1A1C1E))}
}
@media (prefers-reduced-motion:reduce){.hw-dm__ic,.hw-dm__ic img{transition:none}}