/* mydaklak.vn – thành phần dùng chung + trang chủ theo wireframe. Màu & font: chrome.css. Mobile first. */
.mdl-home-page .site-content{display:block;padding:0}
.mdl-home-page #page,.mdl-home-page .site.grid-container{max-width:none}
.mdl-home-page .content-area,.mdl-home-page .inside-article{padding:0;margin:0}
.mdl-home{background:var(--mdl-bg);color:var(--mdl-ink);font-family:var(--mdl-font);font-size:1rem;line-height:1.5;display:flex;flex-direction:column}
.mdl-home h2{font-size:1.25rem;font-weight:800;margin:0 0 .6rem;line-height:1.3;color:var(--mdl-ink)}
.mdl-home h3{font-size:1rem;font-weight:800;margin:1rem 0 .4rem}
.mdl-home a{color:var(--mdl-bazan)}
.mdl-num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Thành phần chung */
.mdl-card{background:var(--mdl-card);border-radius:var(--mdl-radius);padding:16px;box-shadow:0 1px 3px rgba(59,42,32,.08)}
.mdl-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.mdl-card__head h2{margin:0}
.mdl-card__head a{font-size:.82rem;font-weight:600;white-space:nowrap}
.mdl-card__date{font-size:.75rem;color:var(--mdl-muted);white-space:nowrap}
.mdl-chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;background:var(--mdl-bg);border-radius:999px;padding:4px 10px}
.mdl-chip--ok{color:var(--mdl-up);background:#E6F0E7}
.mdl-chip--ok a{color:inherit}
.mdl-empty{color:var(--mdl-muted);font-size:.92rem;margin:.4rem 0}
.mdl-up{color:var(--mdl-up);font-weight:800;white-space:nowrap}
.mdl-down{color:var(--mdl-down);font-weight:800;white-space:nowrap}
.mdl-flat{color:var(--mdl-muted);font-weight:700;white-space:nowrap}
.mdl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border:0;border-radius:12px;font:inherit;font-weight:800;font-size:.9rem;text-decoration:none;cursor:pointer}
.mdl-btn--blue{background:var(--mdl-sea);color:#fff}
.mdl-btn--green{background:var(--mdl-forest);color:#fff}
.mdl-btn--soft{background:var(--mdl-bg);color:var(--mdl-bazan)}
.mdl-btn--ghost{background:var(--mdl-cream);color:var(--mdl-charcoal);width:100%;margin-top:12px}
.mdl-btn--line{background:transparent;border:1.5px solid var(--mdl-line-2);color:var(--mdl-bg);font-weight:600}
.mdl-btn--block{width:100%;box-sizing:border-box}
.mdl-home .mdl-btn--blue,.mdl-home .mdl-btn--green,body.mdl-chrome .mdl-btn--blue,body.mdl-chrome .mdl-btn--green{color:#fff}
.mdl-home .mdl-btn--soft{color:var(--mdl-bazan)}
.mdl-tone--amber{background:var(--mdl-honey-soft);color:#8A5A00}
.mdl-tone--blue{background:var(--mdl-sea-soft);color:#1B6A8A}
.mdl-tone--red{background:#F6E1DA;color:var(--mdl-down)}
.mdl-tone--green{background:#E6F0E7;color:var(--mdl-forest)}
.mdl-farm{list-style:none;margin:0 0 10px;padding:0}
.mdl-farm li{padding:8px 0 8px 28px;border-top:1px solid var(--mdl-line);position:relative;font-size:.92rem}
.mdl-farm li::before{position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:6px;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.mdl-farm li.is-ok::before{content:"✓";background:#E6F0E7;color:var(--mdl-up)}
.mdl-farm li.is-no::before{content:"✕";background:#F6E1DA;color:var(--mdl-down)}
.mdl-farm li.is-mid::before{content:"–";background:var(--mdl-cream);color:var(--mdl-muted)}
.mdl-zalo{border:2px dashed var(--mdl-sea)}

/* ---------- Trang chủ ---------- */
.mdl-top{display:flex;flex-direction:column;gap:18px;padding-bottom:6px}
.mdl-top > *:not(.mdl-hero){margin:0 16px}

/* Hero: xã của tôi + Mi + đồi đất đỏ, nhà dài */
.mdl-hero{position:relative;background:var(--mdl-hero);padding:14px 16px 0;height:352px;box-sizing:border-box;overflow:hidden}
.mdl-hero__text{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px}
.mdl-hero__hi{margin:0;font-size:.82rem;color:var(--mdl-muted)}
.mdl-hero__xa{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mdl-xa-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:2px solid var(--mdl-charcoal);border-radius:999px;background:var(--mdl-bg);color:var(--mdl-charcoal);font:inherit;font-weight:800;font-size:1.1rem;line-height:1.2;cursor:pointer;max-width:100%;text-align:left}
.mdl-xa-btn svg:first-child{color:var(--mdl-bazan);flex-shrink:0}
.mdl-xa-btn:hover{background:#fff}
.mdl-hero__wx{font-size:.82rem;font-weight:600;color:var(--mdl-charcoal)!important;background:var(--mdl-bg);border-radius:999px;padding:6px 10px;text-decoration:none}
.mdl-hero__stage{position:relative;z-index:2;display:flex;align-items:flex-end;gap:6px;margin-top:8px}
.mdl-mi{margin:0;width:160px;height:140px;flex-shrink:0;position:relative}
.mdl-mi__svg,.mdl-mi__img{width:100%;height:100%;display:block;object-fit:contain}
.mdl-mi__fx{display:none}
.mdl-mi[data-context=nang] .mdl-mi__fx--nang,.mdl-mi[data-context=hero] .mdl-mi__fx--nang,.mdl-mi[data-context=chao] .mdl-mi__fx--nang,.mdl-mi[data-context=mua] .mdl-mi__fx--mua,.mdl-mi[data-context=cupdien] .mdl-mi__fx--cupdien{display:inline}
.mdl-bubble{position:relative;background:#fff;border-radius:16px;padding:12px 12px 10px;margin:0 0 64px;font-size:.88rem;line-height:1.45;box-shadow:0 2px 8px rgba(59,42,32,.12);flex:1}
.mdl-bubble strong{display:block;font-size:.75rem;color:var(--mdl-bazan);margin-bottom:2px}
.mdl-land{position:absolute;left:0;bottom:0;width:100%;height:120px;z-index:1;display:block}
@keyframes mdlEar{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes mdlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mdlDrop{0%{transform:translateY(4px);opacity:0}30%{opacity:1}100%{transform:translateY(-12px);opacity:0}}
@keyframes mdlGlow{0%,100%{opacity:.18}50%{opacity:.4}}
.mdl-mi__ear{transform-box:fill-box;transform-origin:15% 25%;animation:mdlEar 2.8s ease-in-out infinite}
.mdl-mi__body{animation:mdlBob 4s ease-in-out infinite}
.mdl-mi__drop{animation:mdlDrop 1.6s ease-out infinite}
.mdl-mi__glow{animation:mdlGlow 2.2s ease-in-out infinite}
.mdl-mi__img{animation:mdlBob 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.mdl-mi__ear,.mdl-mi__body,.mdl-mi__drop,.mdl-mi__glow,.mdl-mi__img{animation:none}}

/* Tìm kiếm */
.mdl-search{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--mdl-line-2);border-radius:14px;padding:0 12px;min-height:52px;color:var(--mdl-muted)}
.mdl-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:.95rem;min-height:48px;color:var(--mdl-ink)}
.mdl-search:focus-within{border-color:var(--mdl-charcoal)}

/* Chế độ xem */
.mdl-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--mdl-cream);border-radius:14px;padding:4px}
.mdl-mode button{min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--mdl-charcoal);font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;padding:0 12px}
.mdl-mode button.is-active{background:var(--mdl-charcoal);color:var(--mdl-bg);font-weight:800}
.mdl-mode--hero{display:none}

/* Giá hôm nay */
.mdl-prices__src{margin:0 0 6px}
.mdl-prices__src .mdl-chip{display:inline-block;border-radius:12px;line-height:1.45}
.mdl-prices__src .mdl-chip svg{vertical-align:-1px}
.mdl-plist{display:flex;flex-direction:column}
.mdl-prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:12px 0;border-top:1px solid var(--mdl-line)}
.mdl-prow__name{font-weight:600;font-size:.95rem}
.mdl-prow__val{font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mdl-prow__val small{font-size:.75rem;font-weight:600;color:var(--mdl-muted)}
.mdl-prow__sub{font-size:.75rem;color:var(--mdl-muted)}
.mdl-prow__chg{font-size:.82rem;text-align:right}
.mdl-prow__chg small{font-weight:600}
.mdl-prices .mdl-btn--soft{display:flex;margin-top:6px;min-height:44px;font-size:.88rem}

/* Tra nhanh */
.mdl-sec--quick{margin:24px 16px 0}
.mdl-quick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mdl-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;color:var(--mdl-ink)!important;font-size:.78rem;font-weight:600}
.mdl-quick__ico{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center}

/* Bộ ba: cúp điện · Sáng nay · Zalo */
.mdl-trio{display:flex;flex-direction:column;gap:24px;margin:24px 16px 0}
.mdl-outage h2{font-size:1.12rem}
.mdl-outage__item{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--mdl-line)}
.mdl-outage__day{width:52px;flex-shrink:0;text-align:center;background:#F1EADF;border-radius:12px;padding:6px 0;font-size:.68rem;font-weight:600;color:var(--mdl-muted);align-self:flex-start}
.mdl-outage__day.is-first{background:var(--mdl-honey-soft);color:#7A5600}
.mdl-outage__day b{display:block;font-size:1.25rem;font-weight:800;color:var(--mdl-ink);line-height:1.2}
.mdl-outage__item strong{display:block;font-size:.95rem}
.mdl-outage__item span{display:block;font-size:.8rem;color:var(--mdl-muted);line-height:1.4}
.mdl-outage__list > a{display:inline-block;margin-top:8px;font-size:.85rem;font-weight:700}

.mdl-brief{background:var(--mdl-charcoal);color:var(--mdl-bg);border-radius:20px;padding:0 16px 16px;overflow:hidden}
.mdl-brief .mdl-tc-band{margin:0 -16px 14px}
.mdl-brief__head{display:flex;align-items:center;gap:10px}
.mdl-brief__head svg{flex-shrink:0}
.mdl-home .mdl-brief h2{margin:0;font-size:1.12rem;color:var(--mdl-bg)}
.mdl-brief__head p{margin:0;font-size:.75rem;color:var(--mdl-line-2)}
.mdl-brief__list{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.88rem;line-height:1.45}
.mdl-brief__list li{position:relative;padding-left:16px}
.mdl-brief__list li::before{content:"•";position:absolute;left:0;color:var(--mdl-honey);font-weight:800}
.mdl-brief__actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}

.mdl-zalo h2{font-size:1.12rem;margin-bottom:4px}
.mdl-zalo > p{margin:0 0 10px;font-size:.82rem;color:var(--mdl-muted)}
.mdl-zalo__opts{border:0;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:2px}
.mdl-zalo__opts label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.88rem;cursor:pointer}
.mdl-zalo__opts input{width:20px;height:20px;accent-color:var(--mdl-bazan);margin:0}

.mdl-home > .mdl-tc-band--mid{margin:24px 16px 0}

/* Đi đâu ăn gì */
.mdl-sec--top{margin:24px 0 0 16px}
.mdl-sec--top .mdl-card__head{margin-right:16px}
.mdl-topcards{list-style:none;margin:0;padding:0 16px 4px 0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
.mdl-topcards li{flex:0 0 230px;scroll-snap-align:start}
.mdl-topcard{display:block;height:100%;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--mdl-ink)!important;box-shadow:0 1px 3px rgba(59,42,32,.1)}
.mdl-topcard img,.mdl-topcard__ph{display:block;width:100%;height:130px;object-fit:cover;background:#D8C3A8}
.mdl-topcard__title{display:block;font-weight:800;font-size:.95rem;padding:10px 12px 0;line-height:1.35}
.mdl-topcard__meta{display:block;font-size:.75rem;color:var(--mdl-muted);padding:6px 12px 12px}

/* Theo mùa */
.mdl-season{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#E6F0E7;border-radius:18px;padding:16px;margin:24px 16px 0}
.mdl-season svg{flex-shrink:0}
.mdl-season__text{flex:1;min-width:200px}
.mdl-season__label{margin:0 0 2px;font-size:.75rem;font-weight:800;color:var(--mdl-forest);letter-spacing:.04em}
.mdl-home .mdl-season h2{font-size:1.06rem;margin:0 0 2px}
.mdl-season__text p:last-child{margin:0;font-size:.82rem}

/* Chế độ du khách: đưa "Đi đâu, ăn gì" lên ngay sau phần đầu */
.mdl-home[data-mode="du-khach"] .mdl-sec--top{order:1}
.mdl-home[data-mode="du-khach"] .mdl-top{order:0}
.mdl-home > *{order:2}
.mdl-home > .mdl-top{order:0}

/* Hộp chọn xã */
.mdl-dialog{border:0;border-radius:20px;padding:0;width:min(92vw,440px);max-height:80vh;font-family:var(--mdl-font)}
.mdl-dialog::backdrop{background:rgba(31,26,23,.55)}
.mdl-dialog__inner{padding:18px}
.mdl-dialog input{width:100%;box-sizing:border-box;min-height:46px;border:1.5px solid var(--mdl-line-2);border-radius:12px;padding:0 12px;font:inherit}
.mdl-dialog__list{list-style:none;margin:10px 0 0;padding:0;max-height:50vh;overflow:auto}
.mdl-dialog__list button{width:100%;text-align:left;min-height:44px;border:0;border-bottom:1px solid var(--mdl-line);background:#fff;font:inherit;cursor:pointer;padding:0 6px;color:var(--mdl-ink)}
.mdl-dialog__list button:hover,.mdl-dialog__list button:focus{background:var(--mdl-bg)}

/* ---------- Máy tính (theo wireframe Desktop) ---------- */
@media (min-width:960px){
	.mdl-home{padding:24px 24px 0;box-sizing:border-box}
	.mdl-home > *{width:100%;max-width:1152px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
	.mdl-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:stretch}
	.mdl-top > *:not(.mdl-hero){margin:0}
	.mdl-search,.mdl-mode--below{display:none}
	.mdl-hero{border-radius:24px;height:auto;min-height:460px;padding:28px 28px 0}
	.mdl-hero__hi{font-size:.92rem}
	.mdl-xa-btn{font-size:1.5rem;padding:10px 20px}
	.mdl-mode--hero{display:inline-grid;width:max-content;margin-top:10px}
	.mdl-hero__stage{margin-top:4px}
	.mdl-mi{width:240px;height:210px}
	.mdl-bubble{flex:0 1 240px;margin-bottom:120px}
	.mdl-land{height:150px}
	.mdl-prices{grid-row:1;grid-column:2}
	.mdl-sec--quick{margin-top:40px}
	.mdl-home .mdl-sec--quick h2{font-size:1.5rem}
	.mdl-quick{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
	.mdl-quick a{background:#fff;border-radius:16px;padding:16px 6px;box-shadow:0 1px 3px rgba(59,42,32,.08);font-size:.88rem}
	.mdl-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;align-items:start}
	.mdl-home > .mdl-tc-band--mid{margin-top:40px}
	.mdl-sec--top{margin-top:36px}
	.mdl-sec--top .mdl-card__head{margin-right:0}
	.mdl-home .mdl-sec--top h2{font-size:1.5rem}
	.mdl-topcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:0}
	.mdl-season{margin-top:36px;padding:24px 28px}
	.mdl-home .mdl-season h2{font-size:1.4rem}
	.mdl-home[data-mode="du-khach"] .mdl-sec--top{order:1}
}