/* ================================================================
   TIMELINE — Extracted from webflow_embed.html
   mgm Vietnam 10-Year Anniversary Website
================================================================ */

.tl-wrapper,.tl-modal{font-family:Arial,Helvetica,sans-serif;color:#f0f0f0;-webkit-font-smoothing:antialiased;}
.tl-wrapper *,.tl-modal *{margin:0;padding:0;color:inherit;font-family:inherit;}

.tl-wrapper{position:relative;width:100%;flex:1;min-height:0;overflow-y:auto;margin-top:-6rem;padding-top:6rem;padding-bottom:6rem;background:transparent;-ms-overflow-style:none;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent 3rem, #000 8rem, #000 calc(100% - 6rem), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, transparent 3rem, #000 8rem, #000 calc(100% - 6rem), transparent 100%);}
.tl-wrapper::-webkit-scrollbar{display:none;}
.tl-line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;background:rgba(255,255,255,.15);z-index:0;height:100%}
.tl-progress{position:absolute;top:0;left:50%;transform:translateX(-50%);width:4px;background:#fff;box-shadow:0 0 15px rgba(255,255,255,.9);height:0;z-index:1;transition:height .1s ease-out}
.tl-container{position:relative;max-width:90rem;margin:0 auto;padding:0 2rem;display:flex;flex-direction:column;gap:4.5rem;z-index:2}

.tl-row{display:grid;grid-template-columns:1fr 4rem 1fr;grid-template-rows:auto auto;column-gap:2.5rem;row-gap:0;align-items:flex-start;opacity:var(--entry-progress,0);transform:translateY(calc((1 - var(--entry-progress,0))*5rem));transition:opacity .1s ease-out,transform .1s ease-out;}
.tl-year{grid-column:1/2;grid-row:1/2;align-self:center;font-size:clamp(2.5rem,3.5vw,4rem);font-weight:800;text-align:right;line-height:1.1;overflow:visible;padding:.2rem 0;color:transparent;background-image:linear-gradient(90deg,#555,#333);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.5;transition:all .5s;z-index:3;}
.tl-year.active{opacity:1;color:#ffffff;-webkit-text-fill-color:#ffffff;background-image:none;text-shadow:0 0 16px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.6);}

.tl-center{grid-column:2/3;grid-row:1/2;align-self:center;display:flex;justify-content:center}
.tl-dot{width:1.2rem;height:1.2rem;background:rgba(255,255,255,.2);border-radius:50%;z-index:3;transition:all .5s}
.tl-dot.active{background:#fff;box-shadow:0 0 1.2rem rgba(255,255,255,1);transform:scale(1.3)}
.tl-photos{grid-column:1/2;grid-row:2/3;margin-top:1rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end;margin-left:auto;max-width:28rem;min-width:0}
.tl-pw{display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer}
.tl-ph{width:3.5rem;height:3.5rem;flex-shrink:0;background:var(--CB);border:1px solid var(--CR);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:.5rem;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.25,.8,.25,1)}
.tl-ph:hover{background:var(--H);border-color:rgba(255,255,255,.6);transform:scale(1.1);z-index:10;box-shadow:0 .3rem 1rem rgba(0,0,0,.4)}
.tl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.tl-nm{font-size:.65rem;font-weight:500;color:rgba(255,255,255,.85);text-align:center;width:4.2rem;word-wrap:break-word;line-height:1.2}
.tl-hw{grid-column:3/4;grid-row:2/3;margin-top:1rem;position:relative;width:100%;min-width:0}
.tl-hc{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.5rem .5rem 1.5rem .5rem;-ms-overflow-style:none;scrollbar-width:none;align-items:center}
.tl-hc::-webkit-scrollbar{display:none}
.tl-cd{min-width:17rem;width:20vw;flex-shrink:0;scroll-snap-align:start;background:var(--CB);border:1px solid var(--CR);backdrop-filter:blur(var(--G));-webkit-backdrop-filter:blur(var(--G));border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:1.2rem;transition:transform .3s,background .3s;cursor:pointer}
.tl-cd:hover{transform:translateY(-.3rem);background:var(--H);border-color:rgba(255,255,255,.4)}
.tl-cd img{width:100%;height:14rem;object-fit:cover;object-position:top center;border-radius:.6rem;filter:grayscale(20%);transition:filter .3s}
.tl-cd:hover img{filter:grayscale(0%)}
.tl-cd h3{font-size:1.25rem;font-weight:600;color:#fff;margin-bottom:.5rem;line-height:1.3}
.tl-cd p{font-size:.95rem;line-height:1.5;opacity:.7;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tl-sb{position:absolute;top:calc(50% + 1.25rem);transform:translateY(-50%);background:rgba(20,20,20,.8);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:50%;width:2.8rem;height:2.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .3s;backdrop-filter:blur(5px);font-size:1.2rem}
.tl-sb:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-50%) scale(1.1)}
.tl-pv{left:-1.4rem}.tl-nx{right:-1.4rem}

/* ── Modals ── */
.tl-modal{visibility:hidden;opacity:0;pointer-events:none;position:fixed;z-index:99999;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:opacity .3s,visibility .3s}
.tl-modal.show{visibility:visible;opacity:1;pointer-events:auto}
.tl-mc{background:rgba(17,17,17,0.8);padding:2rem;border:1px solid rgba(255,255,255,0.12);border-radius:1.5rem;width:90vw;max-width:28rem;max-height:70vh;overflow-y:auto;position:relative;transform:translateY(20px);opacity:0;transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 20px 50px rgba(0,0,0,0.5)}
.tl-mc::-webkit-scrollbar{width:4px}
.tl-mc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}
.tl-modal.show .tl-mc{transform:translateY(0);opacity:1}
.tl-pl{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
.tl-pl img{width:100%;max-height:55vh;object-fit:contain;border-radius:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%)}
.tl-pi{width:100%}
.tl-pi h2{font-size:1.8rem;font-weight:700;margin-bottom:0.4rem;color:#fff;letter-spacing:-0.02em}
.tl-py{color:rgba(255,255,255,0.5);font-size:1rem;margin-bottom:0.5rem;font-weight:400}

.tl-ec{max-width:85vw;width:70rem}
.tl-ec img{max-width:100%;max-height:60vh;width:auto;height:auto;display:block;margin:0 auto;object-fit:contain;border-radius:1rem;border:1px solid rgba(255,255,255,0.1)}
@media (max-height:900px){.tl-ec{max-width:72vw;width:50rem}.tl-ec img,.tl-ei-wrap img{max-height:55vh}.tl-mc{padding:1.5rem}}
.tl-x{position:absolute;right:1.2rem;top:1rem;color:#fff;font-size:1.8rem;font-weight:300;cursor:pointer;opacity:0.6;z-index:100;transition:opacity 0.3s}
.tl-x:hover{opacity:1}

.tl-mc h2{margin-bottom:0.6rem;line-height:1.2;color:#fff}
.tl-mc p{font-size:1rem;margin-bottom:1.2rem;opacity:0.7;line-height:1.6;color:#eee}

/* Compact cards (no image) */
.tl-cd-compact{min-width:14rem;width:16vw}

/* Gallery overlay arrows */
.tl-ec{position:relative}
.tl-ei-wrap{position:relative;display:block;width:100%;margin-bottom:1.2rem}
.tl-ei-wrap img{width:100%;max-height:60vh;object-fit:cover;border-radius:1rem;border:1px solid rgba(255,255,255,0.1);display:block}
.gallery-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(20,20,20,.75);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:50%;width:2.8rem;height:2.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all .3s;backdrop-filter:blur(5px);z-index:10;line-height:1}
.gallery-btn:hover{background:rgba(255,255,255,.25);border-color:#fff;transform:translateY(-50%) scale(1.1)}
.gallery-prev{left:-1.4rem}
.gallery-next{right:-1.4rem}

/* ── Engagement Toggle Button & Layout Split ── */
.tl-mc-event { transition: max-width 0.3s ease, width 0.3s ease; position: relative; }
.tl-mc-event.show-sidebar { width: 90vw; max-width: 65rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
.show-sidebar .tl-mc-left { padding-right: 1.5rem; border-right: 1px solid rgba(255,255,255,.08); }

.ev-toggle-btn { position: absolute; bottom: 1.5rem; right: 1.5rem; background: rgba(0,0,0,.6); color: rgba(255,255,255,0.9); height: 3rem; border-radius: 2rem; display: flex; align-items: center; gap: .5rem; justify-content: center; cursor: pointer; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); z-index: 100; transition: all 0.2s; padding: 0 1rem 0 .9rem; outline: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); white-space: nowrap; }
.ev-toggle-btn:hover { background: rgba(255,255,255,.15); transform: scale(1.03); color: #fff; }
.show-sidebar .ev-toggle-btn { display: none; }
.ev-toggle-ping { position: absolute; inset: 0; border-radius: 2rem; background: rgba(255,255,255,.25); animation: ev-ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite; z-index: -1; }
@keyframes ev-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.08); opacity: 0; } }
.ev-toggle-total { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.9); min-width: .5rem; }
.ev-toggle-sep { width: 1px; height: 1.1rem; background: rgba(255,255,255,.25); margin: 0 .1rem; flex-shrink: 0; }
.ev-toggle-react { display: none; align-items: center; gap: .25rem; font-size: .82rem; color: rgba(255,255,255,.8); }
.ev-toggle-react.has-count { display: flex; }
.ev-toggle-react svg { flex-shrink: 0; }

/* Sidebar */
.ev-engage{display: none; flex-direction: column; gap: 1rem; height: 100%; border-left: none;}
.show-sidebar .ev-engage { display: flex !important; animation: ev-fade-in 0.3s ease; }
.ev-engage-wrap { display: flex; flex-direction: column; gap: 1.1rem; height: 100%; max-height: 80vh; }
@keyframes ev-fade-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* Identity picker */
.ev-id-pick{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:.75rem;padding:.9rem 1rem; max-width: 300px; margin-right: auto;}
.ev-id-pick p{font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:.6rem}
.ev-id-wrap{position:relative}
.ev-id-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:.6rem;padding:.6rem .9rem;color:#fff;font-size:.9rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s}
.ev-id-input:focus{border-color:rgba(255,255,255,.35)}
.ev-id-input::placeholder{color:rgba(255,255,255,.22)}
.ev-id-suggestions{position:absolute;top:100%;left:0;width:100%;background:rgba(18,18,18,.97);border:1px solid rgba(255,255,255,.15);border-radius:.65rem;margin-top:.3rem;max-height:180px;overflow-y:auto;z-index:200;display:none;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ev-id-suggestions.show{display:block}
.ev-id-item{display:flex;align-items:center;justify-content:flex-start;gap:.65rem;padding:.5rem .75rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);transition:background .2s;text-align:left}
.ev-id-item:last-child{border-bottom:none}
.ev-id-item:hover{background:rgba(255,255,255,.09)}
.ev-id-item img{width:1.8rem;height:1.8rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.ev-id-item span{font-size:.9rem;color:#f0f0f0;text-align:left;flex:1}

/* Identity bar */
.ev-id-bar{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:rgba(255,255,255,.5)}
.ev-id-avatar{width:1.8rem;height:1.8rem;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.ev-id-name{color:rgba(255,255,255,.85);font-weight:600; font-size:.9rem}

/* Auth */
.ev-auth-pick{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:.75rem;padding:1rem; max-width: 300px; margin-right: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(8px);}
.ev-auth-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ev-auth-msg{font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:.8rem;line-height:1.4}
.ev-auth-msg.error{color:#ff6b6b}
.ev-auth-cancel{background:none;border:none;color:rgba(255,255,255,.3);font-size:.75rem;cursor:pointer;margin-top:.8rem;width:100%;text-align:center;padding:.3rem 0;transition:color .2s}
.ev-auth-cancel:hover{color:rgba(255,255,255,.6)}

/* Reactions */
.ev-reactions{display:flex;gap:.6rem; justify-content: flex-end;}
.ev-react-btn{display:flex;align-items:center; justify-content: center;gap:.4rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2rem;padding:.35rem .7rem;cursor:pointer;color:rgba(255,255,255,.7);font-size:.85rem;transition:all .2s;user-select:none}
.ev-react-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.ev-react-btn.active{background:rgba(255,255,255,.15);border-color:#fff;font-weight:600; color:#fff;}
.ev-react-icon{display:flex;align-items:center;justify-content:center;}
.ev-react-count{font-size:.85rem;min-width:.8rem;}

/* Comments */
.ev-comments{display:flex;flex-direction:column;gap:.8rem; overflow-y:auto;padding-right:.3rem; flex: 1; min-height: 100px; padding-bottom:.5rem; border-bottom: 1px solid rgba(255,255,255,.06);}
.ev-comments::-webkit-scrollbar{width:4px}
.ev-comments::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}
.ev-cmt{display:flex;gap:.65rem;align-items:flex-start}
.ev-cmt-avatar{width:2rem;height:2rem;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.ev-cmt-body{flex:1;min-width:0; background:rgba(255,255,255,.03); padding:.5rem .7rem; border-radius: 0 .6rem .6rem .6rem;}
.ev-cmt-name{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:.2rem}
.ev-cmt-text{font-size:.9rem;color:rgba(255,255,255,.9);line-height:1.45;word-break:break-word}
.ev-comments-empty{font-size:.85rem;color:rgba(255,255,255,.4);text-align:center;padding:1rem 0; font-style:italic;}

/* Comment input */
.ev-cmt-form{display:flex;gap:.5rem;align-items:flex-end; margin-top: auto;}
.ev-cmt-textarea{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:.6rem;padding:.6rem .8rem;color:#fff;font-size:.9rem;font-family:inherit;resize:none;outline:none;transition:border-color .2s;box-sizing:border-box}
.ev-cmt-textarea:focus{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12);}
.ev-cmt-textarea::placeholder{color:rgba(255,255,255,.3)}
.ev-cmt-textarea:disabled{opacity:.3}
.ev-cmt-post{background:#fff;border:none;color:#000;border-radius:.6rem;padding:.6rem 1.2rem;font-weight: 600; font-size:.9rem;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.ev-cmt-post:hover:not(:disabled){transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,255,255,.2);}
.ev-cmt-post:disabled{opacity:.3;cursor:not-allowed; transform: none; box-shadow:none;}

/* ── Mobile Responsive ── */
@media(max-width:1024px){.tl-row{grid-template-columns:1fr 3rem 1fr}.tl-cd{width:32vw}}
@media(max-width:768px){
  .tl-row{grid-template-columns:1fr;grid-template-rows:auto;gap:1.5rem;text-align:left;position:relative}
  .tl-line,.tl-progress{left:3rem !important;transform:translateX(-50%) !important}
  .tl-center{position:absolute;top:2.2rem;grid-column:1/-1;width:100%;left:-2rem}
  .tl-dot{position:absolute;left:2.4rem;transform:none}
  .tl-dot.active{transform:scale(1.3)}
  .tl-year{grid-column:1/-1;grid-row:auto;padding-left:5.5rem;font-size:3rem;text-align:left}
  .tl-photos{grid-column:1/-1;grid-row:auto;justify-content:flex-start;margin:0;max-width:100%;padding-left:5.5rem}
  .tl-hw{grid-column:1/-1;grid-row:auto;margin-top:0;padding-left:5.5rem;max-width:100%;width:calc(100vw - 2rem)}
  .tl-pv{left:4.2rem}
  .tl-nx{right:0}
  
  .tl-mc-event.show-sidebar { grid-template-columns: 1fr; width: 90vw; }
  .show-sidebar .tl-mc-left { border-right: none; padding-right: 0; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .ev-toggle-btn { bottom: 1rem; right: 1rem; height: 2.6rem; min-width: 2.6rem; padding: 0 .75rem 0 .7rem; font-size: .8rem; gap: .35rem; }
  .ev-toggle-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .ev-toggle-total { font-size: .8rem; }
  .ev-toggle-react { font-size: .75rem; gap: .2rem; }
  .ev-toggle-react svg { width: 14px; height: 14px; }
  .ev-engage-wrap { max-height: 55vh; }
}

/* ── Mobile CSS fixes (previously injected at runtime) ── */
@media(max-width:768px){
  .ev-reactions{ justify-content: flex-start !important; }
  .ev-comments-empty{ text-align: left !important; }
  .ev-id-pick, .ev-auth-pick { margin-right: auto !important; margin-left: 0 !important; width: 100% !important; max-width: 350px !important; }
}

/* Left alignment fix for identity suggester */
.ev-id-item { justify-content: flex-start !important; text-align: left !important; }
.ev-id-item span { text-align: left !important; flex: 1 !important; }