body{
    margin:0;height:100vh;background:#0b1d2e;color:#ddd;
    font-family:Segoe UI,Arial,sans-serif;display:flex;
    flex-direction:column;justify-content:center;align-items:center;
    position:relative;overflow:hidden; user-select: none;
  }
  
  /* Vòng tròn thở */
  #circle{
    width:60vw;height:60vw;max-width:320px;max-height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(100,200,255,0.25), rgba(100,200,255,0.05));
    box-shadow:0 0 80px rgba(100,200,255,0.3);
    animation-name: breathe;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* Mask để tạo hiệu ứng mờ dần ở giữa nếu thích, hoặc bỏ đi cho sáng */
    mask-image: radial-gradient(circle, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 0%, black 60%, transparent 100%);
  }
  @keyframes breathe{0%,100%{transform:scale(0.9)} 50%{transform:scale(1.45)}}

  /* Khu vực chữ hiển thị */
  #text-container {
    position:fixed; bottom: 80px; left:0; right:0;
    text-align: center; z-index: 10; pointer-events: none;
  }
  #stage-indicator {
    font-size: 12px; color: #8ac; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px; opacity: 0.8;
  }
  #main-text {
    font-size: 18px; font-weight: 300; padding: 0 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    transition: opacity 1s ease; opacity: 1;
	line-height: 1.4;
	margin-bottom: 0px
  }

  /* Thanh điều khiển bên dưới */
  #controls {
    position:fixed; bottom: 15px; 
    background:rgba(0,0,0,0.6); backdrop-filter:blur(10px);
    padding:8px 16px; border-radius:30px;
    display:flex; align-items:center; gap:15px;
    z-index:20; border: 1px solid rgba(255,255,255,0.1);
  }
  
  #timer { font-variant-numeric: tabular-nums; min-width: 45px; text-align: center; font-size: 14px; color: #8ac; }
  
  .btn {
    background:none; border:none; color:#eee; font-size:20px; cursor:pointer;
    padding:0; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center;
    border-radius: 50%; transition: background 0.2s;
  }
  .btn:hover { background: rgba(255,255,255,0.1); }
  .btn:active { transform: scale(0.95); }
  .btn-small { font-size: 16px; color: #aaa; }

  /* Popup chung */
  .popup{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:#1a2634; color:#fff; padding:20px; border-radius:12px;
    display:none; flex-direction:column; gap:12px; z-index:30;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    border: 1px solid #456; min-width: 220px; text-align: center;
  }
  .popup h3 { margin:0; font-size:16px; color:#8ac; text-transform: uppercase; letter-spacing: 1px;}
  .grid-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .popup button {
    padding:10px; border:none; border-radius:6px; cursor:pointer;
    background:#2c3e50; color:#ddd; font-size: 14px;
  }
  .popup button:hover { background:#3e5871; }
  .popup input {
    padding:8px; border-radius:6px; border:none; width:60px;
    text-align:center; background:#0f1720; color:#fff; border: 1px solid #456;
  }
  .closeBtn { background: #322 !important; color: #eaa !important; margin-top: 5px;}
  
.popup button.active {
  background: #8ac;   /* highlight color */
  color: #fff;
}

  #overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.7); z-index: 25; display: none;
  }
  
#timer {
  background: none;
  border: none;
  color: #8ac;
  font-size: 14px;
  min-width: 45px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px; /* default rectangular corners */
}

#timer:hover {
  background: rgba(255,255,255,0.1);
  border-radius: 4px; /* keep it rectangular on hover */
}