.graph-main{justify-content:center;align-items:center;width:100%;caret-color:transparent}.graph-container,.graph-main{display:flex;height:100%;box-sizing:border-box}.graph-container{padding:2rem}.graph-box-top,.graph-container{flex-direction:column;flex-grow:1}.graph-box-top{display:flex;background:white;border-radius:20px;box-shadow:0 1px 5px rgba(0,0,0,.2);overflow:hidden;overflow-x:auto;overflow-y:hidden;padding:2.5rem 2.5rem 10px}.graph-box-top1{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid #cdcdcd}.graph-left-info .graph-title{margin:0;font-size:2rem;font-weight:400}.graph-left-info .graph-subtitle{margin:0;font-size:1.2rem;font-weight:300;color:#666}.graph-controls{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;--control-height:40px}.date-range-group{display:inline-flex;align-items:center;gap:.5rem;background:#f9fafb;border:1px solid #ddd;border-radius:12px;height:var(--control-height);padding:0 .6rem}.date-range-group.compact{gap:.35rem;padding:.25rem;border-radius:10px}.date-input{appearance:none;-webkit-appearance:none;font-size:.95rem;height:calc(var(--control-height) - 12px);padding:0 .6rem 0 2rem;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#111;width:120px;min-width:100px;max-width:140px;text-align:left;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:8px;background-size:16px}.date-range-group.compact .date-input{height:calc(var(--control-height) - 8px)}.date-input:hover{border-color:#d1d5db}.date-input:focus{outline:none;border-color:#53cdff;box-shadow:0 0 0 2px rgba(83,205,255,.15)}.date-sep{color:#6b7280;padding:0 4px;font-size:.95rem;line-height:1}.date-compact-select .dropdown-select{height:calc(var(--control-height) - 8px);padding:0 .75rem;border-radius:8px;font-size:.95rem}@media (max-width:640px){.date-range-group{gap:.35rem;padding:.2rem}.date-input{width:100px;min-width:90px;padding-left:1.8rem;font-size:.9rem}.date-compact-select .dropdown-select{padding:0 .6rem;font-size:.9rem}}.graph-type-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:transparent;border:1px solid #555;border-radius:8px;cursor:pointer;transition:background .2s,border .2s;padding:0}.graph-type-btn.active{background-color:#C4C6CF;border-color:#000000}.graph-type-btn.back-mode{border-color:#555}.graph-type-btn.back-mode,.graph-type-btn.back-mode:hover{background-color:transparent}.graph-type-btn.compare-btn{width:auto;padding:0 10px;gap:6px}.graph-type-btn.compare-btn .btn-text{font-size:.95rem;font-weight:500;line-height:1;white-space:nowrap}.dropdown-wrapper.graph-style{position:relative;width:130px;user-select:none}.dropdown-wrapper.graph-style.node-wide{width:300px}.dropdown-wrapper.graph-style.dust-wide{width:115px}.dropdown-wrapper.graph-style.value-wide{width:200px}.dropdown-wrapper.graph-style .dropdown-select{background-color:#f9fafb;color:#111;border:1px solid #ddd;border-radius:12px;height:var(--control-height);padding:0 1rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:300;font-size:1rem}.dropdown-wrapper.graph-style .dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;background-color:#ffffff;border:1px solid #eee;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.08);z-index:100;padding:0;margin:0;list-style:none;max-height:190px;overflow-y:auto;overflow-x:hidden}.dropdown-wrapper.graph-style .dropdown-menu li{padding:.75rem 1rem .75rem 1.5rem;border-bottom:1px solid #f1f1f1;cursor:pointer;position:relative;font-size:1rem;font-weight:300;color:#000000}.dropdown-wrapper.graph-style .dropdown-menu li.active{font-weight:400;color:#111}.dropdown-wrapper.graph-style .dropdown-menu li:last-child{border-bottom:none}.dropdown-wrapper.graph-style .dropdown-menu li.active:before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:3px;height:16px;background-color:#3b82f6;border-radius:999px}.graph-box-top2{flex-grow:1;min-height:0;overflow:hidden;margin-top:1rem}.graph-box-top2,.graph-wrapper{display:flex;flex-direction:column}.graph-wrapper{height:100%;min-height:600px}.chart-desktop{min-height:400px}.chart-desktop,.chart-mobile{flex:1;display:flex;flex-direction:column}.chart-mobile{min-height:300px}.value-box-group{justify-content:space-between;width:100%;margin-top:1rem}.graph-show-info,.value-box-group{display:flex;align-items:flex-start}.graph-show-info{flex-direction:column;margin-top:.5rem}.graph-show-info p{margin:0;padding-left:1rem}.graph-show-info p:first-child{font-size:1.25rem;font-weight:400;display:flex;align-items:center;gap:.5rem;margin-left:2rem;color:var(--aqi-dot,inherit)}.graph-show-info p:first-child:before{content:"";display:inline-block;width:15px;height:15px;border-radius:9999px;background-color:var(--aqi-dot,#facc15);margin-right:.5rem}.graph-show-info p:last-child{font-size:1rem;color:#777;font-weight:400;margin-left:4rem}.value-box-right{display:flex;gap:1rem}.value-box{background-color:#F3D769;border-radius:.5rem;padding:.5rem 1rem;color:black;text-align:left;margin-bottom:1rem}.value-box.min{background-color:#B0DE71}.value-label-inline{display:flex;align-items:center;gap:.5rem}.value-label-inline .value{font-size:1.5rem;font-weight:500}.value-label-inline .label{font-size:.9rem;font-weight:500}.value-box .time{font-size:.75rem;font-weight:400;margin-top:.25rem;color:#444}.value-box .time:before{content:"อัปเดตล่าสุด ";font-weight:500}.chart-container{width:100%!important;aspect-ratio:unset;aspect-ratio:auto;margin:0 auto;padding:0}.chart-mobile{display:none}.chart-desktop{display:block}.chart-scroll-container.scrollable{background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0) 2%,rgba(255,255,255,0) 98%,rgba(255,255,255,1))}.chart-scroll-container.scrollable::-webkit-scrollbar{height:8px}.chart-scroll-container.scrollable::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.chart-scroll-container.scrollable::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.chart-scroll-container.scrollable::-webkit-scrollbar-thumb:hover{background:#94a3b8}.graph-filters{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem}.select-control{background:#f9fafb;color:#111;border:1px solid #ddd;border-radius:12px;height:var(--control-height,40px);padding:0 .75rem;font-size:1rem;font-weight:300;min-width:140px}.select-control.node{min-width:300px}.select-control.time{min-width:130px}.select-control.dust{min-width:220px;min-height:calc(var(--control-height) + 40px)}@media (max-width:480px){.graph-main{justify-content:flex-start;align-items:center}.graph-container,.graph-main{display:flex;height:100%;width:100%;box-sizing:border-box}.graph-container{flex-direction:column;flex-grow:1;padding:.5rem}.graph-box-top{background:white;padding:1rem;border-radius:12px;box-shadow:0 1px 5px rgba(0,0,0,.2)}.graph-box-top1{border-bottom:1px solid #cdcdcd}.graph-left-info .graph-title{font-size:1rem;font-weight:400}.graph-left-info .graph-subtitle{font-size:.6rem;font-weight:300}.graph-controls{gap:.3rem}.graph-type-btn{width:25px;height:25px;border:.7px solid #555;border-radius:5px}.dropdown-wrapper.graph-style{width:130px}.dropdown-wrapper.graph-style.node-wide{width:205px}.dropdown-wrapper.graph-style .dropdown-select{border-radius:12px;padding:.3rem .5rem;font-weight:300;font-size:.7rem}.dropdown-wrapper.graph-style .dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;background-color:#ffffff;border:1px solid #eee;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.08);z-index:100;padding:0;margin:0;list-style:none;max-height:190px;overflow-y:auto;overflow-x:hidden}.dropdown-wrapper.graph-style .dropdown-menu li{padding:.75rem 1rem .75rem 1.5rem;border-bottom:1px solid #f1f1f1;cursor:pointer;position:relative;font-size:1rem;font-weight:300;color:#000000}.dropdown-wrapper.graph-style .dropdown-menu li.active{font-weight:400;color:#111}.dropdown-wrapper.graph-style .dropdown-menu li:last-child{border-bottom:none}.dropdown-wrapper.graph-style .dropdown-menu li.active:before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:3px;height:16px;background-color:#3b82f6;border-radius:999px}.dropdown-wrapper.graph-style .dropdown-select svg{width:20px;height:20px}.graph-box-top2{flex-grow:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;margin-top:0;width:100%}.graph-wrapper{width:100%;padding:0;margin:0}.graph-chart-info{display:flex;justify-content:flex-end;align-items:center;width:100%}.value-box-group{justify-content:space-between;width:100%}.graph-show-info,.value-box-group{display:flex;align-items:flex-start;margin-top:.5rem}.graph-show-info{flex-direction:column}.graph-show-info p{margin:0;padding-left:0;line-height:1.3}.graph-show-info p:first-child{font-size:.6rem;font-weight:400;display:flex;align-items:center;gap:0;margin-left:0;color:var(--aqi-dot,inherit)}.graph-show-info p:first-child:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background-color:var(--aqi-dot,#facc15);margin-right:.5rem}.graph-show-info p:last-child{font-size:.4rem;color:#777;font-weight:400;width:100px;margin-left:.7rem}.value-box-right{display:flex;gap:.5rem}.value-box{background-color:#F3D769;border-radius:.5rem;padding:.2rem .5rem;color:black;text-align:left;margin-bottom:.5rem}.value-box.min{background-color:#B0DE71}.value-label-inline{display:flex;align-items:center;gap:.5rem}.value-label-inline .value{font-size:.9rem;font-weight:500}.value-label-inline .label{font-size:.6rem;font-weight:500}.value-box .time{font-size:.5rem;font-weight:400;margin-top:0}.chart-mobile{display:block}.chart-desktop{display:none}.chart-mobile{width:140%}}