/* Phase A: only explicit design hooks; existing call/media surfaces untouched. */ #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"])[hidden] { display: none !important; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone { margin-top: 20px; padding-top: 17px; border-top: 1px solid #E6E1DD; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-title { margin: 0 0 6px; color: #A8111A; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone > p { margin: 0 0 12px; color: #6B625C; font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone .tl-danger-outline, #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone .tl-btn-danger { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border: 1px solid #e8b9bd; border-radius: 9px; background: #fff !important; color: #A8111A !important; box-shadow: none; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; cursor: pointer; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone .tl-danger-outline:hover { background: #fff5f5 !important; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone .tl-danger-leave { border-color: #D9D1CA; color: #6B625C !important; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-danger-zone button:focus-visible, #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-preview button:focus-visible { outline: 2px solid #A8111A; outline-offset: 3px; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-preview { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; margin: 0 0 10px; padding: 11px 12px; border: 1px solid #f2e2a8; border-radius: 9px; background: #fff4ce; color: #78521b; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-preview[hidden] { display: none !important; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-thumb { display: block; width: 38px; height: 38px; box-sizing: border-box; padding: 0; object-fit: cover; border: 0; border-radius: 6px; background: #fff; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-thumb img { display: block; width: 38px; height: 38px; max-width: 38px; max-height: 38px; object-fit: cover; border-radius: inherit; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-copy { min-width: 0; overflow-wrap: anywhere; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-copy strong, #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-copy b { display: block; margin-bottom: 2px; color: #644714; font-size: 12px; font-weight: 600; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-copy small, #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-copy p, #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-copy > span { display: block; margin: 0; color: #78521b; font-size: 11.5px; line-height: 1.55; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-actions button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid #d8bf76; border-radius: 7px; background: #fffdf5; color: #644714; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-actions button:last-child { min-width: 38px; } @media (max-width: 1100px) { #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-preview { grid-template-columns: 38px minmax(0, 1fr); } #tlApp:is([data-pc-design="a"],[data-pc-design="b"],[data-pc-design="c"]) .tl-photo-scope-actions { grid-column: 2; } } /* Phase B: PC capability flag only. Local fonts are identical to mobile assets. */ @font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) { --ffa-do: #C1121C; --ffa-do-dam: #A8111A; --chu: #16120F; --chu-mo: #6B625C; --chu-nhat: #8E857E; --nen: #F6F4F2; --nen-phu: #F1EDEA; --vien: #E6E1DD; --vien-dam: #D9D1CA; --xanh: #1677d2; --luc: #16a36a; --ho-phach: #f2b705; --ho-phach-nen: #fff4ce; --ho-phach-chu: #8b611c; /* Text tones meet small-text contrast on both white and chat background. */ --tl-design-caption: #6B625C; --tl-design-seen: #0d744a; --tl-design-call-voice: #0d784d; --tl-design-call-video: #1268b8; --tl-blue: var(--ffa-do); --tl-line: var(--vien); --tl-ink: var(--chu); display: flex; box-sizing: border-box; width: auto; min-width: 0; height: 100%; min-height: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; border: 1px solid var(--vien); border-radius: 0; background: #fff; color: var(--chu); box-shadow: none; font: 400 13.5px/1.5 "Be Vietnam Pro", system-ui, sans-serif; container: tl-design / inline-size; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) *, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) *::before, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) *::after { box-sizing: border-box; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) button, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) input, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) textarea, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) select { font-family: inherit; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) [hidden] { display: none !important; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) button:focus-visible, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) a:focus-visible, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) [tabindex]:focus-visible, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) input:focus-visible, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) textarea:focus-visible, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) select:focus-visible { outline: 2px solid var(--ffa-do-dam); outline-offset: 3px; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) { display: flex; box-sizing: border-box; width: 100%; min-width: 0; height: min(900px, calc(100dvh - 200px)); min-height: 500px; align-items: stretch; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail { box-sizing: border-box; display: flex; width: 68px; min-width: 68px; height: 100%; flex: 0 0 68px; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px 10px; border-right: 1px solid #E6E1DD; background: #fff; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-item, #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-brand { box-sizing: border-box; display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #6B625C; box-shadow: none; cursor: pointer; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-brand { margin: 0 0 11px; padding: 0; border-radius: 50%; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-rail-avatar { display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border: 1px solid #E6E1DD; border-radius: 50%; background: #F1EDEA; color: #16120F; font-size: 12px; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-item.is-current { border-color: transparent; background: #FDE8E9; color: #C1121C; box-shadow: none; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-item:hover { background: #F1EDEA; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail button:focus-visible { outline: 2px solid #A8111A; outline-offset: 3px; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-spacer { flex: 1 1 auto; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top { min-height: 36px; height: 36px; flex: 0 0 36px; padding: 0 12px; border-bottom: 1px solid var(--vien); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top h2 { margin: 0; font-size: 13.5px; font-weight: 600; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions { display: flex; min-width: 0; align-items: center; gap: 8px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions .tl-btn { min-height: 30px; padding: 5px 9px; font-size: 11.5px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions .tl-meta { margin: 0; color: var(--tl-design-caption); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-grid { display: flex; width: 100%; height: auto; min-height: 0; max-height: none; flex: 1 1 0; flex-wrap: wrap; align-content: flex-start; align-items: stretch; overflow: auto; overscroll-behavior: contain; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-side { display: flex; width: 320px; min-width: 0; height: 100%; min-height: 0; flex: 0 0 320px; flex-direction: column; border-right: 1px solid var(--vien-dam); background: #fff; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv { display: flex; min-width: 0; height: 100%; min-height: 0; flex: 999 1 520px; flex-direction: column; background: #fff; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context { position: static; inset: auto; z-index: auto; display: block; width: 328px; min-width: 0; height: 100%; min-height: 0; flex: 0 0 328px; overflow: auto; padding: 20px 18px; border-left: 1px solid var(--vien-dam); background: #fff; box-shadow: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"])[data-info-open="false"] .tl-context { display: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-side-tools { display: flex; min-height: 47px; flex: 0 0 47px; align-items: center; padding: 8px 14px; border-bottom: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-side-tools-title { margin-right: auto; color: var(--chu); font-size: 15px; font-weight: 600; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-search { flex: 0 0 auto; padding: 0 12px 12px; border-bottom: 1px solid var(--vien); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-search-row { gap: 7px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-search-row input { height: 36px; min-width: 0; border-color: transparent; border-radius: 9px; padding: 7px 10px; background: var(--nen-phu); color: var(--chu); font-size: 12px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-search-row input::placeholder, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlText::placeholder { color: var(--tl-design-caption); opacity: 1; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-create-toggle, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-hidden-shortcut { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; padding: 7px; border-color: var(--vien); border-radius: 9px; color: var(--ffa-do); background: #fff; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-list { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; scrollbar-gutter: stable; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel { display: flex; width: 100%; height: 64px; min-height: 64px; align-items: center; gap: 10px; margin: 0; padding: 7px 12px 7px 15px; border: 0; border-bottom: 1px solid #F1EDEA; background: #fff; color: var(--chu); text-align: left; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel.active, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel.is-active { border-left: 0; background: #FDE8E9; box-shadow: inset 3px 0 0 var(--ffa-do); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel:hover { background: #f7f8fa; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel.active:hover { background: #FDE8E9; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-avatar { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; margin: 0; border-radius: 50%; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-copy { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; gap: 1px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-name-row, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-preview-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-name { display: block; min-width: 0; flex: 1 1 0; overflow: hidden; color: var(--chu); font-size: 13.5px; font-weight: 500; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel.has-unread .tl-channel-name { font-weight: 600; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-time { flex: 0 0 auto; color: var(--tl-design-caption); font-size: 10.5px; line-height: 17px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-preview { min-width: 0; flex: 1 1 0; overflow: hidden; margin: 0; color: var(--tl-design-caption); font-size: 12px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-unread { display: inline-flex; min-width: 18px; height: 18px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; padding: 0 5px; background: var(--ffa-do); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 18px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-project { display: flex; min-width: 0; height: 15px; align-items: center; gap: 5px; overflow: hidden; color: #78521b; font-size: 10.5px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-project .tl-tag, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-project .tl-tag-project { flex: 0 0 auto; margin: 0; padding: 0 4px; border-radius: 4px; background: var(--ho-phach-nen); color: #78521b; font-size: 9px; line-height: 14px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-channel-project > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-head { display: flex; height: auto; min-height: 64px; flex: 0 0 auto; flex-wrap: wrap; align-content: center; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--vien); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlHeaderAvatar { width: 40px; height: 40px; flex: 0 0 40px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-title { min-width: 100px; flex: 1 1 100px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-title strong { overflow: hidden; color: var(--chu); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-title small { overflow: hidden; margin-top: 2px; color: var(--tl-design-caption); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-head .tl-btn { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border-color: var(--vien-dam); border-radius: 9px; padding: 7px 10px; color: var(--chu); background: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-head .tl-back-list { display: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-header-work-cluster { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; background: var(--nen-phu); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-header-work-cluster .tl-btn { min-height: 30px; border-color: transparent; padding: 5px 8px; background: transparent; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-header-work-cluster .tl-btn[aria-pressed="true"], #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-header-work-cluster .tl-btn.is-active { background: #fff; box-shadow: 0 1px 4px #16120F18; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVoiceCall:not([hidden]), #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVideoCall:not([hidden]) { min-width: 82px; min-height: 36px; border: 0; color: #fff; font-size: 11.5px; gap: 6px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVoiceCall:not([hidden]) { background: var(--tl-design-call-voice); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVideoCall:not([hidden]) { background: var(--tl-design-call-video); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVoiceCall::before, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVoiceCall::after, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVideoCall::before, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVideoCall::after { content: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-call-action > [aria-hidden="true"] { font-size: 15px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVoiceCall:hover { background: #096541; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlVideoCall:hover { background: #0e589e; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed { flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; padding: 18px 22px 14px; background: var(--nen); scrollbar-gutter: stable; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-day { margin: 4px 0 17px; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg { position: relative; margin-bottom: 14px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg:not(.has-photos) { max-width: min(82%, 640px); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.tl-cluster-grouped { margin-top: -11px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg-name { margin: 0 0 5px; color: var(--tl-design-caption); font-size: 11.5px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg-avatar { width: 32px; height: 32px; flex: 0 0 32px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-cluster-grouped .tl-msg-name { display: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-bubble:not(.is-photo-only) { min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid var(--vien); border-radius: 14px 14px 14px 4px; background: #fff; color: var(--chu); box-shadow: 0 1px 2px #16120F05; font-size: 13.5px; line-height: 1.6; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.mine .tl-bubble:not(.is-photo-only) { border-color: #f0ced3; border-radius: 14px 14px 4px 14px; background: #fff0f2; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-cluster-middle .tl-bubble:not(.is-photo-only), #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-cluster-end .tl-bubble:not(.is-photo-only) { border-radius: 4px 14px 14px 14px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.mine.tl-cluster-middle .tl-bubble:not(.is-photo-only), #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.mine.tl-cluster-end .tl-bubble:not(.is-photo-only) { border-radius: 14px 4px 14px 14px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-reply { color: #52677f; font-size: 12px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-stamp { display: flex; align-items: center; gap: 5px; color: var(--tl-design-caption); font-size: 10.5px; line-height: 17px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) [data-receipt-state="sent"] { color: var(--tl-design-caption); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) [data-receipt-state="delivered"] { color: #6B625C; font-weight: 500; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) [data-receipt-state="read"] { color: var(--tl-design-seen); font-weight: 600; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-cluster-time-compact { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg-actions { position: absolute; top: 0; bottom: auto; left: 0; right: auto; width: max-content; max-width: 100%; margin: 0; transform: translateY(-100%); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.mine .tl-msg-actions { left: auto; right: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-stamp:has(.tl-cluster-time-compact):not(:has([data-receipt-state])) { height: 0; margin: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-compose { flex: 0 0 auto; padding: 11px 16px 10px; border-top: 1px solid var(--vien); background: #fff; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-composer-box { min-width: 0; border: 1px solid var(--vien-dam); border-radius: 10px; background: #fff; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-composer-box:focus-within { border-color: #C1121C; box-shadow: 0 0 0 2px #C1121C14; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-compose-row { min-width: 0; gap: 8px; padding: 8px 9px 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-compose-row > .tl-attach-wrap, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-compose-row > .tl-quick-emojis { display: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-text-wrap { min-width: 0; border: 0; background: transparent; box-shadow: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-text-wrap:focus-within { border: 0; box-shadow: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-file-chip .tl-draft-preview { position: static; display: grid; width: 66px; height: 52px; flex: 0 0 66px; place-items: center; margin: 0; border: 0; border-radius: 6px; padding: 0; background: transparent; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-file-chip .tl-file-meta { min-width: 0; flex: 1 1 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-file-chip .tl-file-meta b { color: var(--chu); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-file-chip .tl-file-meta small { color: var(--tl-design-caption); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlText { min-width: 0; min-height: 43px; max-height: 140px; border: 0; border-radius: 0; padding: 6px 3px; background: transparent; color: var(--chu); font-size: 13.5px; line-height: 1.6; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlText:focus-visible { outline: none; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlSend { min-width: 58px; min-height: 36px; margin-bottom: 6px; border-color: var(--ffa-do); border-radius: 8px; background: var(--ffa-do); color: #fff; font-size: 12px; font-weight: 600; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlSend:hover { background: var(--ffa-do-dam); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-composer-bottom { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 2px 8px 5px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-desktop-composer { display: block; min-width: 0; margin: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-desktop-toolbar { display: flex; min-height: 30px; align-items: center; gap: 2px; flex-wrap: wrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-desktop-tool { display: inline-grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid transparent; border-radius: 6px; padding: 4px; background: transparent; color: #6B625C; font-size: 16px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-desktop-gif { font-size: 10px; font-weight: 700; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-composer-key-hint { margin-left: auto; color: var(--tl-design-caption); font-size: 10.5px; line-height: 1.5; white-space: normal; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-compose-foot { color: var(--tl-design-caption); font-size: 10.5px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context h3 { margin: 0 0 12px; color: var(--chu); font-size: 13.5px; font-weight: 600; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context p, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context small, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-meta { color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.6; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context section { margin-bottom: 18px; padding-bottom: 18px; border-color: var(--vien); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context a { color: #1268b8; overflow-wrap: anywhere; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-security-switch b, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-security-field b { color: var(--chu); font-size: 12px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-security-switch small, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-security-field small { color: var(--tl-design-caption); font-size: 11.5px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-security-field { flex-wrap: wrap; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-member { min-height: 44px; gap: 8px; font-size: 12px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-member-details { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-member-chat { min-height: 30px; padding: 5px 8px; border: 1px solid #cbdcf0; border-radius: 7px; background: #fff; color: #1268b8; font: inherit; font-size: 10.5px; } /* Only the standalone employee shell changes its outer header; ERP is untouched. */ body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) { display: flex; width: 100%; height: 100dvh; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-header { height: 52px; min-height: 52px; flex-basis: 52px; padding: 0 16px; background: #C1121C; box-shadow: none; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand { gap: 9px; font-family: "Be Vietnam Pro", system-ui, sans-serif; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand img { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand-copy strong { font-size: 15px; font-weight: 700; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand-copy small { font-size: 8px; font-weight: 500; letter-spacing: .7px; color: #fff1df; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-header-status { display: none; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-layout { display: flex; width: 100%; max-width: none; height: calc(100dvh - 52px); min-height: 0; flex: 1 1 0; margin: 0; padding: 0; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-root { width: 100%; height: 100%; min-height: 0; max-width: none; margin: 0; padding: 0; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) { height: 100%; min-height: 0; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top { height: 0; min-height: 0; flex-basis: 0; padding: 0; border: 0; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top h2 { display: none; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions { position: fixed; z-index: 35; top: 8px; right: 16px; height: 36px; color: #fff; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions .tl-btn { min-height: 32px; border-color: #ffffff55; background: #fff; color: #A8111A; font-size: 11.5px; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions #tlWho { color: #fff; font-size: 11.5px; } @container tl-design (max-width: 1167px) { #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context { width: 100%; height: auto; max-height: 330px; flex-basis: 100%; border-top: 1px solid var(--vien); border-left: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-side, #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv { flex-shrink: 0; } } @container tl-design (max-width: 839px) { #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv { order: 0; width: 100%; height: max(520px, 100%); flex-basis: 100%; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-side { order: 1; width: 100%; height: 240px; flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--vien); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-context { order: 2; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed { padding-inline: 14px; } } @container tl-design (max-width: 520px) { #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-conv-head { padding: 8px 10px; gap: 6px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-header-work-cluster { order: 2; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-compose { padding: 9px 10px; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-composer-key-hint { margin-left: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg { max-width: 94%; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg-actions { left: auto; right: 0; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.mine .tl-msg-actions { left: auto; right: 0; } } @media (max-width: 780px) { body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand-copy small { display: none; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand-copy strong { font-size: 13px; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top-actions { right: 10px; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlWho { display: none; } body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlNotify { max-width: 154px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) button { transition: none; } } /* Phase C hooks require genuine server data; no invented presence or duration. */ #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite { --tl-avatar-size: 40px; display: inline-grid; width: var(--tl-avatar-size); height: var(--tl-avatar-size); flex: 0 0 var(--tl-avatar-size); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.5px; overflow: hidden; padding: 0; border: 0; border-radius: 50%; background: #fff; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite[data-count="2"] { grid-template-rows: minmax(0, 1fr); } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite[data-count="3"] > .tl-avatar-cell:first-child { grid-row: span 2; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite.tl-channel-avatar { --tl-avatar-size: 44px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] #tlHeaderAvatar.tl-avatar-composite { --tl-avatar-size: 40px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite.tl-info-avatar { --tl-avatar-size: 72px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-composite.tl-msg-avatar { --tl-avatar-size: 32px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-channel-avatar > .tl-avatar-composite { --tl-avatar-size: 44px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] #tlHeaderAvatar > .tl-avatar-composite { --tl-avatar-size: 40px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-info-avatar { display: flex; width: 72px; height: 72px; flex-basis: 72px; margin: 0 auto 12px; border: 0; background: transparent; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-info-avatar > .tl-avatar-composite { --tl-avatar-size: 72px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-msg-avatar > .tl-avatar-composite { --tl-avatar-size: 32px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] #tlInfo > .tl-info-name { margin-bottom: 12px; color: var(--chu); font-size: 15px; text-align: center; overflow-wrap: anywhere; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-cell { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; background: #e9edf3; color: #34445b; font-size: calc(var(--tl-avatar-size) * .2); font-weight: 600; line-height: 1; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-cell img { display: block; width: 100%; height: 100%; object-fit: cover; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-overflow { background: #6B625C; color: #fff; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-tone-0 { background: #F1EDEA; color: #2A241F; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-tone-1 { background: #ede5f6; color: #654a89; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-tone-2 { background: #e3f1ea; color: #306c53; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-tone-3 { background: #fff0cf; color: #80601e; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-avatar-tone-4 { background: #fbe3e8; color: #8d354b; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-info-identity { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 0 18px; text-align: center; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-info-identity strong { max-width: 100%; color: var(--chu); font-size: 15px; overflow-wrap: anywhere; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-info-identity small { margin: 0; color: var(--tl-design-caption); font-size: 11.5px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-indicator { display: flex; min-height: 29px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 3px 16px 4px 42px; background: var(--nen); color: var(--tl-design-caption); font-size: 11.5px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-indicator[hidden] { display: none !important; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-dots { display: inline-flex; height: 22px; align-items: center; gap: 3px; padding: 0 9px; border: 1px solid var(--vien); border-radius: 12px; background: #fff; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-dots > * { display: block; width: 5px; height: 5px; border-radius: 50%; background: #6B625C; animation: tlDesignTyping .95s ease-in-out infinite; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-dots > :nth-child(2) { animation-delay: .18s; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-dots > :nth-child(3) { animation-delay: .36s; } @keyframes tlDesignTyping { 0%, 65%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-tabs { display: flex; gap: 3px; margin: 0 0 12px; border-bottom: 1px solid var(--vien); } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-tabs [role="tab"] { min-height: 36px; flex: 1 1 0; border: 0; border-bottom: 2px solid transparent; padding: 7px 4px; background: transparent; color: var(--tl-design-caption); font: inherit; font-size: 11.5px; cursor: pointer; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--ffa-do); color: var(--ffa-do-dam); font-weight: 600; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-panel[hidden] { display: none !important; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-grid > button, #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-grid > a { display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 6px; padding: 0; background: var(--nen-phu); cursor: pointer; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-grid img { display: block; width: 100%; height: 100%; object-fit: cover; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-all { display: inline-flex; min-height: 36px; align-items: center; margin-top: 8px; border: 0; padding: 5px 0; background: transparent; color: #1268b8; font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-links { display: grid; gap: 7px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-link { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 9px; border: 1px solid var(--vien); border-radius: 7px; color: #1268b8; text-decoration: none; overflow-wrap: anywhere; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-link b { font-size: 11.5px; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-link span, #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-library-link small { color: var(--tl-design-caption); font-size: 10.5px; line-height: 1.5; } #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-danger-zone .tl-leave-outline { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; margin-top: 8px; padding: 10px 12px; border: 1px solid #D9D1CA; border-radius: 9px; background: #fff; color: #6B625C; font: inherit; font-size: 12px; font-weight: 500; } #thaoLuanRoot[data-pc-design="c"] #tlLibraryView { min-width: 0; color: #16120F; font: 400 13.5px/1.5 "Be Vietnam Pro", system-ui, sans-serif; } #thaoLuanRoot[data-pc-design="c"] #tlLibraryView .tl-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } #thaoLuanRoot[data-pc-design="c"] #tlLibraryView .tl-library-grid > button { display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: #F1EDEA; cursor: pointer; } #thaoLuanRoot[data-pc-design="c"] #tlLibraryView .tl-library-grid img { width: 100%; height: 100%; object-fit: cover; } #thaoLuanRoot[data-pc-design="c"] #tlLibraryView .tl-library-more { min-height: 40px; margin-top: 12px; padding: 8px 12px; border: 1px solid #D9D1CA; border-radius: 8px; background: #fff; color: #1268b8; font: inherit; } @media (prefers-reduced-motion: reduce) { #tlApp[data-pc-layout="true"][data-pc-design="c"] .tl-typing-dots > * { animation: none; } } /* 04 Nov: additive SVG presentation and bubble tones only. All 07 layout, sidebar ordering, library, receipt and protected call/media rules remain. */ #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed { background: #F6F4F2; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-bubble:not(.is-photo-only) { background: #fff; box-shadow: 0 1px 2px rgba(39,52,67,.07); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-msg.mine .tl-bubble:not(.is-photo-only) { background: #FDE8E9; } #thaoLuanRoot .tl-ui-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; } #tlApp[data-pc-layout="true"] .tl-conv-head .tl-ui-icon, #tlApp[data-pc-layout="true"] .tl-desktop-toolbar .tl-ui-icon { width: 17px; height: 17px; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-ui-icon { width: 21px; height: 21px; } #tlApp[data-pc-layout="true"] .tl-create-menu .tl-ui-icon, #tlApp[data-pc-layout="true"] .tl-group-admin-menu .tl-ui-icon, #tlApp[data-pc-layout="true"] .tl-msg-menu .tl-ui-icon, #tlApp[data-pc-layout="true"] .tl-attach-menu .tl-ui-icon, #thaoLuanRoot .tl-profile-menu .tl-ui-icon { width: 15px; height: 15px; } /* currentColor in SVG markup follows the button state. Do not inherit opacity: that would apply the disabled button's opacity twice to its child icon. */ #thaoLuanRoot button:disabled .tl-ui-icon { color: inherit; } /* Full PC workspace phase10. This phase deliberately reorganizes information under the new request; CSS08 and all protected media/editor styles stay intact. */ #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-main-workspace { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; background: var(--nen); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-head { display: flex; min-height: 64px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--vien); background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-head h2, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-head h3 { min-width: 0; margin: 0; color: var(--chu); font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-head small { color: var(--tl-design-caption); font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-head p { margin: 4px 0 0; color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-pc-design] .tl-feed { background: var(--tl-chat-background,#F6F4F2); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-pc-design] .tl-bubble:not(.is-photo-only) { font-size: var(--tl-message-font-size,13.5px); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-back { display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 7px; white-space: nowrap; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]):is([data-workspace="directory"],[data-workspace="library"]) .tl-context { display: none; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]):is([data-workspace="directory"],[data-workspace="library"]) .tl-conv > :is(.tl-conv-head,#tlPinnedBar,#tlFeed,#tlCompose,#tlTypingIndicator,#tlMessageSelectionBar) { display: none; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] .tl-side .tl-search { display: none; } /* A single information/search column: no extra fifth column. */ #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-context:has(.tl-info-pane) { overflow: hidden; padding: 0; background: var(--nen); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane { height: 100%; min-height: 0; overflow: auto; padding: 14px; scrollbar-gutter: stable; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane > section, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-card { margin: 0 0 12px; padding: 14px; border: 1px solid var(--vien); border-radius: 12px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane > section:last-child { margin-bottom: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane h3, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; color: var(--chu); font-size: 12px; font-weight: 600; line-height: 1.5; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0 12px; text-align: center; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity .tl-info-avatar { margin-bottom: 4px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity h3, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity strong { margin: 0; color: var(--chu); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity small, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity p { margin: 0; color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.5; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-project { max-width: 100%; padding: 3px 7px; border-radius: 6px; background: #fff4ce; color: #78521b; font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-identity .tl-project-tag { max-width: 100%; padding: 3px 7px; border-radius: 6px; background: #fff4ce; color: #78521b; font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-actions button { display: flex; min-width: 0; min-height: 65px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--vien-dam); border-radius: 9px; padding: 8px 3px; background: #fff; color: #6B625C; font: inherit; font-size: 10.5px; line-height: 1.4; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-actions button:hover { background: #f7f9fb; border-color: #bac7d7; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-actions .tl-ui-icon { width: 19px; height: 19px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoSecurity .tl-security-panel { margin: 0; padding: 0; border: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoSecurity .tl-security-switch, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoSecurity .tl-security-field { gap: 10px; padding: 10px 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoSecurity .tl-security-switch:last-child { border-bottom: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoDanger .tl-danger-zone { margin: 0; padding: 0; border: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoSecurity45 .tl-security-panel { margin: 0; padding: 0; border: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) #tlInfoDanger45 .tl-danger-zone { margin: 0; padding: 0; border: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-role { display: inline-block; width: fit-content; margin-top: 5px; padding: 2px 5px; border-radius: 4px; background: #F1EDEA; color: #A8111A; font-size: 9.5px; line-height: 1.5; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-role[data-role="CHU_KENH"], #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-role[data-role="QUAN_TRI"] { background: #FDE8E9; color: #A8111A; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-role[data-role="guest"] { background: #fff4ce; color: #78521b; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member { min-width: 0; gap: 9px; padding: 10px 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-details { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-actions { display: flex; min-width: 0; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-member-chat { min-height: 30px; padding: 5px 7px; font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-library-tabs { margin-bottom: 8px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-library-grid { gap: 5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-library-all { justify-content: center; width: 100%; margin-top: 8px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane .tl-empty-state { color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.6; } /* The right-side search keeps the same width as information. */ #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-pane { display: flex; height: 100%; min-width: 0; min-height: 0; flex-direction: column; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-pane-head, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-pane > header { display: flex; min-height: 56px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--vien); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-pane h3 { margin: 0; color: var(--chu); font-size: 13.5px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls { display: flex; min-width: 0; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--vien); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls > label { display: flex; min-width: 0; flex: 1 1 110px; flex-direction: column; gap: 5px; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls > label:first-child { flex-basis: 100%; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls input, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls select { width: 100%; min-width: 0; min-height: 36px; border: 1px solid var(--vien-dam); border-radius: 8px; padding: 7px 8px; background: #fff; color: var(--chu); font: inherit; font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls input[type="search"] { background: var(--nen-phu); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls .tl-full-search-input { display: flex; min-width: 0; flex: 1 1 100%; flex-direction: row; align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid var(--vien-dam); border-radius: 8px; background: var(--nen-phu); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-full-search-input > .tl-ui-icon { flex: 0 0 17px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-controls .tl-full-search-input input { min-width: 0; min-height: 30px; flex: 1 1 0; border: 0; padding: 5px 0; background: transparent; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-full-search-input button { width: 25px; min-width: 25px; min-height: 25px; flex: 0 0 25px; border: 0; padding: 4px; background: transparent; color: var(--tl-design-caption); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-filter-row { display: flex; min-width: 0; width: 100%; align-items: center; gap: 6px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-filter-row > span { flex: 0 0 auto; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-filter-row button { display: inline-flex; min-width: 0; min-height: 32px; flex: 1 1 0; align-items: center; justify-content: center; gap: 5px; padding: 5px; font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-filter-row button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-filter-row .is-active { border-color: #1677d2; background: #F1EDEA; color: #A8111A; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-sender-picker, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-date-picker { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-sender-picker > strong { display: block; margin: 3px 4px 7px; color: var(--tl-design-caption); font-size: 10.5px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-sender { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 7px; padding: 8px; border: 0; border-radius: 7px; background: #fff; color: var(--chu); font: inherit; font-size: 11.5px; text-align: left; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-sender[aria-pressed="true"] { background: #F1EDEA; color: #A8111A; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-date-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-date-presets button { min-height: 30px; padding: 5px 7px; font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-date-range { display: grid; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-date-range > label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-date-range input { width: 100%; min-width: 0; max-width: 100%; font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-results { min-width: 0; min-height: 0; flex: 1 1 0; overflow: auto; padding: 10px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-results > p, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-summary { margin: 4px 4px 10px; color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.6; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result { display: flex; width: 100%; min-width: 0; align-items: flex-start; gap: 9px; margin: 0 0 7px; padding: 12px 10px; border: 0; border-radius: 9px; background: #fff; color: var(--chu); font: inherit; text-align: left; cursor: pointer; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result:hover, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result.is-current, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result.is-selected { background: #F1EDEA; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; overflow: hidden; border-radius: 50%; background: #F1EDEA; color: #2A241F; font-size: 10.5px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result-copy { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; gap: 5px; color: #6B625C; font-size: 11.5px; line-height: 1.6; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result-meta { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 7px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result-copy > small { color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-empty { display: flex; min-height: 210px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.7; text-align: center; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-empty .tl-ui-icon { width: 40px; height: 40px; color: #6B625C; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result .tl-message-search-meta { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 8px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result b { min-width: 0; color: var(--chu); font-size: 12px; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result time { flex: 0 0 auto; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result .tl-message-search-text { color: #6B625C; font-size: 11.5px; line-height: 1.65; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-result mark { border-radius: 3px; padding: 0 2px; background: #fff1ad; color: #644714; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-pane footer { flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--vien); } /* Full library keeps the server-backed tabs and pagination. */ #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-toolbar { display: flex; min-width: 0; flex: 0 0 auto; flex-direction: column; gap: 11px; padding: 14px 20px; border-bottom: 1px solid var(--vien); background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-tabs { margin: 0; padding: 3px; border: 0; border-radius: 9px; background: var(--nen-phu); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-tabs [role="tab"] { min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; color: var(--tl-design-caption); font-size: 12px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-tabs [aria-selected="true"] { background: #fff; color: var(--chu); box-shadow: 0 1px 4px #16120F12; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-full-search-input { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--vien-dam); border-radius: 8px; background: var(--nen-phu); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-full-search-input input { min-width: 0; min-height: 25px; flex: 1 1 0; border: 0; padding: 3px 0; background: transparent; color: var(--chu); font: inherit; font-size: 12px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: 9px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters > label { display: flex; min-width: 110px; flex: 1 1 140px; flex-direction: column; gap: 5px; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters input, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters select { width: 100%; min-width: 0; min-height: 36px; border: 1px solid var(--vien-dam); border-radius: 8px; padding: 7px 9px; background: #fff; color: var(--chu); font: inherit; font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters > label:first-child { flex: 3 1 220px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters > .tl-date-range { flex: 2 1 240px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-filters > button { min-height: 36px; font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-main, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library > .tl-library-panel, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-results { min-width: 0; min-height: 0; flex: 1 1 0; overflow: auto; padding: 17px 20px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-result-count { margin: 0 0 15px; color: var(--tl-design-caption); font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-month-group { margin-bottom: 22px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-month-group h4 { margin: 0 0 10px; color: var(--tl-design-caption); font-size: 11.5px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-month-group h3 { margin: 0 0 10px; color: var(--tl-design-caption); font-size: 12px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-grid > * { min-width: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--vien); border-radius: 9px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-media { display: block; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; background: var(--nen-phu); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-media img, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-media video { display: block; width: 100%; height: 100%; object-fit: cover; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-meta { padding: 9px; color: var(--tl-design-caption); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; padding: 0 9px 9px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-actions button { min-height: 30px; padding: 5px 7px; font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-media { position: relative; min-width: 0; border: 1px solid var(--vien); border-radius: 9px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-media-open { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 8px 8px 0 0; background: var(--nen-phu); cursor: pointer; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-media-open img, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-media-open video { display: block; width: 100%; height: 100%; object-fit: cover; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-media > small { display: block; padding: 8px 9px; color: var(--tl-design-caption); font-size: 10.5px; line-height: 1.55; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: #16120F22; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-menu { position: absolute; z-index: 20; right: 0; bottom: 40px; width: max-content; min-width: min(180px,100%); max-width: min(220px,100%); overflow: hidden; padding: 5px; border: 1px solid var(--vien-dam); border-radius: 9px; background: #fff; box-shadow: 0 8px 28px #16120F24; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-menu button { display: flex; width: 100%; min-width: 0; min-height: 34px; align-items: center; gap: 7px; border: 0; border-radius: 6px; padding: 7px; background: #fff; color: #6B625C; font: inherit; font-size: 11.5px; text-align: left; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-menu button:hover { background: #F1EDEA; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-item-menu [data-library-action44="hide"] { color: #A8111A; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-file, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-link { position: relative; min-width: 0; margin-bottom: 9px; padding: 12px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-file { display: flex; align-items: center; gap: 10px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-file-open { display: flex; min-width: 0; flex: 1 1 0; align-items: center; gap: 12px; border: 0; padding: 0; background: transparent; color: var(--chu); text-align: left; cursor: pointer; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-file-open > span:last-child { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; gap: 5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-file-open b { color: var(--chu); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-file-open small, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-link > small { display: block; color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-file-type { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 9px; background: #F1EDEA; color: #A8111A; font-size: 10.5px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-file .tl-library-item-actions { flex: 0 0 auto; align-items: center; padding: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-link > a { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin-bottom: 8px; color: #1268b8; text-decoration: none; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-link > a b { color: var(--chu); font-size: 13.5px; font-weight: 500; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-link > a span { font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-full-link .tl-library-item-actions { padding: 10px 0 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-shared-doc-row { min-height: 66px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 9px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-links { gap: 10px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-link { padding: 13px 15px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library .tl-library-link b { font-size: 13.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-pagination { flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid var(--vien); background: #fff; } /* Directory navigation uses only categories and counts provided by the API. */ #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav { min-width: 0; padding: 12px 10px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-group { margin-bottom: 22px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-group h4 { margin: 0 10px 9px; color: var(--tl-design-caption); font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-group h3 { margin: 0 10px 9px; color: var(--tl-design-caption); font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-item { display: flex; width: 100%; min-width: 0; min-height: 43px; align-items: center; gap: 9px; margin-bottom: 3px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: #6B625C; font: inherit; font-size: 11.5px; text-align: left; cursor: pointer; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-item.is-current, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-item[aria-current="page"] { background: #FDE8E9; color: #A8111A; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-item > :not(.tl-directory-count) { min-width: 0; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-count { flex: 0 0 auto; margin-left: auto; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-nav-item > small { flex: 0 0 auto; margin-left: auto; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar { display: flex; min-width: 0; flex: 0 0 auto; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 15px 20px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar > label { display: flex; min-width: 130px; flex: 1 1 145px; flex-direction: column; gap: 5px; color: var(--tl-design-caption); font-size: 10.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar > label:first-child { flex: 5 1 300px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar > .tl-full-search-input { flex-direction: row; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--vien-dam); border-radius: 9px; background: #fff; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar > .tl-full-search-input input { min-width: 0; min-height: 24px; flex: 1 1 0; border: 0; padding: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar input, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar select { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--vien-dam); border-radius: 9px; background: #fff; color: var(--chu); font: inherit; font-size: 12px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-groups, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-main-list { min-width: 0; min-height: 0; flex: 1 1 0; overflow: auto; padding: 0 20px 20px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-groups > h4 { margin: 15px 0 9px; color: var(--tl-design-caption); font-size: 11.5px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-letter-group > h3 { margin: 15px 0 9px; color: var(--tl-design-caption); font-size: 12px; font-weight: 600; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-letter-group > .tl-directory-groups { overflow: visible; padding: 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-row { display: flex; width: 100%; min-width: 0; min-height: 72px; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--vien); border-bottom-width: 0; border-radius: 0; background: #fff; color: var(--chu); font: inherit; text-align: left; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-row:first-child { border-radius: 10px 10px 0 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-row:last-child { border-bottom-width: 1px; border-radius: 0 0 10px 10px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-avatar { width: 42px; height: 42px; flex: 0 0 42px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-info { min-width: 0; flex: 1 1 0; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-info strong { color: var(--chu); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-directory .tl-directory-info small { margin-top: 3px; color: var(--tl-design-caption); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-person-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-person-actions .tl-btn { min-height: 36px; border-radius: 7px; padding: 7px 12px; color: #1268b8; font-size: 11.5px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-badge { border-radius: 5px; padding: 3px 6px; background: #F1EDEA; color: #A8111A; font-size: 10.5px; line-height: 1.4; } /* A settings modal with genuine, connected controls; never style other dialogs. */ #thaoLuanRoot .tl-settings-layout, #thaoLuanRoot .tl-settings-layout * { box-sizing: border-box; } #thaoLuanRoot #tlDialog:has(.tl-settings-layout) { display: flex; width: min(1040px,calc(100vw - 48px)); max-width: none; height: min(740px,calc(100dvh - 64px)); max-height: calc(100dvh - 64px); min-height: 0; overflow: hidden; padding: 0; border: 1px solid var(--vien-dam,#D9D1CA); border-radius: 14px; background: #fff; font: 400 13.5px/1.5 "Be Vietnam Pro",system-ui,sans-serif; } #thaoLuanRoot .tl-settings-layout { display: flex; width: 100%; min-width: 0; min-height: 0; flex: 1 1 0; color: #16120F; } #thaoLuanRoot .tl-settings-layout [hidden] { display: none !important; } #thaoLuanRoot .tl-settings-nav { display: flex; width: 224px; min-width: 0; flex: 0 0 224px; flex-direction: column; gap: 4px; overflow: auto; padding: 20px 13px; border-right: 1px solid #E6E1DD; background: #F6F4F2; } #thaoLuanRoot .tl-settings-nav > h2, #thaoLuanRoot .tl-settings-nav > h3 { margin: 0 10px 16px; color: #16120F; font-size: 18px; font-weight: 600; } #thaoLuanRoot .tl-settings-nav > [role="tablist"] { display: flex; min-width: 0; flex-direction: column; gap: 4px; } #thaoLuanRoot .tl-settings-nav-item { display: flex; width: 100%; min-width: 0; min-height: 42px; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #6B625C; font: inherit; font-size: 12px; text-align: left; cursor: pointer; } #thaoLuanRoot .tl-settings-nav-item[aria-selected="true"], #thaoLuanRoot .tl-settings-nav-item[aria-current="page"], #thaoLuanRoot .tl-settings-nav-item.is-current { background: #FDE8E9; color: #A8111A; font-weight: 600; } #thaoLuanRoot .tl-settings-nav-item .tl-ui-icon { width: 17px; height: 17px; } #thaoLuanRoot .tl-settings-content { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; background: #fff; } #thaoLuanRoot .tl-settings-header { display: flex; min-height: 66px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid #E6E1DD; } #thaoLuanRoot .tl-settings-header h3 { margin: 0; color: #16120F; font-size: 17px; font-weight: 600; } #thaoLuanRoot #tlSettingsSectionTitle45 { color: #16120F; font-size: 17px; font-weight: 600; } #thaoLuanRoot .tl-settings-header [data-settings-close] { display: inline-flex; width: 32px; height: 32px; min-height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border: 0; border-radius: 7px; padding: 6px; background: transparent; color: #6B625C; } #thaoLuanRoot .tl-settings-close { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: #6B625C; cursor: pointer; } #thaoLuanRoot .tl-settings-close:hover { background: #F1EDEA; } #thaoLuanRoot .tl-settings-body { min-width: 0; min-height: 0; flex: 1 1 0; overflow: auto; padding: 23px 24px; } #thaoLuanRoot .tl-settings-body > h4, #thaoLuanRoot .tl-settings-group-title { margin: 0 0 12px; color: #16120F; font-size: 13.5px; font-weight: 600; } #thaoLuanRoot .tl-settings-panel > h3:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #thaoLuanRoot .tl-settings-group { margin: 0 0 24px; overflow: hidden; border: 1px solid #E6E1DD; border-radius: 11px; background: #fff; } #thaoLuanRoot .tl-settings-group > h4 { margin: 0; padding: 14px 18px 9px; color: #16120F; font-size: 12px; font-weight: 600; } #thaoLuanRoot .tl-settings-group > .tl-setting-note, #thaoLuanRoot .tl-settings-group > .tl-setting-status, #thaoLuanRoot .tl-settings-group > p.tl-meta { margin: 0; padding: 4px 18px 14px; color: #6B625C; font-size: 11.5px; line-height: 1.65; } #thaoLuanRoot .tl-settings-layout .tl-setting-status:empty { display: none; } #thaoLuanRoot .tl-settings-group > button { margin: 0 18px 16px; min-height: 36px; font-size: 11.5px; } #thaoLuanRoot .tl-settings-row { display: flex; min-width: 0; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 17px 18px; border-bottom: 1px solid #F1EDEA; } #thaoLuanRoot .tl-settings-row:last-child { border-bottom: 0; } #thaoLuanRoot .tl-settings-row-copy { min-width: 0; flex: 1 1 0; } #thaoLuanRoot .tl-settings-row-copy b, #thaoLuanRoot .tl-settings-row-copy strong { display: block; color: #16120F; font-size: 13.5px; font-weight: 500; } #thaoLuanRoot .tl-settings-row-copy small, #thaoLuanRoot .tl-settings-row-copy p { display: block; margin: 5px 0 0; color: #6B625C; font-size: 11.5px; line-height: 1.6; overflow-wrap: anywhere; } #thaoLuanRoot .tl-settings-control { display: flex; min-width: 0; max-width: 48%; flex: 0 0 auto; align-items: center; gap: 8px; overflow-wrap: anywhere; } #thaoLuanRoot .tl-settings-control select, #thaoLuanRoot .tl-settings-control input:not([type="checkbox"]) { width: 100%; max-width: 240px; min-width: 0; min-height: 36px; border: 1px solid #D9D1CA; border-radius: 8px; padding: 7px 9px; background: #fff; color: #16120F; font: inherit; font-size: 11.5px; } #thaoLuanRoot .tl-settings-control input[type="checkbox"] { position: relative; appearance: none; width: 40px; height: 23px; min-width: 40px; flex: 0 0 40px; margin: 0; border: 1px solid #c9d3df; border-radius: 999px; background: #D9D1CA; cursor: pointer; } #thaoLuanRoot .tl-settings-control input[type="checkbox"]::before { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #16120F35; content: ""; } #thaoLuanRoot .tl-settings-control input[type="checkbox"]:checked { border-color: #0d784d; background: #0d784d; } #thaoLuanRoot .tl-settings-control input[type="checkbox"]:checked::before { transform: translateX(17px); } #thaoLuanRoot .tl-settings-control input[type="checkbox"]:disabled { opacity: .55; cursor: default; } #thaoLuanRoot .tl-settings-layout button:focus-visible, #thaoLuanRoot .tl-settings-layout input:focus-visible, #thaoLuanRoot .tl-settings-layout select:focus-visible { outline: 2px solid #A8111A; outline-offset: 3px; } #thaoLuanRoot .tl-settings-note { margin: 12px 0 0; color: #6B625C; font-size: 11.5px; line-height: 1.65; } #thaoLuanRoot .tl-settings-panel > .tl-setting-note { margin: 0 0 16px; color: #6B625C; font-size: 11.5px; line-height: 1.65; } #thaoLuanRoot .tl-settings-content > .tl-setting-status { min-height: 0; margin: 0; padding: 0 24px 12px; color: #6B625C; font-size: 11.5px; } #thaoLuanRoot .tl-settings-content > .tl-setting-status:empty { padding: 0; } #thaoLuanRoot .tl-settings-profile { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 17px 18px; border-bottom: 1px solid #F1EDEA; } #thaoLuanRoot .tl-settings-profile .tl-profile-avatar { width: 48px; height: 48px; flex: 0 0 48px; } #thaoLuanRoot .tl-settings-profile > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; } #thaoLuanRoot .tl-settings-profile b { color: #16120F; font-size: 13.5px; } #thaoLuanRoot .tl-settings-profile small { color: #6B625C; font-size: 11.5px; overflow-wrap: anywhere; } #thaoLuanRoot .tl-settings-group .tl-device-list { padding: 8px 18px; } #thaoLuanRoot .tl-settings-group .tl-device-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F1EDEA; } #thaoLuanRoot .tl-settings-group .tl-device-row > span { display: flex; min-width: 0; flex-direction: column; gap: 5px; overflow-wrap: anywhere; } #thaoLuanRoot .tl-settings-group .tl-device-row small { color: #6B625C; font-size: 11.5px; } #thaoLuanRoot .tl-settings-layout kbd { border: 1px solid #D9D1CA; border-radius: 5px; padding: 4px 7px; background: #F6F4F2; color: #6B625C; font: 500 11.5px "Be Vietnam Pro",system-ui,sans-serif; } #thaoLuanRoot .tl-settings-preview { display: flex; min-height: 130px; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 16px; padding: 18px; border: 1px solid #E6E1DD; border-radius: 11px; } #thaoLuanRoot .tl-settings-preview > span { max-width: 48%; padding: 9px 12px; border: 1px solid #E6E1DD; border-radius: 11px 11px 11px 3px; background: #fff; color: #16120F; font: inherit; line-height: 1.6; } #thaoLuanRoot .tl-settings-preview > span:last-child { border-color: #f0ced3; border-radius: 11px 11px 3px 11px; background: #FDE8E9; } @container tl-design (max-width: 1167px) { #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-info-pane, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-search-pane { height: 330px; } } @media (max-width: 900px) { #thaoLuanRoot #tlDialog:has(.tl-settings-layout) { width: calc(100vw - 28px); height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); } #thaoLuanRoot .tl-settings-nav { width: 190px; flex-basis: 190px; padding-inline: 10px; } #thaoLuanRoot .tl-settings-header, #thaoLuanRoot .tl-settings-body { padding-inline: 18px; } #thaoLuanRoot .tl-settings-row { padding: 14px; gap: 13px; } } @media (max-width: 650px) { #thaoLuanRoot .tl-settings-layout { flex-direction: column; } #thaoLuanRoot .tl-settings-nav { width: 100%; min-height: 0; flex: 0 0 auto; flex-direction: row; overflow-x: auto; padding: 9px; border-right: 0; border-bottom: 1px solid #E6E1DD; } #thaoLuanRoot .tl-settings-nav > h2, #thaoLuanRoot .tl-settings-nav > h3 { display: none; } #thaoLuanRoot .tl-settings-nav-item { width: auto; flex: 0 0 auto; white-space: nowrap; } #thaoLuanRoot .tl-settings-nav > [role="tablist"] { flex-direction: row; } #thaoLuanRoot .tl-settings-row { flex-wrap: wrap; } #thaoLuanRoot .tl-settings-control { max-width: 100%; } } @container tl-design (max-width: 839px) { #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-head, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-toolbar, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-toolbar { padding-inline: 13px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-library-main, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-workspace-library > .tl-library-panel, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-groups, #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-main-list { padding-inline: 13px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"]) .tl-directory-person-actions { gap: 5px; } /* Keep real department filters reachable before the directory on small PC windows. */ #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"][data-pc-design] .tl-side { order: 0; width: 100%; height: 66px; min-height: 0; flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--vien); } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"][data-pc-design] .tl-conv { order: 1; width: 100%; height: max(520px,calc(100% - 66px)); flex-basis: 100%; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] .tl-side-tools { display: none; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] #tlChannels { min-height: 0; overflow: hidden; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] .tl-directory-nav { display: flex; height: 66px; min-width: 0; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 9px 10px; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] .tl-directory-nav-group { display: contents; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] .tl-directory-nav-group h3 { display: none; } #tlApp:is([data-pc-layout="true"],[data-workspace="directory"],[data-workspace="library"],[data-context-mode="search"])[data-workspace="directory"] .tl-directory-nav-item { width: auto; min-height: 38px; flex: 0 0 auto; gap: 7px; margin: 0; white-space: nowrap; } } /* Reader identities and a compact, keyboard-accessible member disclosure. */ #thaoLuanRoot .tl-message-receipt[role="button"] { cursor: pointer; min-height: 24px; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; } #thaoLuanRoot .tl-message-receipt[role="button"]:hover { text-decoration: underline; text-underline-offset: 3px; } #thaoLuanRoot .tl-message-receipt[role="button"]:focus-visible, #thaoLuanRoot .tl-members-toggle46:focus-visible { outline: 2px solid #1677d2; outline-offset: 3px; } #thaoLuanRoot #tlMembers[hidden] { display: none !important; } #thaoLuanRoot .tl-members-heading46 { margin-bottom: 0; } #thaoLuanRoot .tl-members-toggle46 { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 36px; padding: 0; color: inherit; font: inherit; text-align: left; border: 0; background: transparent; cursor: pointer; } #thaoLuanRoot .tl-members-toggle46[aria-expanded="true"] svg { transform: rotate(180deg); } #thaoLuanRoot .tl-readers-list46 { list-style: none; padding: 0; margin: 0; max-height: min(55vh,480px); overflow-y: auto; } #thaoLuanRoot .tl-readers-list46 li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #E6E1DD; } #thaoLuanRoot .tl-readers-list46 li > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 5px; overflow-wrap: anywhere; } #thaoLuanRoot .tl-readers-list46 small { color: #6B625C; font-size: 11.5px; } #thaoLuanRoot .tl-readers-count46 { font-size: 12px; color: #6B625C; } #thaoLuanRoot .tl-readers-error46 { color: #A8111A; overflow-wrap: anywhere; } /* WIP reply-source navigation: native button works with Enter and Space. */ #tlApp button.tl-reply { display:block; width:100%; max-width:100%; box-sizing:border-box; appearance:none; text-align:left; font-family:inherit; line-height:1.5; background:rgba(100,116,139,.07); border:0; border-left:3px solid #84a7c6; border-radius:4px; padding:6px 9px; margin:0 0 6px; white-space:pre-wrap; overflow-wrap:anywhere; cursor:pointer; } #tlApp button.tl-reply:hover { background:rgba(100,116,139,.14); } #tlApp button.tl-reply:focus-visible { outline:2px solid #1677d2; outline-offset:2px; } #tlApp button.tl-reply:disabled { color:#6B625C; cursor:default; opacity:.75; } /* File drops attach to the current conversation draft; the overlay never catches input. */ .tl-chat-drop-overlay { inset:auto; box-sizing:border-box; padding:18px; pointer-events:none; background:#eaf3f8d9; backdrop-filter:blur(1px); } .tl-chat-drop-overlay > div { min-width:0; max-width:min(440px,100%); padding:24px; border-color:#C1121C; box-sizing:border-box; } .tl-chat-drop-overlay svg { display:block; width:32px; height:32px; color:#C1121C; } .tl-chat-drop-overlay[data-state="blocked"] > div { border-color:#8a5a20; background:#fff8e9; } .tl-chat-drop-overlay strong { font-family:inherit; font-size:17px; line-height:1.5; } .tl-chat-drop-overlay small { font-family:inherit; line-height:1.5; } /* Pending speed WIP: reserve a real photo box before observing/fetching it. Natural ratio is applied on decode; object-fit keeps the whole image visible. */ .tl-feed .tl-bubble.has-photos { width: 100%; } .tl-feed .tl-photos:not(.is-album) { width: 100%; } .tl-feed .tl-photo-wrap[data-photo-frame50] { position: relative; display: inline-block; flex: 0 1 auto; max-width: 100%; max-height: min(62dvh, 620px); min-height: 1px; background: #EFEAE6; border-radius: 9px; overflow: hidden; } .tl-feed .tl-photo-wrap[data-photo-frame50] > .tl-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; } .tl-feed .tl-photo[data-photo-state50="error"] { color: #6B625C; font-size: 12px; } .tl-message-loading50 { min-height: 100px; } /* PC14 self-owned memorable name and avatar preview. Existing editor stays intact. */ #thaoLuanRoot .tl-profile-avatar-button51{padding:0;border:0;cursor:zoom-in;overflow:hidden;flex-shrink:0} #thaoLuanRoot .tl-profile-avatar-button51 img{width:100%;height:100%;object-fit:cover} #thaoLuanRoot .tl-profile-name-form51:not([hidden]){display:flex;flex-direction:column;gap:10px;margin:14px 0;padding:16px;background:#F6F4F2;border-radius:12px} #thaoLuanRoot .tl-profile-name-form51 input{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit} #thaoLuanRoot .tl-profile-name-form51 small{line-height:1.5} #thaoLuanRoot .tl-own-avatar-view51{height:min(60vh,600px);overflow:auto;background:#F6F4F2;border-radius:12px;text-align:center} #thaoLuanRoot .tl-own-avatar-view51 img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;margin:auto} #thaoLuanRoot .tl-own-avatar-zoom51{display:flex;align-items:center;gap:12px;margin-top:14px} #thaoLuanRoot .tl-own-avatar-zoom51 input{flex:1;min-width:100px} /* UI17 phone/private names; all icons retain the existing SVG system. */ .tl-phone49{display:inline;padding:0;border:0;border-radius:0;background:transparent;color:#1677d2;text-decoration:underline;text-underline-offset:2px;font:inherit;line-height:inherit;cursor:pointer;white-space:normal;overflow-wrap:anywhere}.tl-phone49:focus-visible{outline:2px solid #1677d2;outline-offset:2px}.tl-call-avatar{overflow:hidden}.tl-call-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.tl-phone-actions49{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.tl-alias-hint49{color:#6B625C;font-size:13px;line-height:1.5}.tl-alias-form49 input{box-sizing:border-box;width:100%;padding:10px;margin:8px 0;border:1px solid #d7e0eb;border-radius:8px;font:inherit} .tl-sender49{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer}.tl-sender49:focus-visible{outline:2px solid #1677d2;outline-offset:3px}.tl-member-card49{text-align:center}.tl-member-photo49{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;overflow:hidden;margin:12px auto;background:#e7eff5;color:#3b6686;font-size:30px}.tl-member-photo49 img{width:100%;height:100%;object-fit:cover} /* PC19 login tabs. Scope stays inside the unauthenticated login card. */ #thaoLuanRoot #tlLogin[hidden], #thaoLuanRoot #tlLogin [hidden] { display: none !important; } #thaoLuanRoot #tlLogin .tl-auth-tabs51 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 26px; padding: 5px; border: 1px solid #E6E1DD; border-radius: 12px; background: #f4f6f8; } #thaoLuanRoot #tlLogin .tl-auth-tabs51 > [role="tab"] { min-width: 0; min-height: 42px; margin: 0; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: #6B625C; box-shadow: none; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; } #thaoLuanRoot #tlLogin .tl-auth-tabs51 > [role="tab"][aria-selected="true"] { background: #fff; color: #C1121C; box-shadow: 0 2px 8px #16120F10; } #thaoLuanRoot #tlLogin .tl-auth-tabs51 > [role="tab"]:focus-visible { outline: 2px solid #C1121C; outline-offset: 3px; } #thaoLuanRoot #tlLogin .tl-auth-tabs51 > [role="tab"]:disabled { opacity: .6; cursor: wait; } #thaoLuanRoot #tlLogin .tl-auth-panel51 { min-width: 0; outline: 0; } #thaoLuanRoot #tlLogin .tl-auth-qr51 h2 { margin: 0 0 10px; font-size: 24px; } #thaoLuanRoot #tlLogin .tl-auth-qr51 p { font-size: 13px; line-height: 1.65; } #thaoLuanRoot #tlLogin #tlQrImage50 { display: block; width: 256px; height: auto; max-width: calc(100% - 22px); box-sizing: content-box; margin: 18px auto; padding: 10px; border: 1px solid #E6E1DD; border-radius: 12px; background: #fff; } #thaoLuanRoot #tlLogin #tlQrStatus50 { min-height: 42px; margin: 14px 0 0; color: #526171; text-align: center; } #thaoLuanRoot #tlLogin #tlQrError50 { padding: 10px 12px; border-radius: 9px; background: #fff3f1; color: #C1121C; } #thaoLuanRoot #tlLogin .tl-auth-qr51 .tl-modal-actions { justify-content: center; margin: 12px 0 0; } #thaoLuanRoot #tlLogin .tl-auth-first51 { margin: 20px 0 0; padding: 13px 14px; border: 1px solid #eadfbf; border-radius: 10px; background: #fffaf0; color: #706954; font-size: 12px; line-height: 1.7; } #thaoLuanRoot #tlLogin .tl-auth-first51 a { color: #C1121C; font-weight: 650; } #thaoLuanRoot #tlLogin .tl-auth-first51 a[aria-disabled="true"] { opacity: .6; cursor: wait; } #thaoLuanRoot #tlLogin .tl-auth-role51 { color: #7A716A; font-size: 12px; line-height: 1.7; } #thaoLuanRoot #tlLogin .tl-auth-role51 a { color: #C1121C; } #thaoLuanRoot #tlLogin #tlActivate { display: grid; gap: 15px; margin: 18px 0; } #thaoLuanRoot #tlLogin #tlActivate label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; } #thaoLuanRoot #tlLogin #tlActivate input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d6deea; border-radius: 9px; background: #fff; color: #25394d; font: inherit; font-weight: 400; } #thaoLuanRoot #tlLogin #tlActivate input:focus { outline: 2px solid #C1121C; outline-offset: 2px; } #thaoLuanRoot #tlLogin #tlActivate > [type="submit"] { width: 100%; min-height: 46px; } @media (max-width: 600px) { #thaoLuanRoot #tlLogin .tl-auth-tabs51 { margin-bottom: 22px; } #thaoLuanRoot #tlLogin .tl-auth-qr51 h2 { font-size: 22px; } } /* Responsive unauthenticated login only. The hidden chat shell must not size it. */ #thaoLuanRoot:has(> #tlLogin:not([hidden])) { display: block; height: auto; min-height: 0; } #thaoLuanRoot:has(> #tlLogin:not([hidden])) > .tl-desktop-rail { display: none; } #thaoLuanRoot > #tlLogin:not([hidden]) { box-sizing: border-box; min-width: 0; max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } body.tl-employee-page:not(.tl-employee-authenticated):has(#tlLogin:not([hidden])) { height: auto; min-height: 100dvh; overflow-y: auto; } .tl-employee-layout:has(#tlLogin:not([hidden])) { padding-block: 18px; } #thaoLuanRoot #tlLogin #tlQrImage50 { width: clamp(160px, 32dvh, 256px); } @media (max-width: 900px) { .tl-employee-layout:has(#tlLogin:not([hidden])) > .tl-employee-root { grid-row: 1; } .tl-employee-layout:has(#tlLogin:not([hidden])) > .tl-employee-hero { grid-row: 2; } } @media (max-height: 760px) { .tl-employee-layout:has(#tlLogin:not([hidden])) { align-items: start; } #thaoLuanRoot #tlLogin:not([hidden]) { padding: 20px; } #thaoLuanRoot #tlLogin .tl-auth-tabs51 { margin-bottom: 16px; } #thaoLuanRoot #tlLogin #tlQrImage50 { margin-block: 12px; } #thaoLuanRoot #tlLogin #tlQrStatus50 { min-height: 0; margin-top: 10px; } #thaoLuanRoot #tlLogin .tl-auth-first51 { margin-top: 14px; } } @media (max-height: 600px) { #thaoLuanRoot #tlLogin .tl-auth-tabs51 { margin-bottom: 12px; } #thaoLuanRoot #tlLogin .tl-auth-qr51 h2 { font-size: 22px; } #thaoLuanRoot #tlLogin .tl-auth-qr51 p { margin-block: 8px; } #thaoLuanRoot #tlLogin #tlQrImage50 { width: 144px; margin-block: 8px; } } /* ── Gói 06/11/2026 ────────────────────────────────────────────────────── Gộp tin: applyMessageClusters40 đã ẩn TÊN cho tin trong cụm, nhưng không luật nào ẩn avatar, nên một chuỗi tin cùng người vẫn cõng cột avatar 32px lặp lại. Dùng visibility chứ không display để ô 32px giữ chỗ, các dòng vẫn thẳng hàng. */ #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-cluster-grouped .tl-msg-avatar { visibility: hidden; } /* -- Goi 06/11/2026 - can le theo nguoi gui --------------------------------- Co che day sang phai cua tin minh la `.tl-msg.mine{margin-left:auto}`, nhung no chi chay khi hop KHONG bi ep chieu rong cung. (a) Anh: `.tl-feed .tl-msg.has-photos{width:min(85%,760px)}` ep cung nen hop luon rong 760px va anh troi vao giua. Tra ve width:auto roi chan bang max-width thi margin-left:auto hoat dong tro lai. (b) Cuoc goi: `.tl-call-log{margin:14px auto;align-items:center!important}` co tinh can giua. Nay day ve phia nguoi goi; lop `mine` do callLogHTML gan theo co fromMe. */ #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.has-photos { width: auto; max-width: min(85%, 760px); } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.has-photos.mine { margin-left: auto; align-items: flex-end; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.tl-call-log { width: min(72%, 380px); margin-left: 0; margin-right: auto; align-items: flex-start !important; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.tl-call-log.mine { margin-left: auto; margin-right: 0; align-items: flex-end !important; } /* -- Goi 06/11/2026 (b) - day ANH ve dung ben, TANG TRONG ------------------- Hop tin da can phai dung (chip cam xuc bam sat mep phai), nhung anh van dan trai vi `.tl-bubble.has-photos{width:100%}` lam bong bong cang het 760px, nen `align-items:flex-end` cua hop khong con gi de day. Phai thu bong bong lai bang anh roi day chinh no, va day ca hang anh ben trong. Album (luoi 2 cot) giu nguyen 100% trong hop da can phai. */ #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.has-photos.mine .tl-bubble.has-photos { width: auto; max-width: 100%; margin-left: auto; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.has-photos.mine .tl-photos:not(.is-album) { width: auto; justify-content: flex-end; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-feed .tl-msg.has-photos.mine .tl-photo-wrap { margin-left: auto; } /* -- Goi 06/11/2026 (c) - bo dai do ngang, doi thuong hieu xuong rail ------- Thanh do lap lai dung noi dung thanh tieu de cua so Electron, va hai nut trong no deu co ban sao o cho khac: #tlNotify <-> #tlSettingsNotify (Cai dat chung) #tlLogout <-> Dang xuat (menu avatar) #tlWho chi la nhan Nhan vien. Nen an di khong mat chuc nang nao. Man dang nhap KHONG co .tl-employee-authenticated nen van giu thanh do. Rail SVG dung stroke:currentColor nen chi can dat color la bieu tuong theo. */ body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-header { display: none; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail { background: #C1121C; border-right: 1px solid #A8111A; color: #FFFFFF; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-item { border-color: transparent; background: transparent; color: rgba(255,255,255,.88); box-shadow: none; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-item:hover { border-color: transparent; background: rgba(255,255,255,.14); color: #FFFFFF; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-item.is-current { border-color: transparent; background: rgba(255,255,255,.22); color: #FFFFFF; box-shadow: none; } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-desktop-rail-brand { border-color: rgba(255,255,255,.55); } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail .tl-rail-avatar { border-color: rgba(255,255,255,.55); } #thaoLuanRoot:has(> #tlApp[data-pc-layout="true"]) > .tl-desktop-rail button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } /* -- Goi 06/11/2026 (d) - don goc tren phai + menu avatar kieu Zalo -------- (a) `.tl-top` chua h2 Thao luan va `.tl-top-actions` (tlWho, tlNotify, tlDevices, tlLogout). Luat cu ep height:0 nen noi dung TRAN RA de len panel ben phai. An han ca khoi. Khong mat chuc nang: tlNotify <-> tlSettingsNotify (Cai dat), tlLogout <-> Dang xuat. (b) Menu avatar dang la hop thoai giua man. Doi thanh bang do xuong neo o goc tren trai, ngay duoi anh dai dien tren rail, dung kieu Zalo. */ #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) .tl-top { display: none; } .tl-modal:has(.tl-profile-menu-head) { align-items: flex-start; justify-content: flex-start; padding: 0; background: transparent; } .tl-modal:has(.tl-profile-menu-head) .tl-dialog { width: 238px; max-width: none; max-height: none; margin: 54px 0 0 62px; padding: 6px; border: 1px solid #E6E1DD; border-radius: 12px; box-shadow: 0 14px 40px rgba(22,18,15,.20); } .tl-modal:has(.tl-profile-menu-head) .tl-profile-menu-head { gap: 10px; padding: 8px 10px 10px; margin: 0 0 4px; border-bottom: 1px solid #F1EDEA; } .tl-modal:has(.tl-profile-menu-head) .tl-profile-actions button { width: 100%; justify-content: flex-start; padding: 9px 10px; border-radius: 8px; text-align: left; } /* -- Goi 06/11/2026 (f) - nut an/hien khung phai cho ro trang thai ------- Nut da co san (#tlInfoToggle) va da chay dung, nhung nhin khong ra la dang bat hay tat. Danh dau bang nen do nhat khi dang mo, dung kieu Zalo. JS da tu dat aria-expanded nen CSS chi can bam vao thuoc tinh do. */ #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlInfoToggle { transition: background .12s ease, color .12s ease; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlInfoToggle[aria-expanded="true"] { border-color: transparent; background: #FDE8E9; color: #A8111A; } #tlApp[data-pc-layout="true"]:is([data-pc-design="b"],[data-pc-design="c"]) #tlInfoToggle[aria-expanded="true"] svg { color: #A8111A; } /* == Goi 06/11/2026 (g) - chu va khung chia se ============================ 1. Be Vietnam Pro doi tu TTF sang woff2: 546 KB xuong 135 KB. Khai lai cung ho va cung do dam nen de len khai bao TTF o tren; chu nao rot ngoai hai day duoi day van lay TTF cu nen khong mat ky tu nao. 2. Lora lam chu trinh bay cho ten thuong hieu va tieu de hop thoai. KHONG dung cho than tin nhan: chu co chan doc lau se moi mat. 3. Khung 'Chia se ngoai FFA' dung lai cho dep va cho ro cho keo tep. ==================================================================== */ @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/BeVietnamPro-400-vi.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/BeVietnamPro-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/BeVietnamPro-500-vi.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/BeVietnamPro-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/BeVietnamPro-600-vi.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/BeVietnamPro-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/BeVietnamPro-700-vi.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/BeVietnamPro-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/Lora-vi.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/Lora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -- Chu trinh bay: chi ten thuong hieu va tieu de, khong dung cho noi dung -- */ body.tl-employee-page.tl-employee-authenticated:has(#tlApp[data-pc-layout="true"]) .tl-employee-brand-copy strong { font-family: "Lora","Be Vietnam Pro",Georgia,serif; font-weight: 600; font-size: 16.5px; letter-spacing: .2px; } body:has(#tlApp[data-pc-layout="true"]) .tl-dialog header h3, body:has(#tlApp[data-pc-layout="true"]) .tl-share-dialog header h3 { font-family: "Lora","Be Vietnam Pro",Georgia,serif; font-weight: 600; letter-spacing: .1px; } body:has(#tlApp[data-pc-layout="true"]) .tl-empty-state h3, body:has(#tlApp[data-pc-layout="true"]) .tl-empty-state strong { font-family: "Lora","Be Vietnam Pro",Georgia,serif; font-weight: 600; } /* -- Khung chia se ngoai FFA --------------------------------------------- */ body:has(#tlApp[data-pc-layout="true"]) .tl-share-dialog header small { color: #6B625C; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-explainer { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid #EFE7E7; border-radius: 11px; background: linear-gradient(180deg, #FDF7F5 0%, #FBF4F2 100%); } body:has(#tlApp[data-pc-layout="true"]) .tl-share-explainer b { font-family: "Lora","Be Vietnam Pro",Georgia,serif; font-size: 14px; font-weight: 600; color: #16120F; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-explainer span { font-size: 12.5px; line-height: 1.5; color: #6B625C; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-file-summary { padding: 2px 1px; font-size: 12.5px; color: #6B625C; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-external-actions { gap: 9px; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-external-actions .tl-btn { border-radius: 10px; font-weight: 500; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-external-actions .tl-btn-primary { flex: 1 1 100%; justify-content: center; box-shadow: 0 1px 2px rgba(168,17,26,.22); } body:has(#tlApp[data-pc-layout="true"]) .tl-share-external-actions .tl-btn-primary:hover { filter: brightness(1.05); } body:has(#tlApp[data-pc-layout="true"]) .tl-share-note { font-size: 12px; line-height: 1.55; color: #8E857E; } /* -- O keo tep sang ung dung khac ---------------------------------------- */ body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop { display: flex; flex-direction: column; gap: 8px; padding: 11px; border: 1px dashed #D9C9C4; border-radius: 12px; background: #FCF8F6; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-head { font-size: 12px; font-weight: 600; letter-spacing: .2px; text-transform: uppercase; color: #8E857E; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-list { display: flex; flex-direction: column; gap: 6px; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #E6E1DD; border-radius: 9px; background: #fff; cursor: grab; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-item:hover { border-color: #C1121C; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(22,18,15,.09); } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-item:active { cursor: grabbing; transform: none; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-grip { flex: 0 0 8px; width: 8px; height: 16px; background-image: radial-gradient(circle, #C4BAB3 1.3px, transparent 1.4px); background-size: 4px 4px; opacity: .95; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-name { min-width: 0; overflow: hidden; font-size: 13px; color: #16120F; text-overflow: ellipsis; white-space: nowrap; } body:has(#tlApp[data-pc-layout="true"]) .tl-share-drop-folder { align-self: flex-start; font-size: 12.5px; } /* == Goi 06/11/2026 (h) - anh tien do hien thang ========================= Truoc day moi anh la mot nut «Anh 1 / Anh 2»: phai bam tung cai mot moi biet trong do la gi, nen khong danh gia duoc tien do bang mot cai liec. Nay hien thang anh; hon sau anh thi lat trang. KHONG dat trong pham vi PC: khung tien do dung chung cho ca man hep. ==================================================================== */ .tl-progress-thumbs { display: grid; gap: 8px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .tl-progress-thumb { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid #D9D1CA; border-radius: 9px; background: #EFEBE8; cursor: zoom-in; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .tl-progress-thumb:hover { border-color: #C1121C; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,18,15,.14); } .tl-progress-thumb:focus-visible { outline: 2px solid #C1121C; outline-offset: 2px; } .tl-progress-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; background: #EFEBE8; } /* Anh chua tai xong thi o van co hinh dang, khong nhay bo cuc. */ .tl-progress-thumb img:not([src]) { opacity: 0; } .tl-progress-thumb-so { position: absolute; left: 6px; bottom: 6px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: rgba(16,18,20,.66); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; } .tl-progress-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: #6B625C; } .tl-progress-pager .tl-btn { min-width: 34px; padding: 3px 9px; font-size: 15px; line-height: 1.2; } .tl-progress-preview-dem { align-self: center; font-size: 13px; font-weight: 600; color: #6B625C; } /* == Goi 06/11/2026 (i) - soi anh khi di chuot =========================== Di chuot vao o anh thi hien ban TO BEN CANH, hien tron anh chu khong cat cup — phong to chinh o anh chi lam to cai da cat, khong lo ra them. pointer-events: none LA BAT BUOC. Thieu no thi ban noi nam duoi con tro se nuot mouseleave cua o anh: an hien chop lien hoi. position: fixed de khong bi the hay khung cuon cat mat. ==================================================================== */ .tl-anh-soi { position: fixed; z-index: 9000; padding: 6px; pointer-events: none; border: 1px solid #D9D1CA; border-radius: 12px; background: #fff; box-shadow: 0 14px 40px rgba(16, 18, 20, .28); } .tl-anh-soi[hidden] { display: none; } .tl-anh-soi img { display: block; width: auto; height: auto; max-width: min(460px, 42vw); max-height: min(420px, 62vh); border-radius: 8px; background: #EFEBE8; } /* Nguoi tat hieu ung chuyen dong thi bo luon phan nhac o anh len. */ @media (prefers-reduced-motion: reduce) { .tl-progress-thumb, .tl-progress-thumb:hover { transition: none; transform: none; } } /* == Goi 06/11/2026 (k) - phong to va keo xem goc ======================== Phong to ma khong keo duoc thi phong len xong khong toi duoc bon goc — dung cai giam doc chi ra. Nay ca hai khung deu keo duoc. overflow: hidden o khung xem la BAT BUOC: thieu no thi anh phong to tran ra ngoai the va de len phan con lai cua hop thoai. ==================================================================== */ #thaoLuanRoot .tl-progress-preview { overflow: hidden; border-radius: 10px; } #thaoLuanRoot .tl-progress-preview img { transform-origin: center center; will-change: transform; cursor: zoom-in; user-select: none; -webkit-user-drag: none; } .tl-progress-zoom-nhac { margin: 8px 0 2px; font-size: 12px; color: #8E857E; } .tl-progress-zoom-nhac span { font-weight: 600; color: #6B625C; } /* Bo xem anh cua chat: cung mot phep, nhung no da co transform-origin. */ .tl-viewer img { will-change: transform; } /* == Goi 06/11/2026 (l) - thanh cong cu len tren ========================= Thanh «chia se · xoay · 29/29 · ten tep · phong to» dang neo day khung xem, ma anh cong truong co dong dau IN THANG VAO ANH o day: ten du an, nguoi chup, gio chup, dia chi. Thanh de len dung cho ay. Dua len dinh. Dinh anh khong co chu nao, con nut Dong nam goc phai nen khong dam nhau — van chan them bang max-width cho truong hop ten tep dai va man hep. ==================================================================== */ .tl-viewer .tl-viewer-tools { top: max(14px, env(safe-area-inset-top, 0px)); bottom: auto; max-width: calc(100% - 150px); overflow: hidden; } /* == Goi 06/11/2026 (m) - thanh cong cu mo di, di chuot moi sang ========= Luc nghi: khong nen, khong vien, chu mo — chi con dang nut de biet no o do. Di chuot vao (hoac di ban phim toi) thi sang han len. KHONG dat opacity: 0. An han thi khong ai tim ra no nua, va ban phim cung khong biet duong toi. 0.3 la vua du thay ma khong che anh. Dung :focus-within de nguoi dung ban phim van thay no sang len. ==================================================================== */ .tl-viewer .tl-viewer-tools { border-color: transparent; background: transparent; opacity: .3; transition: opacity .15s ease, background .15s ease, border-color .15s ease; } .tl-viewer .tl-viewer-tools:hover, .tl-viewer .tl-viewer-tools:focus-within { opacity: 1; background: #202a35e8; border-color: #ffffff30; } .tl-viewer .tl-viewer-tools button { border-color: transparent; background: transparent; transition: background .15s ease, border-color .15s ease; } .tl-viewer .tl-viewer-tools:hover button, .tl-viewer .tl-viewer-tools:focus-within button { border-color: #ffffff40; background: #202a35d9; } /* Bong chu de con doc duoc khi thanh dang mo va nam tren nen anh sang. */ .tl-viewer .tl-viewer-tools { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } /* == Goi 06/11/2026 (n) - cho chu trinh bay co cho de hien =============== Dot truoc dat Lora vao bon cho, nhung ba trong so do gan nhu khong bao gio hien ra: · ten thuong hieu — bo cuc PC khong ve cai do · .tl-dialog header h3 — hop thoai Tien do dung

, KHONG co the
· man trong — it khi gap Ket qua: giam doc khong thay font moi dau ca. Nay bam vao H3 cua MOI hop thoai, khong doi phai co the
. Than tin nhan van la chu khong chan: doc ca ngay bang chu co chan thi moi mat. ==================================================================== */ body:has(#tlApp[data-pc-layout="true"]) .tl-dialog h3, body:has(#tlApp[data-pc-layout="true"]) .tl-progress-heading h3, body:has(#tlApp[data-pc-layout="true"]) .tl-dialog .tl-modal-title, body:has(#tlApp[data-pc-layout="true"]) #tlProgressView h3 { font-family: "Lora","Be Vietnam Pro",Georgia,serif; font-weight: 600; letter-spacing: .1px; } /* Ten cuoc tro chuyen tren dau khung chat — cho giam doc gap moi ngay. */ body:has(#tlApp[data-pc-layout="true"]) .tl-conv-head .tl-conv-name, body:has(#tlApp[data-pc-layout="true"]) .tl-conv-head h2, body:has(#tlApp[data-pc-layout="true"]) .tl-conv-head strong { font-family: "Lora","Be Vietnam Pro",Georgia,serif; font-weight: 600; } /* == Goi 06/11/2026 (o) - khung nhap: bo nut Gui, them nut Like ========= Tren PC Enter da gui roi nen nut «Gửi» chi chiem cho. Thay bang nut 👍: co chu thi no gui chu, o trong thi gui nhanh mot cai Like — dung kieu Zalo, mot nut lam hai viec. CHI DOI TREN PC. Tren trinh duyet dien thoai, phim Enter thuong la XUONG DONG chu khong gui, bo nut Gui o do la khoa duong gui cua ho. ==================================================================== */ body:has(#tlApp[data-pc-layout="true"]) #tlSend { display: none; } .tl-like41 { display: none; } body:has(#tlApp[data-pc-layout="true"]) .tl-like41 { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 34px; padding: 0 10px; font-size: 19px; line-height: 1; border-radius: 10px; border: 1px solid #E6E1DD; background: #fff; cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .12s ease; } body:has(#tlApp[data-pc-layout="true"]) .tl-like41:hover { border-color: #C1121C; background: #FDF2F2; transform: translateY(-1px); } body:has(#tlApp[data-pc-layout="true"]) .tl-like41:active { transform: none; } body:has(#tlApp[data-pc-layout="true"]) .tl-like41:focus-visible { outline: 2px solid #C1121C; outline-offset: 2px; }