/* M18 trip layer — /เที่ยว/ hub + /เที่ยว/<จังหวัด>/ (from the confirmed mock plan/mockup/2026-10-23-trip/, owner OK 2026-10-23). Prefix .tr-; uses the mx system (op.css). */
/* warning note (PD7) */
.tr-warn{border:1px solid #FECDCA;background:#FEF3F2;border-radius:16px;margin:0 0 18px}
.tr-warn>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;cursor:pointer}
.tr-warn>summary::-webkit-details-marker{display:none}
.tr-warn .hz-ico{flex:0 0 34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:16px;background:#B42318 linear-gradient(135deg,#F04438,#B42318)}
.tr-warn summary b{display:block;color:#912018;font-size:14.5px}.tr-warn summary small{display:block;color:#7A271A;font-size:12.5px}
.tr-warn summary .tr-chev{margin-left:auto;color:#912018;transition:transform .15s}.tr-warn[open] summary .tr-chev{transform:rotate(180deg)}
.tr-warn ul{list-style:none;margin:0;padding:0 14px 12px 56px;display:grid;gap:6px}
.tr-warn li{font-size:13.5px;color:#7A271A}.tr-warn li b{color:#912018}.tr-warn a{color:#912018;font-weight:700}
body.theme-dark details.tr-warn{background:#2B0F0D!important;border-color:#7A271A!important}
body.theme-dark details.tr-warn b,body.theme-dark details.tr-warn a{color:#FDA29B!important}
body.theme-dark details.tr-warn small,body.theme-dark details.tr-warn li,body.theme-dark details.tr-warn .tr-chev{color:#FECDCA!important}
.tr-strip{border:1px solid #FDA29B;background:#FEF3F2;border-radius:16px;padding:12px 14px;margin:0 0 18px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center}
.tr-strip .hz-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px;background:#B42318 linear-gradient(135deg,#F04438,#B42318)}
.tr-strip b{display:block;color:#912018;font-size:15px}.tr-strip small{display:block;color:#7A271A;font-size:13px;line-height:1.5}
.tr-strip a.mx-btn{height:38px;font-size:13.5px}
body.theme-dark div.tr-strip{background:#2B0F0D!important;border-color:#912018!important}body.theme-dark div.tr-strip b{color:#FDA29B!important}body.theme-dark div.tr-strip small{color:#FECDCA!important}
.tr-hidnote{font-size:12.5px;color:var(--op-muted);margin:-6px 0 12px;display:flex;gap:6px;align-items:center}
/* smart cards */
.tr-smart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tr-sc{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--op-border);border-radius:16px;background:var(--op-card);min-width:0;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.tr-sc-top{display:flex;align-items:center;gap:10px}
.tr-sc-k{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--op-action)}
.tr-sc-when{display:block;font-size:12.5px;color:var(--op-muted);font-weight:600}
.tr-sc h3{font-size:16px;line-height:1.4;margin:0;color:var(--op-heading)}
.tr-sc p{font-size:13.5px;line-height:1.6;margin:0;color:var(--op-text)}
.tr-sc ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tr-sc li{font-size:13.5px;color:var(--op-text);display:flex;gap:6px;align-items:baseline}.tr-sc li i{color:var(--op-action)}
.tr-sc-f{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding-top:6px;border-top:1px solid var(--op-border)}

.tr-sc.k-event{box-shadow:inset 3px 0 0 #F79009}.tr-sc.k-hol{box-shadow:inset 3px 0 0 #7A5AF8}.tr-sc.k-near{box-shadow:inset 3px 0 0 #0E9384}.tr-sc.k-season{box-shadow:inset 3px 0 0 #12B76A}.tr-sc.k-wx{box-shadow:inset 3px 0 0 #2E90FA}
.tr-chips{display:flex;flex-wrap:wrap;gap:6px}
.tr-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--op-border);background:var(--op-card);color:var(--op-heading)!important;font-size:13px;font-weight:600;text-decoration:none!important}
.tr-chip em{font-style:normal;color:var(--op-muted);font-weight:600;font-size:12px}
/* kind tiles + date tiles */
.tr-kt{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:17px}
.tr-kt.sm{width:24px;height:24px;border-radius:7px;font-size:12px}
.tr-kt.lg{width:44px;height:44px;border-radius:13px;font-size:20px}
.tr-kt.k-climate{background:#1849A9 linear-gradient(135deg,#4F8BF5,#1849A9)}.tr-kt.k-nature{background:#067647 linear-gradient(135deg,#32D583,#067647)}
.tr-kt.k-produce{background:#C11574 linear-gradient(135deg,#F670C7,#C11574)}.tr-kt.k-festival{background:#C4320A linear-gradient(135deg,#F79009,#C4320A)}
.tr-kt.k-closure{background:#475467 linear-gradient(135deg,#98A2B3,#475467)}.tr-kt.k-caution{background:#B54708 linear-gradient(135deg,#FDB022,#B54708)}
.tr-kt.k-hol{background:#5925DC linear-gradient(135deg,#9B8AFB,#4A1FB8)}.tr-kt.k-near{background:#0E7090 linear-gradient(135deg,#2ED3B7,#0E7090)}.tr-kt.k-wx{background:#175CD3 linear-gradient(135deg,#53B1FD,#175CD3)}
.tr-d{flex:none;width:48px;height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:#C4320A linear-gradient(135deg,#F79009,#C4320A);line-height:1.05}
.tr-d small{font-size:11px;font-weight:700;color:#fff!important}.tr-d b{font-size:19px;color:#fff!important}.tr-d.m b{font-size:14px}
.tr-d.hol{background:#5925DC linear-gradient(135deg,#9B8AFB,#4A1FB8)}
.tr-lunar{font-size:11px;font-weight:700;padding:0 6px;border-radius:999px;background:var(--mx-soft);border:1px solid var(--op-border);color:var(--op-muted);white-space:nowrap}
/* lists */
.tr-list{list-style:none;margin:0;padding:0}
.tr-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--op-border)}
.tr-list>.tr-row:first-child{border-top:0}
.tr-row-t{min-width:0;flex:1}
.tr-row-t b{display:block;color:var(--op-heading);font-size:14.5px;line-height:1.45}
.tr-row-t small{display:block;color:var(--op-muted);font-size:12.5px;line-height:1.55}
.tr-row-m{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;align-items:center}
.tr-src{font-size:12px;font-weight:600;color:var(--op-action)!important;text-decoration:none!important;display:inline-flex;gap:3px;align-items:center}
.tr-src:hover{text-decoration:underline!important}
.tr-go{font-size:12.5px;font-weight:700;color:var(--op-action)!important;text-decoration:none!important;display:inline-flex;gap:5px;align-items:center}
.tr-go em{font-style:normal;font-weight:600;color:var(--op-muted)}
.tr-ct{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;border:1px solid}
.tr-ct.c-official{background:#ECFDF3;color:#067647;border-color:#ABEFC6}.tr-ct.c-approx{background:#F2F4F7;color:#475467;border-color:#D0D5DD}
body.theme-dark span.tr-ct.c-official{background:#052E1B!important;color:#86EFAC!important;border-color:#05603A!important}
body.theme-dark span.tr-ct.c-approx{background:#1F242F!important;color:#CECFD2!important;border-color:#344054!important}
.tr-left{font-size:12px;font-weight:700;color:#B54708;white-space:nowrap}.tr-left.now{color:#067647}
body.theme-dark span.tr-left{color:#FEC84B!important}body.theme-dark span.tr-left.now{color:#86EFAC!important}
.tr-hzflag{display:none;font-size:11.5px;font-weight:700;color:#B42318}
body.theme-dark span.tr-hzflag{color:#FDA29B!important}
/* month tabs */
.tr-mtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding-bottom:2px}
.tr-mtabs::-webkit-scrollbar{display:none}
.tr-mtabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--op-border);background:var(--op-card);color:var(--op-muted)!important;font-weight:700;font-size:13.5px;text-decoration:none!important}
.tr-mtabs a em{font-style:normal;font-size:11.5px;font-weight:700;padding:0 6px;border-radius:999px;background:var(--mx-soft);color:var(--op-muted)}
.tr-mtabs a.on{background:#EEF4FF;border-color:#B2CCFF;color:#1E4FBF!important}.tr-mtabs a.on em{background:#1E4FBF;color:#fff}
body.theme-dark .tr-mtabs a.on{background:#172554!important;border-color:#2F6FD6!important;color:#C7D7FE!important}body.theme-dark .tr-mtabs a.on em{background:#2F6FD6!important;color:#fff!important}
.tr-mp[hidden]{display:none}
.tr-reg{margin:6px 0 4px;font-size:13px;font-weight:700;color:var(--op-heading);display:flex;align-items:center;gap:8px}
.tr-reg span{color:var(--op-muted);font-weight:600}
.tr-kh{display:flex;align-items:center;gap:8px;margin:14px 0 2px;font-size:13px;font-weight:700;color:var(--op-muted)}
.tr-soon{display:flex;gap:10px;align-items:center;padding:10px 12px;margin-top:12px;border:1px dashed var(--mx-in-b);border-radius:12px;font-size:13px;color:var(--op-muted)}
.tr-soon i{color:var(--op-action);font-size:16px}
.tr-cap{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--op-action)!important}
/* search */
.tr-search{display:flex;gap:8px}
.tr-search .mx-in{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid var(--mx-in-b);background:var(--mx-in);padding:0 14px 0 40px;font:inherit;font-size:15px;color:var(--op-text)}
.tr-search label{position:relative;flex:1;display:flex;min-width:0}.tr-search label i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--op-muted)}
.tr-search .mx-btn{height:48px}
.tr-hint{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* regions */
.tr-regs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tr-rg{padding:14px;border:1px solid var(--op-border);border-radius:16px;background:var(--op-card);min-width:0}
.tr-rg h3{display:flex;align-items:center;gap:10px;font-size:15.5px;margin:0 0 4px;color:var(--op-heading)}
.tr-rg p{font-size:12.5px;color:var(--op-muted);margin:0 0 10px}
.tr-rg.soon{background:var(--mx-soft);border-style:dashed}
.tr-rg .tr-chips a{min-height:30px;font-size:12.5px}
/* data card */
.tr-data p{font-size:13px;color:var(--op-muted);margin:0 0 6px;line-height:1.6}.tr-data a{color:var(--op-action)}
/* province 12-month strip */
.tr-yr-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px 6px}
.tr-yr{min-width:760px;display:grid;grid-template-columns:116px repeat(24,minmax(0,1fr));column-gap:0;row-gap:6px;font-size:12px;position:relative}
.tr-yr .mh{grid-row:1;text-align:center;font-weight:700;color:var(--op-muted);padding:4px 0;border-left:1px solid var(--op-border)}
.tr-yr .mh.now{color:#1E4FBF;background:#EEF4FF;border-radius:8px 8px 0 0}
body.theme-dark .tr-yr .mh.now{background:#172554!important;color:#C7D7FE!important}
.tr-yr .nowcol{grid-row:2/-1;background:rgba(46,144,250,.07);border-radius:0 0 8px 8px;pointer-events:none}
.tr-yr .lab{grid-column:1;display:flex;align-items:center;gap:6px;font-weight:700;color:var(--op-heading);font-size:12.5px;padding-right:6px}
.tr-yr .lab i{color:var(--op-action)}
.tr-yr .sep{grid-column:1/-1;height:1px;background:var(--op-border)}
.tr-bar{position:relative;z-index:1;min-height:28px;display:flex;align-items:center;padding:0 8px;border-radius:8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid;text-decoration:none!important;line-height:1.2}
.tr-bar.k-climate{background:#EFF8FF;color:#175CD3!important;border-color:#B2DDFF}.tr-bar.k-nature{background:#ECFDF3;color:#067647!important;border-color:#ABEFC6}
.tr-bar.k-produce{background:#FDF2FA;color:#C11574!important;border-color:#FCCEEE}.tr-bar.k-festival{background:#FFF6ED;color:#C4320A!important;border-color:#F9DBAF}
.tr-bar.k-closure{background:#F2F4F7 repeating-linear-gradient(135deg,#F2F4F7 0 6px,#EAECF0 6px 12px);color:#344054!important;border-color:#D0D5DD}
.tr-bar.k-caution{background:#FFFAEB;color:#93370D!important;border-color:#FEDF89}
body.theme-dark .tr-bar.k-climate{background:#102A56!important;color:#B2DDFF!important;border-color:#1849A9!important}
body.theme-dark .tr-bar.k-nature{background:#052E1B!important;color:#ABEFC6!important;border-color:#05603A!important}
body.theme-dark .tr-bar.k-produce{background:#3A0D2A!important;color:#FCCEEE!important;border-color:#851651!important}
body.theme-dark .tr-bar.k-festival{background:#2A1B08!important;color:#FEC84B!important;border-color:#7A2E0E!important}
body.theme-dark .tr-bar.k-closure{background:#1F242F!important;color:#D0D5DD!important;border-color:#344054!important}
body.theme-dark .tr-bar.k-caution{background:#2A1B08!important;color:#FEDF89!important;border-color:#93370D!important}
.tr-blab{align-self:center;font-size:12px;font-weight:600;color:var(--op-text);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-blab.r{text-align:right}
.tr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--op-muted)}
.tr-legend span{display:inline-flex;align-items:center;gap:6px}.tr-legend i{width:14px;height:10px;border-radius:3px;display:inline-block;border:1px solid}
.tr-amp{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.tr-amp a{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--op-border);border-radius:12px;background:var(--op-card);text-decoration:none!important;min-width:0}
.tr-amp a span{font-weight:700;color:var(--op-heading);font-size:14px}.tr-amp a small{font-size:12px;color:var(--op-muted)}
.tr-amp a.hot{border-color:#ABEFC6;box-shadow:inset 3px 0 0 #12B76A}
.tr-amp a em{font-style:normal;font-size:11.5px;font-weight:700;color:#067647}
body.theme-dark .tr-amp a em{color:#86EFAC!important}body.theme-dark .tr-amp a.hot{border-color:#05603A!important}
.tr-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tr-wx{display:flex;gap:12px;align-items:center}
.tr-wx b{font-size:1.6rem;color:var(--op-heading)}.tr-wx small{display:block;color:var(--op-muted);font-size:12.5px}
@media (max-width:960px){.tr-smart{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-regs{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-now{grid-template-columns:1fr}}
@media (max-width:640px){
 .tr-smart{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
 .tr-smart::-webkit-scrollbar{display:none}.tr-smart>.tr-sc{scroll-snap-align:start}
 .tr-regs{grid-template-columns:1fr}.tr-search{flex-direction:column}.tr-search .mx-btn{width:100%}
 .tr-strip{grid-template-columns:38px minmax(0,1fr)}.tr-strip .mx-btn{grid-column:1/-1;width:100%}
 .tr-warn ul{padding-left:14px}.tr-amp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tr-hzflag.on{display:inline-flex;gap:4px;align-items:center}
.tr-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:12px}
.tr-btns1{display:grid;gap:8px}
.tr-sres{margin-top:12px}.tr-sres .tr-chips{margin:6px 0 4px}
.tr-sc .tr-chips{margin-top:2px}
.tr-sc.k-trend{box-shadow:inset 3px 0 0 #7A5AF8}
.tr-sc[data-tr-near].on .tr-chips{display:none}
/* freshness notes (owner 2026-10-23: keep the last data, say when it is from) */
.tr-status{display:flex;gap:6px;align-items:flex-start;margin:-6px 0 12px;font-size:12.5px;line-height:1.5;color:var(--op-muted)}
.tr-status i{margin-top:2px}
.tr-wnote{display:flex;gap:8px;align-items:flex-start;margin:0 0 18px;padding:10px 14px;border-radius:14px;border:1px solid var(--op-border);background:var(--mx-soft);font-size:13px;line-height:1.5;color:var(--op-text)}
.tr-wnote i{color:var(--op-muted);margin-top:2px}.tr-wnote a{color:var(--op-action);font-weight:700}
.tr-strip small a{color:inherit;font-weight:700;text-decoration:underline}