/* BẢN THỬ dải lịch: Bảng Giờ liền khối. Một tấm sơn mài, ấn đóng đè mép, thước 12 canh (mỗi canh 8 khắc) lấp hết bề ngang. Nạp trên mọi trang, cả trang chưa có bộ V3, nên tự khai biến và mọi selector bắt đầu bằng #sm-celestial-bar. */ #sm-celestial-bar { --l-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --l-ui: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', sans-serif; --l-nga: #EEE6D4; --l-phu: #CBBFA6; --l-nhan: #9A8B6D; --l-vang: #DCBB74; --l-dat: #C48A72; --l-nen: #14120E; --l-ke: rgba(220, 187, 116, .14); --l-ke-2: rgba(220, 187, 116, .28); --l-mem: cubic-bezier(.2, 0, 0, 1); } #sm-celestial-bar.sm-cbar--compact { min-block-size: 0; } #sm-celestial-bar.sm-cbar--compact .sm-container { padding-block: .5rem; box-sizing: border-box; container-type: inline-size; } /* Tấm bảng: một vật duy nhất, viền kép, cao 72 trong dải 88; ấn cao 84 trồi khỏi mép trên dưới 6 px */ #sm-celestial-bar .sm-cbar__inner.sm-lich { --l-phan: var(--l-vang); position: relative; display: grid; grid-template-columns: 2.75rem minmax(max-content, auto) minmax(0, 1fr) auto; align-items: stretch; gap: 0; box-sizing: border-box; block-size: 4.5rem; min-block-size: 0; max-inline-size: 75rem; margin: 0 auto; padding: 0 0 0 1rem; background: linear-gradient(180deg, #1F1B14 0%, #17140F 46%, #14120E 100%); border: 1px solid var(--l-ke-2); border-radius: .25rem; box-shadow: inset 0 0 0 2px var(--l-nen), inset 0 0 0 3px var(--l-ke), 0 1px 0 rgba(0, 0, 0, .5); font-family: var(--l-ui); color: var(--l-phu); font-variant-numeric: lining-nums; white-space: nowrap; transition: border-color 90ms var(--l-mem); } #sm-celestial-bar .sm-lich[data-ngay="hac"] { --l-phan: var(--l-dat); } #sm-celestial-bar .sm-cbar__inner.sm-lich:hover { border-color: var(--l-vang); } /* Ấn: âm văn, mép run, đóng đè viền tấm */ #sm-celestial-bar .sm-bg__an { position: relative; z-index: 1; grid-column: 1; align-self: center; inline-size: 2.75rem; block-size: 5.25rem; margin-block: -.4375rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } #sm-celestial-bar .sm-bg__an-son { fill: var(--l-phan); } #sm-celestial-bar .sm-bg__an-khac { fill: var(--l-nen); stroke: var(--l-nen); stroke-width: .35; } #sm-celestial-bar .sm-bg__an-hat { fill: var(--l-nen); opacity: .55; } #sm-celestial-bar .sm-bg__an-vien { fill: none; stroke: var(--l-nen); stroke-width: .9; } /* Lời phán và ngày, một khối đọc */ #sm-celestial-bar .sm-bg__ngay { grid-column: 2; display: grid; align-content: center; gap: .125rem; padding-inline: .875rem 1.25rem; } #sm-celestial-bar .sm-bg__phan { font-family: var(--l-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--l-phan); } #sm-celestial-bar .sm-bg__lich { display: block; font-size: .8125rem; line-height: 1.4; color: var(--l-phu); } #sm-celestial-bar .sm-bg__lich b { font-weight: 500; color: var(--l-nga); } #sm-celestial-bar .sm-bg__lich i { font-style: normal; color: var(--l-nhan); } /* Thước 12 canh: phần co giãn, nên không bao giờ có khoảng chết */ #sm-celestial-bar .sm-bg__thuoc { grid-column: 3; display: flex; align-items: stretch; min-inline-size: 0; margin: 3px 0; padding: 0; list-style: none; border-inline: 1px solid var(--l-ke); } #sm-celestial-bar .sm-bg__thuoc li { position: relative; flex: 1 1 0; min-inline-size: 0; margin: 0; padding: 0 0 .5rem; display: grid; place-items: center; text-align: center; color: var(--l-nhan); font-family: var(--l-serif); font-size: 1rem; font-weight: 600; line-height: 1; } /* 8 khắc mỗi canh, khắc dài đầu canh */ #sm-celestial-bar .sm-bg__thuoc li::after { content: ""; position: absolute; inset: auto 0 0; block-size: .3125rem; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12.5%); opacity: .45; } #sm-celestial-bar .sm-bg__thuoc li::before { content: ""; position: absolute; inset: auto auto 0 0; inline-size: 1px; block-size: .625rem; background: currentColor; opacity: .6; } #sm-celestial-bar .sm-bg__thuoc li.is-tot { color: var(--l-vang); font-weight: 700; background: linear-gradient(180deg, rgba(220, 187, 116, 0) 30%, rgba(220, 187, 116, .1) 100%); } #sm-celestial-bar .sm-bg__thuoc li.is-tot::after { opacity: 1; } /* Thẻ giờ hiện tại nở ra trên thước */ #sm-celestial-bar .sm-bg__thuoc li.sm-bg__nay { flex: 0 0 7.25rem; overflow: hidden; align-content: center; gap: .1875rem; color: var(--l-nga); background: rgba(238, 230, 212, .07); box-shadow: inset 1px 0 0 var(--l-ke-2), inset -1px 0 0 var(--l-ke-2); font-family: var(--l-ui); } #sm-celestial-bar .sm-bg__nay-chi { font-family: var(--l-serif); font-size: 1.125rem; font-weight: 600; line-height: 1; color: var(--l-nga); } #sm-celestial-bar .sm-bg__nay-gio { font-size: .8125rem; font-weight: 400; line-height: 1; color: var(--l-phu); } #sm-celestial-bar .sm-bg__nay-gio em { font-style: normal; font-weight: 500; color: var(--l-dat); } #sm-celestial-bar .sm-bg__nay.is-tot .sm-bg__nay-gio em { color: var(--l-vang); } /* Kim chạy thật theo phút trong canh, chỉ bằng transform */ #sm-celestial-bar .sm-bg__kim { position: absolute; inset: auto 0 0; block-size: .625rem; pointer-events: none; animation: sm-bg-kim 7200s linear var(--tre, 0s) both; } #sm-celestial-bar .sm-bg__kim::before { content: ""; position: absolute; inset: 0 auto 0 -1px; inline-size: 2px; background: var(--l-nga); } @keyframes sm-bg-kim { to { transform: translateX(100%); } } /* Nút: cả tấm là vùng bấm */ #sm-celestial-bar .sm-bg__mo.sm-quick__info { grid-column: 4; position: static; display: flex; align-items: center; align-self: center; flex: none; gap: .5rem; inline-size: auto; block-size: auto; min-inline-size: 0; min-block-size: 2.75rem; margin: 0; padding: 0 1rem; border: 0; background: none; box-shadow: none; font-family: var(--l-ui); font-size: .8125rem; font-weight: 500; color: var(--l-vang); cursor: pointer; } #sm-celestial-bar .sm-bg__mo::after { content: ""; position: absolute; inset: -.4375rem 0; z-index: 2; } #sm-celestial-bar .sm-bg__mo svg { inline-size: .5rem; block-size: .75rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 90ms var(--l-mem); } #sm-celestial-bar .sm-cbar__inner.sm-lich:hover .sm-bg__mo svg { transform: translateX(2px); } #sm-celestial-bar .sm-bg__mo:focus-visible { outline: 0; } #sm-celestial-bar .sm-bg__mo:focus-visible::after { outline: 2px solid var(--l-vang); outline-offset: 2px; border-radius: .25rem; } /* Hộp Chi tiết: tấm bảng lớn cùng họ với dải. Sơn mài, viền kép, ấn đè đường kẻ đầu, thước 12 canh lặp lại. Chữ tự khai họ, không ăn font trang */ #sm-celestial-bar dialog.sm-quick__explanation { --l-phan: var(--l-vang); position: fixed; inset: 0; box-sizing: border-box; inline-size: calc(100% - 2rem); max-inline-size: 58rem; block-size: fit-content; max-block-size: calc(100dvh - 2rem); margin: auto; padding: 0 1.5rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--l-nhan) transparent; background: radial-gradient(120% 70% at 18% 0%, #272014 0%, rgba(39, 32, 20, 0) 62%), linear-gradient(180deg, #1F1B14 0%, #17140F 40%, #14120E 100%); border: 1px solid var(--l-ke-2); border-radius: .25rem; box-shadow: inset 0 0 0 2px var(--l-nen), inset 0 0 0 3px var(--l-ke), 0 1.5rem 4rem rgba(0, 0, 0, .6); font-family: var(--l-ui); font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--l-phu); font-variant-numeric: lining-nums; white-space: normal; } #sm-celestial-bar dialog.sm-quick__explanation[data-ngay="hac"] { --l-phan: var(--l-dat); } #sm-celestial-bar dialog.sm-quick__explanation[open] { animation: sm-hop-vao 180ms var(--l-mem); } @keyframes sm-hop-vao { from { opacity: 0; transform: translateY(.5rem); } } #sm-celestial-bar dialog.sm-quick__explanation::backdrop { background: rgba(8, 7, 5, .78); } #sm-celestial-bar dialog.sm-quick__explanation p { margin: 0; } /* Đầu tấm: ấn đè lên đường kẻ dưới */ #sm-celestial-bar .sm-hop__dau { position: relative; display: grid; grid-template-columns: 2.625rem minmax(0, 1fr) auto; align-items: center; gap: .875rem; min-block-size: 4.5rem; padding-block-start: .25rem; border-block-end: 1px solid var(--l-ke-2); } #sm-celestial-bar dialog .sm-bg__an.sm-hop__an { grid-column: 1; align-self: start; inline-size: 2.625rem; block-size: 5rem; margin: .625rem 0 -.5rem; } #sm-celestial-bar .sm-hop__ten { display: grid; gap: .125rem; min-inline-size: 0; } #sm-celestial-bar .sm-hop__ten strong { font-family: var(--l-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--l-nga); } #sm-celestial-bar .sm-hop__ten span { font-family: var(--l-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: var(--l-phan); } #sm-celestial-bar dialog .sm-quick__close { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; min-inline-size: 0; min-block-size: 0; margin: 0 -.75rem 0 0; padding: 0; border: 0; border-radius: .25rem; background: none; color: var(--l-phu); cursor: pointer; transition: color 90ms var(--l-mem), background-color 90ms var(--l-mem); } #sm-celestial-bar dialog .sm-quick__close svg { inline-size: .875rem; block-size: .875rem; fill: none; stroke: currentColor; stroke-width: 1.25; } #sm-celestial-bar dialog .sm-quick__close:hover { color: var(--l-nga); background: var(--l-ke); } /* Sáu ô dữ kiện: một hàng khung kẻ, không viền đáy rời */ #sm-celestial-bar .sm-lich__bang { display: grid; grid-template-columns: 2.2fr 2.2fr repeat(4, 1fr); gap: 0; margin: 0; border-block-end: 1px solid var(--l-ke); } #sm-celestial-bar .sm-lich__bang div { display: grid; align-content: center; gap: .125rem; min-inline-size: 0; padding: .625rem .875rem; border-inline-start: 1px solid var(--l-ke); } #sm-celestial-bar .sm-lich__bang div:first-child { padding-inline-start: 0; border-inline-start: 0; } #sm-celestial-bar .sm-lich__bang dt { font-size: .75rem; font-weight: 400; line-height: 1.3; color: var(--l-nhan); } #sm-celestial-bar .sm-lich__bang dd { margin: 0; font-family: var(--l-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: var(--l-nga); } /* 12 canh: lặp lại thước của dải */ #sm-celestial-bar .sm-hop__gio { padding-block: .875rem .75rem; } #sm-celestial-bar .sm-hop__nhan { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: .5rem !important; font-size: .75rem; line-height: 1.3; color: var(--l-nhan); } #sm-celestial-bar .sm-hop__chu { display: inline-flex; gap: 1rem; } #sm-celestial-bar .sm-hop__chu i { display: inline-flex; align-items: center; gap: .375rem; font-style: normal; } #sm-celestial-bar .sm-hop__chu i::before { content: ""; inline-size: .875rem; block-size: 2px; background: var(--l-nhan); opacity: .55; } #sm-celestial-bar .sm-hop__chu i.is-tot { color: var(--l-vang); } #sm-celestial-bar .sm-hop__chu i.is-tot::before { background: var(--l-vang); opacity: 1; } #sm-celestial-bar .sm-lich__ds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--l-ke); border: 1px solid var(--l-ke); border-radius: .25rem; overflow: hidden; } #sm-celestial-bar .sm-lich__ds li { position: relative; display: grid; justify-items: center; align-content: center; gap: .125rem; block-size: 3.5rem; margin: 0; padding: 0; background: #16130E; color: var(--l-nhan); } #sm-celestial-bar .sm-lich__ds li::after { content: ""; position: absolute; inset: auto 0 0; block-size: 2px; background: var(--l-nhan); opacity: .35; } #sm-celestial-bar .sm-lich__ds b { font-family: var(--l-serif); font-size: 1.125rem; font-weight: 600; line-height: 1; } #sm-celestial-bar .sm-lich__ds small { font-size: .75rem; line-height: 1.2; color: inherit; white-space: nowrap; } #sm-celestial-bar .sm-lich__ds li > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } #sm-celestial-bar .sm-lich__ds li.is-tot { color: var(--l-vang); background: linear-gradient(180deg, #16130E 30%, #231D12 100%); } #sm-celestial-bar .sm-lich__ds li.is-tot b { font-weight: 700; } #sm-celestial-bar .sm-lich__ds li.is-tot::after { background: var(--l-vang); opacity: 1; } #sm-celestial-bar .sm-lich__ds li.is-nay { color: var(--l-nga); background: #2A261E; } #sm-celestial-bar .sm-lich__ds li.is-nay::before { content: ""; position: absolute; inset: 0 auto auto 50%; inline-size: 2px; block-size: .375rem; margin-inline-start: -1px; background: var(--l-nga); } #sm-celestial-bar .sm-lich__ds li.is-nay small { color: var(--l-phu); } /* Giải thích: bốn hàng gấp, mở một hàng một lúc */ #sm-celestial-bar .sm-hop__giai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } #sm-celestial-bar .sm-hop__giai details { min-inline-size: 0; border-block-start: 1px solid var(--l-ke); } #sm-celestial-bar .sm-hop__giai summary { position: relative; display: flex; align-items: center; min-block-size: 2.75rem; padding-inline-end: 1.5rem; list-style: none; font-family: var(--l-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: var(--l-nga); cursor: pointer; transition: color 90ms var(--l-mem); } #sm-celestial-bar .sm-hop__giai summary::-webkit-details-marker { display: none; } #sm-celestial-bar .sm-hop__giai summary::after { content: ""; position: absolute; inset-inline-end: .25rem; inset-block-start: 50%; inline-size: .4375rem; block-size: .4375rem; margin-block-start: -.3125rem; border-inline-end: 1.5px solid var(--l-vang); border-block-end: 1.5px solid var(--l-vang); transform: rotate(45deg); transition: transform 90ms var(--l-mem); } #sm-celestial-bar .sm-hop__giai summary:hover { color: var(--l-vang); } #sm-celestial-bar .sm-hop__giai details[open] summary::after { transform: translateY(.1875rem) rotate(225deg); } #sm-celestial-bar .sm-hop__giai p { padding-block-end: .75rem; font-size: .8125rem; line-height: 1.6; color: var(--l-phu); } #sm-celestial-bar .sm-hop__giai p::first-letter { text-transform: uppercase; } #sm-celestial-bar .sm-hop__giai strong { font-weight: 500; color: var(--l-nga); } /* Chân tấm dính đáy: màn thấp cuộn phần giữa, nút đi tiếp không bao giờ bị đẩy khuất dưới mép hộp */ #sm-celestial-bar .sm-hop__chan { position: sticky; inset-block-end: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .875rem 1.25rem; background: #14120E; border-block-start: 1px solid var(--l-ke-2); } #sm-celestial-bar .sm-hop__chan p { font-size: .75rem; line-height: 1.5; color: var(--l-nhan); } #sm-celestial-bar dialog a.sm-quick__today { flex: none; display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; margin: 0; padding: 0 1.25rem; border-radius: .25rem; background: var(--l-vang); box-shadow: inset 0 0 0 2px var(--l-vang), inset 0 0 0 3px rgba(20, 18, 14, .4); font-family: var(--l-ui); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--l-nen); white-space: nowrap; transition: background-color 90ms var(--l-mem), box-shadow 90ms var(--l-mem); } #sm-celestial-bar dialog a.sm-quick__today:hover { background: var(--l-nga); box-shadow: inset 0 0 0 2px var(--l-nga), inset 0 0 0 3px rgba(20, 18, 14, .4); color: var(--l-nen); } #sm-celestial-bar dialog :is(a, button, summary):focus-visible { outline: 2px solid var(--l-vang); outline-offset: 2px; } @media (max-width: 768px) { #sm-celestial-bar dialog.sm-quick__explanation { max-inline-size: 30rem; padding: 0 1rem; } #sm-celestial-bar .sm-lich__bang { grid-template-columns: repeat(4, minmax(0, 1fr)); } #sm-celestial-bar .sm-lich__bang div { padding: .5rem .625rem; } #sm-celestial-bar .sm-lich__bang div:nth-child(-n+2) { grid-column: span 2; border-block-end: 1px solid var(--l-ke); } #sm-celestial-bar .sm-lich__bang div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } #sm-celestial-bar .sm-lich__bang dd { font-size: 1rem; } #sm-celestial-bar .sm-lich__ds { grid-template-columns: repeat(6, minmax(0, 1fr)); } #sm-celestial-bar .sm-lich__ds li { block-size: 3.25rem; } #sm-celestial-bar .sm-hop__giai { grid-template-columns: minmax(0, 1fr); } #sm-celestial-bar .sm-hop__chan { flex-direction: column; align-items: stretch; gap: .625rem; padding-block-end: 1rem; } } @media (max-width: 374px) { #sm-celestial-bar .sm-hop__dau { gap: .625rem; } #sm-celestial-bar .sm-hop__ten strong { white-space: nowrap; } #sm-celestial-bar .sm-lich__bang { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sm-celestial-bar .sm-lich__bang div:nth-child(-n+2) { grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0; } #sm-celestial-bar .sm-lich__bang div:nth-child(4), #sm-celestial-bar .sm-lich__bang div:nth-child(6) { border-inline-start: 1px solid var(--l-ke); } #sm-celestial-bar .sm-lich__bang div:nth-child(5) { padding-inline-start: 0; border-inline-start: 0; } #sm-celestial-bar .sm-hop__nhan { flex-wrap: wrap; gap: .25rem 1rem; } #sm-celestial-bar .sm-hop__nhan span { white-space: nowrap; } } /* Đang chờ: giữ đúng chiều cao, tấm trống cùng khung với tấm thật */ #sm-celestial-bar.sm-cbar--compact:is([data-calendar-state="waiting"], [data-calendar-state="loading"]) { block-size: 5.5rem; min-block-size: 0; overflow: hidden; } #sm-celestial-bar.sm-cbar--compact .sm-quick--split.sm-cbar__inner.sm-cbar__inner--waiting { display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; block-size: 4.5rem; min-block-size: 0; margin: 0 auto; padding: 0 1rem; background: linear-gradient(180deg, #1F1B14 0%, #17140F 46%, #14120E 100%); border: 1px solid var(--l-ke-2); border-radius: .25rem; box-shadow: inset 0 0 0 2px var(--l-nen), inset 0 0 0 3px var(--l-ke); } #sm-celestial-bar .sm-cbar__inner--waiting :is(.sm-quick__date-row, .sm-quick__day-row, .sm-quick__ghost) { display: none; } #sm-celestial-bar.sm-cbar--compact .sm-quick--split.sm-cbar__inner--waiting .sm-quick__waiting-detail { display: block; align-self: center; min-block-size: 0; margin: 0; padding: 0; background: none; border: 0; } #sm-celestial-bar.sm-cbar--compact .sm-quick--split.sm-cbar__inner--waiting .sm-cbar__fallback { display: inline-flex; align-items: center; gap: .25rem; min-block-size: 2.75rem; font-family: var(--l-ui); font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--l-vang); } /* Chật: bỏ phần dương lịch khỏi dải (đã có trong Chi tiết), thước giữ tên canh. Đo bằng rem theo khung chứa để A+ 140% tự chạy cùng luật */ @container (max-width: 60rem) { #sm-celestial-bar .sm-bg__duong { display: none; } #sm-celestial-bar .sm-bg__ngay { padding-inline: .75rem 1rem; } #sm-celestial-bar .sm-bg__thuoc li { font-size: .875rem; } #sm-celestial-bar .sm-bg__thuoc li.sm-bg__nay { flex-basis: 6.5rem; } #sm-celestial-bar .sm-bg__mo.sm-quick__info { padding-inline: .75rem; } } /* Điện thoại: ấn đứng trái cao hết tấm, bên phải 3 tầng */ @media (max-width: 768px) { #sm-celestial-bar .sm-cbar__inner.sm-lich { grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .75rem; block-size: 5.5rem; margin-block: 0; padding: .4375rem .625rem .5rem .75rem; } #sm-celestial-bar .sm-bg__an { grid-row: 1 / 3; inline-size: 3.25rem; block-size: 6.25rem; margin-block: -.875rem; } #sm-celestial-bar .sm-bg__ngay { grid-column: 2 / 4; grid-row: 1; padding: 0; gap: 0; } #sm-celestial-bar .sm-bg__phan { font-size: 1.25rem; } #sm-celestial-bar .sm-bg__lich { font-size: .75rem; } #sm-celestial-bar .sm-bg__duong { display: inline; } #sm-celestial-bar .sm-bg__mo.sm-quick__info { grid-column: 3; grid-row: 1; align-self: start; min-block-size: 1.5rem; padding: 0; gap: .375rem; font-size: .75rem; } #sm-celestial-bar .sm-bg__mo::after { inset: -.5rem 0; } #sm-celestial-bar .sm-bg__thuoc { grid-column: 2 / 4; grid-row: 2; align-self: end; gap: 2px; block-size: 1.375rem; margin: 0; border: 0; } #sm-celestial-bar .sm-bg__thuoc li { padding: 0; align-self: end; block-size: .1875rem; background: var(--l-ke-2); } #sm-celestial-bar .sm-bg__thuoc li > span, #sm-celestial-bar .sm-bg__thuoc li::after, #sm-celestial-bar .sm-bg__thuoc li::before { display: none; } #sm-celestial-bar .sm-bg__thuoc li.is-tot:not(.sm-bg__nay) { background: var(--l-vang); } #sm-celestial-bar .sm-bg__thuoc li.sm-bg__nay { flex: 0 0 auto; display: flex; align-self: stretch; block-size: auto; align-items: center; gap: .375rem; padding: 0 .5rem; } #sm-celestial-bar .sm-bg__thuoc li.sm-bg__nay > span { display: inline; } #sm-celestial-bar .sm-bg__nay-chi { font-size: 1rem; } #sm-celestial-bar .sm-bg__nay-gio { font-size: .75rem; } #sm-celestial-bar .sm-bg__kim { block-size: .1875rem; } #sm-celestial-bar.sm-cbar--compact:is([data-calendar-state="waiting"], [data-calendar-state="loading"]) { block-size: 6.5rem; } #sm-celestial-bar.sm-cbar--compact .sm-quick--split.sm-cbar__inner.sm-cbar__inner--waiting { block-size: 5.5rem; } } @media (max-width: 430px) { #sm-celestial-bar .sm-bg__lich.is-nhuan .sm-bg__duong { display: none; } } @container (max-width: 20rem) { #sm-celestial-bar .sm-cbar__inner.sm-lich { column-gap: .5rem; padding-inline: .625rem .5rem; } #sm-celestial-bar .sm-bg__lich .sm-bg__duong { display: none; } #sm-celestial-bar .sm-bg__nay-chi > span { display: none; } } @container (max-width: 17rem) { #sm-celestial-bar .sm-bg__mo > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } } @media (min-width: 769px) { @container (max-width: 34rem) { #sm-celestial-bar .sm-bg__thuoc li:not(.sm-bg__nay) > span { display: none; } } } @media (prefers-reduced-motion: reduce) { #sm-celestial-bar .sm-bg__kim { animation-play-state: paused; } #sm-celestial-bar .sm-cbar__inner.sm-lich, #sm-celestial-bar .sm-bg__mo svg, #sm-celestial-bar dialog * { transition: none; } #sm-celestial-bar dialog.sm-quick__explanation[open] { animation: none; } }